From 8199e0d2c0ee1b6de87dcb810ec5cee5a9d9bad7 Mon Sep 17 00:00:00 2001
From: Roland Tannous <rolandtannous@gravityq.ai>
Date: Wed, 4 Mar 2026 23:07:36 +0000
Subject: [PATCH] refactor: move train split slice controls back to Advanced
 section

Place Train Split Start / End inputs inside the Advanced collapsible
with descriptive tooltips clarifying they slice the training split.
Revert the selectors component to its original eval-split-only layout.
---
 .../studio/sections/dataset-section.tsx       | 164 ++++++++++++------
 .../hf-dataset-subset-split-selectors.tsx     | 102 ++---------
 2 files changed, 125 insertions(+), 141 deletions(-)

diff --git a/studio/frontend/src/features/studio/sections/dataset-section.tsx b/studio/frontend/src/features/studio/sections/dataset-section.tsx
index 338a264579..bb65f704ac 100644
--- a/studio/frontend/src/features/studio/sections/dataset-section.tsx
+++ b/studio/frontend/src/features/studio/sections/dataset-section.tsx
@@ -13,6 +13,7 @@ import {
   ComboboxItem,
   ComboboxList,
 } from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
 import { InputGroupAddon } from "@/components/ui/input-group";
 import {
   Select,
@@ -290,10 +291,6 @@ export function DatasetSection() {
           setDatasetSplit={setDatasetSplit}
           datasetEvalSplit={datasetEvalSplit}
           setDatasetEvalSplit={setDatasetEvalSplit}
-          datasetSliceStart={datasetSliceStart}
-          setDatasetSliceStart={setDatasetSliceStart}
-          datasetSliceEnd={datasetSliceEnd}
-          setDatasetSliceEnd={setDatasetSliceEnd}
         />
 
         <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
@@ -305,51 +302,120 @@ export function DatasetSection() {
             Advanced
           </CollapsibleTrigger>
           <CollapsibleContent className="mt-3">
-            <div className="flex flex-col gap-2">
-              <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                Target Format
-                <Tooltip>
-                  <TooltipTrigger asChild={true}>
-                    <button
-                      type="button"
-                      className="text-foreground/70 hover:text-foreground"
-                    >
-                      <HugeiconsIcon
-                        icon={InformationCircleIcon}
-                        className="size-3"
-                      />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    Format of your training data. Auto-detect works for most
-                    datasets.{" "}
-                    <a
-                      href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/datasets-guide"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-primary underline"
-                    >
-                      Read more
-                    </a>
-                  </TooltipContent>
-                </Tooltip>
-              </span>
-              <Select
-                value={datasetFormat}
-                onValueChange={(v) =>
-                  setDatasetFormat(v as typeof datasetFormat)
-                }
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto">Auto</SelectItem>
-                  <SelectItem value="alpaca">Alpaca</SelectItem>
-                  <SelectItem value="chatml">ChatML</SelectItem>
-                  <SelectItem value="sharegpt">ShareGPT</SelectItem>
-                </SelectContent>
-              </Select>
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                  Target Format
+                  <Tooltip>
+                    <TooltipTrigger asChild={true}>
+                      <button
+                        type="button"
+                        className="text-foreground/70 hover:text-foreground"
+                      >
+                        <HugeiconsIcon
+                          icon={InformationCircleIcon}
+                          className="size-3"
+                        />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      Format of your training data. Auto-detect works for most
+                      datasets.{" "}
+                      <a
+                        href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/datasets-guide"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary underline"
+                      >
+                        Read more
+                      </a>
+                    </TooltipContent>
+                  </Tooltip>
+                </span>
+                <Select
+                  value={datasetFormat}
+                  onValueChange={(v) =>
+                    setDatasetFormat(v as typeof datasetFormat)
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">Auto</SelectItem>
+                    <SelectItem value="alpaca">Alpaca</SelectItem>
+                    <SelectItem value="chatml">ChatML</SelectItem>
+                    <SelectItem value="sharegpt">ShareGPT</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-1.5">
+                  <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                    Train Split Start
+                    <Tooltip>
+                      <TooltipTrigger asChild={true}>
+                        <button
+                          type="button"
+                          className="text-foreground/70 hover:text-foreground"
+                        >
+                          <HugeiconsIcon
+                            icon={InformationCircleIcon}
+                            className="size-3"
+                          />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Only train on a subset of your training split by
+                        specifying a start row index (inclusive, 0-based).
+                        Useful for resuming from a checkpoint or debugging
+                        with a smaller slice. Leave empty to start from the
+                        first row.
+                      </TooltipContent>
+                    </Tooltip>
+                  </span>
+                  <Input
+                    inputMode="numeric"
+                    placeholder="0"
+                    value={datasetSliceStart ?? ""}
+                    onChange={(e) =>
+                      setDatasetSliceStart(e.target.value || null)
+                    }
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                    Train Split End
+                    <Tooltip>
+                      <TooltipTrigger asChild={true}>
+                        <button
+                          type="button"
+                          className="text-foreground/70 hover:text-foreground"
+                        >
+                          <HugeiconsIcon
+                            icon={InformationCircleIcon}
+                            className="size-3"
+                          />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Last row index to include from the training split
+                        (inclusive, 0-based). For example, set Start to 0 and
+                        End to 99 to train on the first 100 rows. Leave empty
+                        to use all remaining rows.
+                      </TooltipContent>
+                    </Tooltip>
+                  </span>
+                  <Input
+                    inputMode="numeric"
+                    placeholder="End"
+                    value={datasetSliceEnd ?? ""}
+                    onChange={(e) =>
+                      setDatasetSliceEnd(e.target.value || null)
+                    }
+                  />
+                </div>
+              </div>
             </div>
           </CollapsibleContent>
         </Collapsible>
diff --git a/studio/frontend/src/features/training/components/hf-dataset-subset-split-selectors.tsx b/studio/frontend/src/features/training/components/hf-dataset-subset-split-selectors.tsx
index 35bfec8cd3..148341e4de 100644
--- a/studio/frontend/src/features/training/components/hf-dataset-subset-split-selectors.tsx
+++ b/studio/frontend/src/features/training/components/hf-dataset-subset-split-selectors.tsx
@@ -5,7 +5,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import {
   Tooltip,
@@ -32,10 +31,6 @@ type Props = {
   setDatasetSplit: (v: string | null) => void;
   datasetEvalSplit: string | null;
   setDatasetEvalSplit: (v: string | null) => void;
-  datasetSliceStart?: string | null;
-  setDatasetSliceStart?: (v: string | null) => void;
-  datasetSliceEnd?: string | null;
-  setDatasetSliceEnd?: (v: string | null) => void;
 };
 
 export function HfDatasetSubsetSplitSelectors({
@@ -49,10 +44,6 @@ export function HfDatasetSubsetSplitSelectors({
   setDatasetSplit,
   datasetEvalSplit,
   setDatasetEvalSplit,
-  datasetSliceStart,
-  setDatasetSliceStart,
-  datasetSliceEnd,
-  setDatasetSliceEnd,
 }: Props) {
   const {
     subsets: hfSubsets,
@@ -164,89 +155,16 @@ export function HfDatasetSubsetSplitSelectors({
               />
             </>
           )}
-          {variant === "studio" && setDatasetSliceStart && setDatasetSliceEnd ? (
-            <div className="grid grid-cols-3 gap-3">
-              <SelectorDropdown
-                variant={variant}
-                label="Eval Split"
-                tooltip="Select which split to use for evaluation. None means no evaluation during training."
-                value={datasetEvalSplit}
-                onChange={setDatasetEvalSplit}
-                options={hfSplits}
-                placeholder="None"
-                allowNone
-              />
-              <div className="flex flex-col gap-1.5">
-                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                  Slice Start
-                  <Tooltip>
-                    <TooltipTrigger asChild={true}>
-                      <button
-                        type="button"
-                        className="text-foreground/70 hover:text-foreground"
-                      >
-                        <HugeiconsIcon
-                          icon={InformationCircleIcon}
-                          className="size-3"
-                        />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      Inclusive start row index. Leave empty to start from the beginning.
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                <Input
-                  inputMode="numeric"
-                  placeholder="0"
-                  value={datasetSliceStart ?? ""}
-                  onChange={(e) =>
-                    setDatasetSliceStart(e.target.value || null)
-                  }
-                />
-              </div>
-              <div className="flex flex-col gap-1.5">
-                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                  Slice End
-                  <Tooltip>
-                    <TooltipTrigger asChild={true}>
-                      <button
-                        type="button"
-                        className="text-foreground/70 hover:text-foreground"
-                      >
-                        <HugeiconsIcon
-                          icon={InformationCircleIcon}
-                          className="size-3"
-                        />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      Inclusive end row index. Leave empty to use all remaining rows.
-                    </TooltipContent>
-                  </Tooltip>
-                </span>
-                <Input
-                  inputMode="numeric"
-                  placeholder="End"
-                  value={datasetSliceEnd ?? ""}
-                  onChange={(e) =>
-                    setDatasetSliceEnd(e.target.value || null)
-                  }
-                />
-              </div>
-            </div>
-          ) : (
-            <SelectorDropdown
-              variant={variant}
-              label="Eval Split"
-              tooltip="Select which split to use for evaluation. None means no evaluation during training."
-              value={datasetEvalSplit}
-              onChange={setDatasetEvalSplit}
-              options={hfSplits}
-              placeholder="None"
-              allowNone
-            />
-          )}
+          <SelectorDropdown
+            variant={variant}
+            label="Eval Split"
+            tooltip="Select which split to use for evaluation. None means no evaluation during training."
+            value={datasetEvalSplit}
+            onChange={setDatasetEvalSplit}
+            options={hfSplits}
+            placeholder="None"
+            allowNone
+          />
         </>
       )}
     </>