Merge branch 'release/v3.17.5' into export-runs-be

src/src/components/HighPlot/HighPlot.tsx

@@ -45,6 +45,7 @@ const HighPlot = React.forwardRef(function HighPlot(
       bottom: 30,
       left: 60,
     },
+    scaleStates,
   } = props;
 
   // boxes
@@ -117,6 +118,7 @@ const HighPlot = React.forwardRef(function HighPlot(
       axesRef,
       dimensions: data.dimensions,
       plotBoxRef,
+      scaleStates,
     });
 
     if (attributesRef?.current.xScale && attributesRef.current.yScale) {

src/src/components/ParamsScalePopover/ParamsScalePopover.scss

@@ -0,0 +1,17 @@
+@use 'src/styles/abstracts' as *;
+
+.ParamsScalePopover {
+  width: 21.5rem;
+  padding: 1rem;
+
+  &__subtitle {
+    text-transform: uppercase;
+  }
+
+  &__select {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: $space-xs;
+  }
+}

src/src/components/ParamsScalePopover/ParamsScalePopover.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Text, ToggleButton } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import { IParamsScalePopoverProps } from 'types/components/ParamsScalePopover/ParamsScalePopover';
+import { ISelectOption } from 'types/services/models/explorer/createAppModel';
+
+import { ScaleEnum } from 'utils/d3';
+
+import './ParamsScalePopover.scss';
+
+function ParamsScalePopover(
+  props: IParamsScalePopoverProps,
+): React.FunctionComponentElement<React.ReactNode> {
+  function handleScaleChange(val: string | number, id: any) {
+    const newParams = props.selectedParams.map((param) => {
+      if (param.key === id) {
+        param.scale = val as ScaleEnum;
+      }
+      return param;
+    });
+
+    props.onParamsScaleTypeChange(newParams);
+  }
+
+  return (
+    <ErrorBoundary>
+      <div className='ParamsScalePopover'>
+        <Text
+          size={12}
+          tint={50}
+          component='p'
+          className='ParamsScalePopover__subtitle'
+        >
+          Select Params Scale:
+        </Text>
+        {props.selectedParams.map((param: ISelectOption) => (
+          <div className='ParamsScalePopover__select' key={param.key}>
+            <ToggleButton
+              title={param.label + ' scale:'}
+              id={param.key}
+              value={param.scale ? param.scale : ScaleEnum.Linear}
+              leftValue={ScaleEnum.Linear}
+              rightValue={ScaleEnum.Log}
+              leftLabel='Linear'
+              rightLabel='Log'
+              onChange={handleScaleChange}
+            />
+          </div>
+        ))}
+      </div>
+    </ErrorBoundary>
+  );
+}
+
+export default React.memo(ParamsScalePopover);

src/src/config/analytics/analyticsKeysMap.ts

@@ -112,6 +112,8 @@ export const ANALYTICS_EVENT_KEYS = {
         },
         changeColorIndicatorMode:
           '[ParamsExplorer][Chart][Controls] Change color indicator mode', // to value
