feat: add smoothed data only option in scalar page (#795)

frontend/packages/core/public/locales/en/scalar.json

@@ -7,6 +7,7 @@
     "minimize": "Minimize",
     "restore": "Selection restore",
     "smoothed": "Smoothed",
+    "smoothed-data-only": "Smoothed Data Only",
     "smoothing": "Smoothing",
     "toggle-log-axis": "Logarithmic axis",
     "tooltip-sorting": "Tooltip Sorting",

frontend/packages/core/public/locales/zh/scalar.json

@@ -7,6 +7,7 @@
     "minimize": "最小化",
     "restore": "还原图表框选",
     "smoothed": "Smoothed",
+    "smoothed-data-only": "仅显示平滑后数据",
     "smoothing": "平滑度",
     "toggle-log-axis": "切换对数坐标轴",
     "tooltip-sorting": "详情数据排序",

frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx

@@ -86,6 +86,7 @@ type ScalarChartProps = {
     xAxis: XAxis;
     sortingMethod: SortingMethod;
     outlier?: boolean;
+    smoothedOnly?: boolean;
     running?: boolean;
 };
 
@@ -97,6 +98,7 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
     xAxis,
     sortingMethod,
     outlier,
+    smoothedOnly,
     running
 }) => {
     const {t, i18n} = useTranslation(['scalar', 'common']);
@@ -163,9 +165,10 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
             chartData({
                 data: smoothedDatasets.slice(0, runs.length),
                 runs,
-                xAxis
+                xAxis,
+                smoothedOnly
             }),
-        [smoothedDatasets, runs, xAxis]
+        [smoothedDatasets, runs, xAxis, smoothedOnly]
     );
 
     const maxStepLength = useMemo(

frontend/packages/core/src/pages/scalar.tsx

@@ -46,6 +46,8 @@ const Scalar: FunctionComponent = () => {
 
     const [ignoreOutliers, setIgnoreOutliers] = useState(false);
 
+    const [smoothedDataOnly, setSmoothedDataOnly] = useState(false);
+
     const aside = useMemo(
         () =>
             runs.length ? (
@@ -76,6 +78,11 @@ const Scalar: FunctionComponent = () => {
                         <Field label={t('scalar:smoothing')}>
                             <Slider min={0} max={0.99} step={0.01} value={smoothing} onChangeComplete={setSmoothing} />
                         </Field>
+                        <Field>
+                            <Checkbox value={smoothedDataOnly} onChange={setSmoothedDataOnly}>
+                                {t('scalar:smoothed-data-only')}
+                            </Checkbox>
+                        </Field>
                     </AsideSection>
                     <AsideSection>
                         <Field label={t('scalar:x-axis')}>
@@ -84,7 +91,18 @@ const Scalar: FunctionComponent = () => {
                     </AsideSection>
                 </RunAside>
             ) : null,
-        [t, ignoreOutliers, onChangeRuns, running, runs, selectedRuns, smoothing, tooltipSorting, xAxis]
+        [
+            t,
+            ignoreOutliers,
+            smoothedDataOnly,
+            onChangeRuns,
+            running,
+            runs,
+            selectedRuns,
+            smoothing,
+            tooltipSorting,
+            xAxis
+        ]
     );
 
     const withChart = useCallback<WithChart<Tag>>(
@@ -97,10 +115,11 @@ const Scalar: FunctionComponent = () => {
                 xAxis={xAxis}
                 sortingMethod={tooltipSorting}
                 outlier={ignoreOutliers}
+                smoothedOnly={smoothedDataOnly}
                 running={running}
             />
         ),
-        [smoothing, xAxis, tooltipSorting, ignoreOutliers, running]
+        [smoothing, xAxis, tooltipSorting, ignoreOutliers, smoothedDataOnly, running]
     );
 
     return (

frontend/packages/core/src/resource/scalar/chart.ts

@@ -17,7 +17,17 @@ export const options = {
     }
 };
 
-export const chartData = ({data, runs, xAxis}: {data: Dataset[]; runs: Run[]; xAxis: XAxis}) =>
+export const chartData = ({
+    data,
+    runs,
+    xAxis,
+    smoothedOnly
+}: {
+    data: Dataset[];
+    runs: Run[];
+    xAxis: XAxis;
+    smoothedOnly?: boolean;
+}) =>
     data
         .map((dataset, i) => {
             // smoothed data:
@@ -29,38 +39,41 @@ export const chartData = ({data, runs, xAxis}: {data: Dataset[]; runs: Run[]; xA
             const name = runs[i].label;
             const color = runs[i].colors[0];
             const colorAlt = runs[i].colors[1];
-            return [
+            const result = [
                 {
                     name,
-                    z: i,
+                    z: runs.length + i,
                     itemStyle: {
-                        color: colorAlt
+                        color
                     },
                     lineStyle: {
-                        color: colorAlt
+                        color
                     },
                     data: dataset,
                     encode: {
                         x: [xAxisMap[xAxis]],
-                        y: [2]
+                        y: [3]
                     }
-                },
-                {
+                }
+            ];
+            if (!smoothedOnly) {
+                result.push({
                     name,
-                    z: runs.length + i,
+                    z: i,
                     itemStyle: {
-                        color
+                        color: colorAlt
                     },
                     lineStyle: {
-                        color
+                        color: colorAlt
                     },
                     data: dataset,
                     encode: {
                         x: [xAxisMap[xAxis]],
-                        y: [3]
+                        y: [2]
                     }
-                }
-            ];
+                });
+            }
+            return result;
         })
         .flat();