Merge branch 'release/v3.17.5' of ssh://github.com/g-research/fasttra…

…ckml-ui-aim into release/v3.17.5
suprjinx · May 29, 2024 · f64c6aa · f64c6aa
2 parents 616027e + 6c6f8db
commit f64c6aa
Show file tree

Hide file tree

Showing 26 changed files with 399 additions and 119 deletions.
diff --git a/README.md b/README.md
@@ -244,4 +244,4 @@ for rule in $(gh api /repos/G-Research/fasttrackml-ui-aim/rulesets -q '.[].id')
 do
   gh api /repos/G-Research/fasttrackml-ui-aim/rulesets/$rule | jq '[{name: .name, target: .target, conditions: .conditions, rules: .rules, bypass_actors: .bypass_actors}]'
 done | jq -s add
-```
+```
diff --git a/src/src/components/AxesPropsPopover/AxesPropsPopover.d.ts b/src/src/components/AxesPropsPopover/AxesPropsPopover.d.ts
@@ -2,15 +2,19 @@ import { IMetricProps } from 'types/pages/metrics/Metrics';
 import { IAlignmentConfig } from 'types/services/models/metrics/metricsAppModel';
 import { ISelectOption } from 'types/services/models/explorer/createAppModel';
 
-export interface IAxesPropsPopoverProps {
+export interface IBaseAxesPopoverProps {
   onAlignmentMetricChange: IMetricProps['onAlignmentMetricChange'];
   onAlignmentTypeChange: IMetricProps['onAlignmentTypeChange'];
-  alignmentConfig: IAlignmentConfig;
+  alignmentConfigs: IAlignmentConfig[];
   selectFormOptions: ISelectOption[];
-  axesScaleRange: IAxesScaleRange;
+  axesScaleRanges: IAxesScaleRange[];
   onAxesScaleRangeChange: IMetricProps['onAxesScaleRangeChange'];
 }
 
+export interface IAxesPropsPopoverProps extends IBaseAxesPopoverProps {
+  selectedIds: number[];
+}
+
 export interface IAxesScaleRange {
   yAxis: { min?: number; max?: number };
   xAxis: { min?: number; max?: number };

diff --git a/src/src/components/AxesPropsPopover/AxesPropsPopover.scss b/src/src/components/AxesPropsPopover/AxesPropsPopover.scss
@@ -3,6 +3,7 @@
 .AxesPropsPopover {
   width: 24.375rem;
   padding: $space-xs;
+  padding-top: 0px;
   &__subtitle {
     padding-block: $space-xs;
     text-transform: uppercase;

diff --git a/src/src/components/AxesPropsPopover/AxesPropsPopover.tsx b/src/src/components/AxesPropsPopover/AxesPropsPopover.tsx
@@ -29,12 +29,13 @@ import {
 import './AxesPropsPopover.scss';
 
 function AxesPropsPopover({
+  selectedIds,
   onAlignmentTypeChange,
   onAlignmentMetricChange,
   onAxesScaleRangeChange,
-  alignmentConfig,
+  alignmentConfigs,
   selectFormOptions,
-  axesScaleRange,
+  axesScaleRanges,
 }: IAxesPropsPopoverProps): React.FunctionComponentElement<React.ReactNode> {
   const [yScaleRange, setYScaleRange] = React.useState<IAxesRangeValue>({});
   const [isYScaleRangeValid, setIsYScaleRangeValid] =
@@ -55,11 +56,16 @@ function AxesPropsPopover({
         if (option.group === 'METRIC') {
           onAlignmentMetricChange(option.value);
         } else {
-          onAlignmentTypeChange(option.value as AlignmentOptionsEnum);
+          selectedIds.forEach((selectedId) => {
+            onAlignmentTypeChange(
+              selectedId,
+              option.value as AlignmentOptionsEnum,
+            );
+          });
         }
       }
     },
-    [onAlignmentMetricChange, onAlignmentTypeChange],
+    [onAlignmentMetricChange, onAlignmentTypeChange, selectedIds],
   );
 
   const alignmentOptions: ISelectOption[] = React.useMemo(() => {
@@ -83,10 +89,19 @@ function AxesPropsPopover({
   }, [selectFormOptions]);
 
   const selected = React.useMemo(() => {
-    return alignmentConfig?.type === AlignmentOptionsEnum.CUSTOM_METRIC
-      ? alignmentConfig.metric
-      : alignmentConfig.type;
-  }, [alignmentConfig]);
+    const filtered = alignmentConfigs.filter((alignment, index) =>
+      selectedIds.includes(index),
+    );
+    if (filtered.length === 0) {
+      return null;
+    }
+    return filtered.every(
+      (alignmentConfig) =>
+        alignmentConfig?.type === AlignmentOptionsEnum.CUSTOM_METRIC,
+    )
+      ? filtered[0].metric
+      : filtered[0].type;
+  }, [alignmentConfigs, selectedIds]);
 
   const axesProps = React.useMemo(
     () => ({
@@ -127,8 +142,10 @@ function AxesPropsPopover({
           [key]: metadata.isValid,
         });
         if (metadata.isValid) {
-          onAxesScaleRangeChange({
-            [axisType]: { ...scaleRange, [key]: value },
+          selectedIds.forEach((selectedId) => {
+            onAxesScaleRangeChange(selectedId, {
+              [axisType]: { ...scaleRange, [key]: value },
+            });
           });
         }
       }
@@ -138,11 +155,13 @@ function AxesPropsPopover({
 
   const onResetRange = React.useCallback(
     (axisType: 'xAxis' | 'yAxis') => {
-      onAxesScaleRangeChange({
-        [axisType]: { min: undefined, max: undefined },
+      selectedIds.forEach((selectedId) => {
+        onAxesScaleRangeChange(selectedId, {
+          [axisType]: { min: undefined, max: undefined },
+        });
       });
     },
-    [onAxesScaleRangeChange],
+    [onAxesScaleRangeChange, selectedIds],
   );
 
   const validationPatterns = React.useMemo(
@@ -166,17 +185,34 @@ function AxesPropsPopover({
   );
 
   React.useEffect(() => {
-    setXScaleRange((prevState) =>
-      _.isEqual(axesScaleRange.xAxis, prevState)
-        ? prevState
-        : axesScaleRange.xAxis,
-    );
-    setYScaleRange((prevState) =>
-      _.isEqual(axesScaleRange.yAxis, prevState)
-        ? prevState
-        : axesScaleRange.yAxis,
-    );
-  }, [axesScaleRange]);
+    selectedIds.forEach((selectedId) => {
+      setXScaleRange((prevState) => {
+        if (axesScaleRanges[selectedId] !== undefined) {
+          return _.isEqual(axesScaleRanges[selectedId].xAxis, prevState)
+            ? prevState
+            : axesScaleRanges[selectedId].xAxis;
+        } else {
+          return prevState;
+        }
+      });
+      setYScaleRange((prevState) => {
+        if (axesScaleRanges[selectedId] !== undefined) {
+          return _.isEqual(axesScaleRanges[selectedId].yAxis, prevState)
+            ? prevState
+            : axesScaleRanges[selectedId].yAxis;
+        } else {
+          return prevState;
+        }
+      });
+    });
+  }, [selectedIds, axesScaleRanges]);
+
+  React.useEffect(() => {
+    if (selectedIds.length > 1) {
+      onResetRange('xAxis');
+      onResetRange('yAxis');
+    }
+  }, [selectedIds]);
 
   const xResetBtnDisabled = React.useMemo(
     () => xScaleRange.min === undefined && xScaleRange.max === undefined,
@@ -186,6 +222,7 @@ function AxesPropsPopover({
     () => yScaleRange.min === undefined && yScaleRange.max === undefined,
     [yScaleRange],
   );
+  const isDisabled = selectedIds.length === 0;
   return (
     <ErrorBoundary>
       <div className='AxesPropsPopover'>
@@ -195,11 +232,12 @@ function AxesPropsPopover({
           </Text>
           <SelectDropdown
             selectOptions={alignmentOptions}
-            selected={selected}
             handleSelect={handleAlignmentChange}
             ListboxProps={{
               style: { height: DROPDOWN_LIST_HEIGHT, padding: 0 },
             }}
+            disabled={isDisabled}
+            selected={selected}
           />
         </div>
         <Divider className='AxesPropsPopover__divider' />
@@ -227,6 +265,7 @@ function AxesPropsPopover({
               onChange={onScaleRangeChange}
               validationPatterns={validationPatterns.min(xScaleRange.max)}
               isValid={isXScaleRangeValid.min}
+              disabled={isDisabled}
             />
             <InputWrapper
               id='xAxis-max'
@@ -244,6 +283,7 @@ function AxesPropsPopover({
               onChange={onScaleRangeChange}
               validationPatterns={validationPatterns.max(xScaleRange.min)}
               isValid={isXScaleRangeValid.max}
+              disabled={isDisabled}
             />
             <Button
               disabled={xResetBtnDisabled}
@@ -274,6 +314,7 @@ function AxesPropsPopover({
               onChange={onScaleRangeChange}
               validationPatterns={validationPatterns.min(yScaleRange.max)}
               isValid={isYScaleRangeValid.min}
+              disabled={isDisabled}
             />
             <InputWrapper
               id='yAxis-max'
@@ -291,6 +332,7 @@ function AxesPropsPopover({
               onChange={onScaleRangeChange}
               validationPatterns={validationPatterns.max(yScaleRange.min)}
               isValid={isYScaleRangeValid.max}
+              disabled={isDisabled}
             />
             <Button
               disabled={yResetBtnDisabled}

diff --git a/src/src/components/ChartPanel/ChartPanel.tsx b/src/src/components/ChartPanel/ChartPanel.tsx
@@ -205,7 +205,7 @@ const ChartPanel = React.forwardRef(function ChartPanel(
                         tooltipContent={props?.tooltip?.content || {}}
                         tooltipAppearance={props?.tooltip?.appearance}
                         focusedState={props.focusedState}
-                        alignmentConfig={props.alignmentConfig}
+                        alignmentConfig={props.alignmentConfigs![0]}
                         selectOptions={props.selectOptions}
                         onChangeTooltip={props.onChangeTooltip}
                       />

diff --git a/src/src/components/MultipleAxesPropsPopover/MultipleAxesPropsPopover.d.ts b/src/src/components/MultipleAxesPropsPopover/MultipleAxesPropsPopover.d.ts
@@ -0,0 +1,5 @@
+import { IBaseAxesPopoverProps } from '../AxesPropsPopover';
+
+export interface IMultipleAxesPropsPopoverProps extends IBaseAxesPopoverProps {
+  idsOptions: any[];
+}
diff --git a/src/src/components/MultipleAxesPropsPopover/MultipleAxesPropsPopover.scss b/src/src/components/MultipleAxesPropsPopover/MultipleAxesPropsPopover.scss
@@ -0,0 +1,25 @@
+@use 'src/styles/abstracts' as *;
+.MultipleAxesPropsPopover {
+    width: 24.375rem;
+    padding: $space-xs;
+    padding-bottom: 0px;
+    &__divider {
+      border-bottom: 1px solid;
+      color: #00000042;
+      margin: $space-xs 0;
+    }
+}
+
+.react-select__menu-list {
+    max-height: 200px;
+    overflow-y: auto; 
+  }
+
+  .react-select__value-container {
+    max-height: 100px;
+    overflow-y: auto !important;
+  }
+  .react-select__indicators {
+    max-height: 100px;
+    overflow-y: auto;
+  }
diff --git a/src/src/components/MultipleAxesPropsPopover/MultipleAxesPropsPopover.tsx b/src/src/components/MultipleAxesPropsPopover/MultipleAxesPropsPopover.tsx
@@ -0,0 +1,91 @@
+import React, { useCallback, useState } from 'react';
+import _ from 'lodash-es';
+import Select from 'react-select';
+
+import { Divider } from '@material-ui/core';
+
+import AlignmentPopover from 'components/AxesPropsPopover/AxesPropsPopover';
+import { Text, SelectDropdown } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import { IMultipleAxesPropsPopoverProps } from './';
+
+import './MultipleAxesPropsPopover.scss';
+
+function MultipleAxesPropsPopover({
+  idsOptions,
+  onAlignmentTypeChange,
+  onAlignmentMetricChange,
+  onAxesScaleRangeChange,
+  alignmentConfigs,
+  selectFormOptions,
+  axesScaleRanges,
+}: IMultipleAxesPropsPopoverProps): React.FunctionComponentElement<React.ReactNode> {
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+
+  const options = idsOptions.map((option: { value: any; label: any }) => ({
+    value: option.value,
+    label: option.label,
+  }));
+
+  const selectAllOption = { value: '*', label: 'Select All' };
+
+  const handleChange = useCallback(
+    (selectedOptions) => {
+      if (
+        selectedOptions.some(
+          (option: { value: string }) => option.value === '*',
+        )
+      ) {
+        if (selectedIds.length === idsOptions.length) {
+          setSelectedIds([]);
+        } else {
+          setSelectedIds(
+            idsOptions.map((option: { value: any }) => option.value),
+          );
+        }
+      } else {
+        setSelectedIds(
+          selectedOptions.map((option: { value: any }) => option.value),
+        );
+      }
+    },
+    [idsOptions, selectedIds],
+  );
+
+  const selectedOptions = options.filter((option: { value: number }) =>
+    selectedIds.includes(option.value),
+  );
+
+  return (
+    <ErrorBoundary>
+      <div className='MultipleAxesPropsPopover'>
+        <Text component='p' tint={50}>
+          CHART ID:
+        </Text>
+        <Select
+          isMulti
+          value={selectedOptions}
+          options={[selectAllOption, ...options]}
+          onChange={handleChange}
+          classNamePrefix='react-select'
+          closeMenuOnSelect={false}
+          hideSelectedOptions={false}
+          className='react-select-container'
+        />
+        <Divider className='MultipleAxesPropsPopover__divider' />
+      </div>
+      <AlignmentPopover
+        selectedIds={selectedIds}
+        selectFormOptions={selectFormOptions}
+        alignmentConfigs={alignmentConfigs}
+        axesScaleRanges={axesScaleRanges}
+        onAlignmentMetricChange={onAlignmentMetricChange}
+        onAlignmentTypeChange={onAlignmentTypeChange}
+        onAxesScaleRangeChange={onAxesScaleRangeChange}
+      />
+    </ErrorBoundary>
+  );
+}
+
+export default React.memo(MultipleAxesPropsPopover);
diff --git a/src/src/components/MultipleAxesPropsPopover/index.ts b/src/src/components/MultipleAxesPropsPopover/index.ts
@@ -0,0 +1,5 @@
+import MultipleAxesPropsPopover from './MultipleAxesPropsPopover';
+
+export * from './MultipleAxesPropsPopover.d';
+
+export default MultipleAxesPropsPopover;
diff --git a/src/src/config/controls/controlsDefaultConfig.ts b/src/src/config/controls/controlsDefaultConfig.ts
@@ -33,6 +33,12 @@ export const CONTROLS_DEFAULT_CONFIG = {
       yAxis: { min: undefined, max: undefined },
       xAxis: { min: undefined, max: undefined },
     },
+    axesScaleRanges: [
+      {
+        yAxis: { min: undefined, max: undefined },
+        xAxis: { min: undefined, max: undefined },
+      },
+    ],
     alignmentConfig: {
       type: AlignmentOptionsEnum.STEP,
       metric: '',

diff --git a/src/src/modules/BaseExplorer/components/Metrics/hooks/useAlignMetricsData.tsx b/src/src/modules/BaseExplorer/components/Metrics/hooks/useAlignMetricsData.tsx
@@ -24,7 +24,6 @@ function useAlignMetricsData(
   const config: IAxesPropsConfig = engine.useStore(
     vizEngine.controls.axesProperties.stateSelector,
   );
-
   const alignedData = React.useMemo(() => {
     const items = [];
     for (let item of data) {
-Original file line number
+Diff line change
@@ Expand Up @@
     do
       gh api /repos/G-Research/fasttrackml-ui-aim/rulesets/$rule | jq '[{name: .name, target: .target, conditions: .conditions, rules: .rules, bypass_actors: .bypass_actors}]'
     done | jq -s add
-    ```
+    ```