+        changeParamsScale:
+          '[ParamsExplorer][Chart][Controls] Change params scale', // to value
       },
     },
     groupings: {

src/src/config/controls/controlsDefaultConfig.ts

@@ -76,6 +76,7 @@ export const CONTROLS_DEFAULT_CONFIG = {
       selectedFields: [],
     },
     sortFields: [],
+    defaultParamsScaleType: ScaleEnum.Linear,
   },
   images: {
     alignmentType: MediaItemAlignmentEnum.Height,

src/src/pages/Params/Params.tsx

@@ -73,6 +73,7 @@ const Params = ({
   hiddenColumns,
   liveUpdateConfig,
   selectFormData,
+  selectedParams,
   onTableRowHover,
   onTableRowClick,
   hideSystemMetrics,
@@ -113,7 +114,13 @@ const Params = ({
   sortOptions,
   onRunsTagsChange,
   onRowsVisibilityChange,
+  onParamsScaleTypeChange,
 }: IParamsProps): React.FunctionComponentElement<React.ReactNode> => {
+  let scaleStates = selectedParams.reduce((acc, param) => {
+    (acc as any)[param.key] = param.scale;
+    return acc;
+  }, {});
+
   const [isProgressBarVisible, setIsProgressBarVisible] =
     React.useState<boolean>(false);
   const chartProps: any[] = React.useMemo(() => {
@@ -123,6 +130,7 @@ const Params = ({
       onAxisBrushExtentChange,
       brushExtents,
       chartTitle: chartTitleData[chartData.data[0]?.chartIndex],
+      scaleStates,
     }));
   }, [
     highPlotData,
@@ -131,6 +139,7 @@ const Params = ({
     chartTitleData,
     onAxisBrushExtentChange,
     brushExtents,
+    scaleStates,
   ]);
 
   return (
@@ -230,6 +239,8 @@ const Params = ({
                           }
                           onColorIndicatorChange={onColorIndicatorChange}
                           onChangeTooltip={onChangeTooltip}
+                          onParamsScaleTypeChange={onParamsScaleTypeChange}
+                          selectedParams={selectedParams}
                         />
                       }
                     />

src/src/pages/Params/ParamsContainer.tsx

@@ -154,6 +154,7 @@ function ParamsContainer(): React.FunctionComponentElement<React.ReactNode> {
       tableRowHeight={paramsData?.config?.table?.rowHeight!}
       columnsWidths={paramsData?.config?.table?.columnsWidths!}
       selectFormData={paramsData?.selectFormData!}
+      selectedParams={paramsData?.config?.select?.options!}
       onColorIndicatorChange={paramsAppModel.onColorIndicatorChange}
       onCurveInterpolationChange={paramsAppModel.onCurveInterpolationChange}
       onParamsSelectChange={paramsAppModel.onParamsSelectChange}
@@ -192,6 +193,7 @@ function ParamsContainer(): React.FunctionComponentElement<React.ReactNode> {
       archiveRuns={paramsAppModel.archiveRuns}
       deleteRuns={paramsAppModel.deleteRuns}
       onRowsVisibilityChange={paramsAppModel.onRowsVisibilityChange}
+      onParamsScaleTypeChange={paramsAppModel.onParamsScaleTypeChange}
     />
   );
 }

src/src/pages/Params/components/Controls/Controls.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import { Tooltip } from '@material-ui/core';
 
 import ControlPopover from 'components/ControlPopover/ControlPopover';
 import TooltipContentPopover from 'components/TooltipContentPopover/TooltipContentPopover';
+import ParamsScalePopover from 'components/ParamsScalePopover/ParamsScalePopover';
 import { Icon } from 'components/kit';
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 
@@ -26,6 +28,15 @@ function Controls(
         CONTROLS_DEFAULT_CONFIG.params.tooltip.selectedFields.length
     );
   }, [props.tooltip]);
+
+  const paramsScaleChanged: boolean = React.useMemo(() => {
+    const changed = props.selectedParams.some(
+      (param) =>
+        param.scale !== CONTROLS_DEFAULT_CONFIG.params.defaultParamsScaleType,
+    );
+    return changed;
+  }, [props.selectedParams]);
+
   return (
     <ErrorBoundary>
       <div className='Params__Controls__container'>
@@ -61,6 +72,37 @@ function Controls(
             />
           </div>
         </Tooltip>
+        <div>
+          <ErrorBoundary>
+            <ControlPopover
+              title='Params scale'
+              anchor={({ onAnchorClick, opened }) => (
+                <Tooltip title='Params scale'>
+                  <div
+                    onClick={onAnchorClick}
+                    className={classNames('Params__Controls__anchor', {
+                      active: opened || paramsScaleChanged,
+                      outlined: !opened && paramsScaleChanged,
+                    })}
+                  >
+                    <Icon
+                      className={classNames('Params__Controls__icon', {
+                        active: opened || paramsScaleChanged,
+                      })}
+                      name='axes-scale'
+                    />
+                  </div>
+                </Tooltip>
+              )}
+              component={
+                <ParamsScalePopover
+                  onParamsScaleTypeChange={props.onParamsScaleTypeChange}
+                  selectedParams={props.selectedParams}
+                />
+              }
+            />
+          </ErrorBoundary>
+        </div>
         <div>
           <ErrorBoundary>
             <ControlPopover

src/src/services/models/explorer/createAppModel.ts

@@ -121,6 +121,7 @@ import onHighlightModeChange from 'utils/app/onHighlightModeChange';
 import onIgnoreOutliersChange from 'utils/app/onIgnoreOutliersChange';
 import onSelectOptionsChange from 'utils/app/onSelectOptionsChange';
 import onMetricVisibilityChange from 'utils/app/onMetricsVisibilityChange';
+import onParamsScaleTypeChange from 'utils/app/onParamsScaleTypeChange';
 import onParamVisibilityChange from 'utils/app/onParamsVisibilityChange';
 import onRowHeightChange from 'utils/app/onRowHeightChange';
 import onRowVisibilityChange from 'utils/app/onRowVisibilityChange';
@@ -4725,6 +4726,9 @@ function createAppModel(appConfig: IAppInitialConfig) {
               updateModelData,
             });
           },
+          onParamsScaleTypeChange(args: any): void {
+            onParamsScaleTypeChange({ args, model, appName, updateModelData });
+          },
         });
       }
       if (components?.table) {

src/src/types/components/HighPlot/HighPlot.d.ts

@@ -3,7 +3,7 @@ import { ResizeModeEnum } from 'config/enums/tableEnums';
 import { ISyncHoverStateArgs } from 'types/utils/d3/drawHoverAttributes';
 import { IChartTitle } from 'types/services/models/metrics/metricsAppModel';
 
-import { CurveEnum } from 'utils/d3';
+import { CurveEnum, ScaleEnum } from 'utils/d3';
 
 export interface IHighPlotProps {
   index: number;
@@ -28,4 +28,7 @@ export interface IHighPlotProps {
   onMount?: () => void;
   readOnly?: boolean;
   margin?: { top: number; right: number; bottom: number; left: number };
+  scaleStates?: {
+    [key: string]: ScaleEnum;
+  };
 }

src/src/types/components/ParamsScalePopover/ParamsScalePopover.d.ts

@@ -0,0 +1,7 @@
+import { ISelectOption } from 'types/services/models/explorer/createAppModel';
+import { ScaleEnum } from 'utils/d3';
+
+export interface IParamsScalePopoverProps {
+  onParamsScaleTypeChange: (params: ISelectOption[]) => void;
+  selectedParams: ISelectOption[];
+}

src/src/types/pages/params/Params.d.ts

@@ -81,6 +81,7 @@ export interface IParamsProps extends Partial<RouteChildrenProps> {
   };
   columnsOrder: IColumnsOrder;
   sameValueColumns: string[] | [];
+  selectedParams: ISelectOption[];
   onNotificationDelete: (id: number) => void;
   onCurveInterpolationChange: () => void;
   onActivePointChange: (
@@ -124,4 +125,5 @@ export interface IParamsProps extends Partial<RouteChildrenProps> {
   archiveRuns: (ids: string[], archived: boolean) => void;
   deleteRuns: (ids: string[]) => void;
   onRowsVisibilityChange: (metricKeys: string[]) => void;
+  onParamsScaleTypeChange: (params: ISelectOption[]) => void;
 }

src/src/types/pages/params/components/Controls/Controls.d.ts

@@ -4,6 +4,7 @@ import {
 } from 'types/services/models/metrics/metricsAppModel';
 
 import { CurveEnum } from 'utils/d3';
+import { ISelectOption } from 'types/services/models/explorer/createAppModel';
 
 export interface IControlProps {
   curveInterpolation: CurveEnum;
@@ -13,4 +14,6 @@ export interface IControlProps {
   onColorIndicatorChange: () => void;
   onCurveInterpolationChange: () => void;
   onChangeTooltip: (tooltip: Partial<ITooltip>) => void;
+  onParamsScaleTypeChange: (args: ISelectOption[]) => void;
+  selectedParams: ISelectOption[];
 }

src/src/types/services/models/explorer/createAppModel.d.ts

@@ -26,7 +26,7 @@ import {
   ITrendlineOptions,
 } from 'types/services/models/scatter/scatterAppModel';
 
-import { ChartTypeEnum, CurveEnum, HighlightEnum } from 'utils/d3';
+import { ChartTypeEnum, CurveEnum, HighlightEnum, ScaleEnum } from 'utils/d3';
 
 import { IImagesExploreAppModelState } from '../imagesExplore/imagesExploreAppModel';
 
@@ -102,6 +102,7 @@ export interface ISelectOption {
     option_name: string;
     context: { [key: string]: unknown } | null | any;
   };
+  scale?: ScaleEnum;
 }
 
 export interface ISelectConfig {
@@ -151,6 +152,7 @@ export interface IHighPlotConfig {
       [key: string]: [number, number] | [string, string];
     };
   };
+  // paramsScaleType: IParamsScaleStates;
 }
 
 export interface ILineChartConfig {

src/src/types/utils/d3/drawParallelAxes.d.ts

@@ -26,4 +26,5 @@ export interface IDrawParallelAxesProps {
   axesRef: React.MutableRefObject<>;
   dimensions: IDimensionsType;
   plotBoxRef: React.MutableRefObject<>;
+  scaleStates: React.MutableRefObject<>;
 }

src/src/utils/app/onParamsScaleTypeChange.ts

@@ -0,0 +1,42 @@
+import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
+
+import * as analytics from 'services/analytics';
+
+import { IModel, State } from 'types/services/models/model';
+import {
+  IAppModelConfig,
+  ISelectOption,
+} from 'types/services/models/explorer/createAppModel';
+
+export default function onParamsScaleTypeChange<M extends State>({
+  args,
+  model,
+  appName,
+  updateModelData,
+}: {
+  args: ISelectOption[];
+  model: IModel<M>;
+  appName: string;
+  updateModelData: (
+    configData: IAppModelConfig | any,
+    shouldURLUpdate?: boolean,
+  ) => void;
+}): void {
+  let configData = model?.getState()?.config;
+  if (configData?.chart) {
+    configData = {
+      ...configData,
+      select: {
+        ...configData.select,
+        options: args,
+      },
+    };
+    model.setState({ config: configData });
+    updateModelData(configData, true);
+  }
+  // todo create analytics keys and change this
+  analytics.trackEvent(
+    // @ts-ignore
+    `${ANALYTICS_EVENT_KEYS[appName].chart.controls.changeParamsScale} to "${args}"`,
+  );
+}