Add Metrics filtering for Conditional Grouping (G-Research#86)

* Add conditionalGroupingOptions prop * Add metrics support to ChartPopover (Metrics app) * Add condtionalGroupingOptions state * Add TODO for Params and Scatters * Fix context conditional grouping and repeated metrics --------- Co-authored-by: fabiovincenzi <[email protected]>
vinayan3 · Aug 28, 2024 · 3e95d30 · 3e95d30
1 parent b027eb5
commit 3e95d30
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 8 deletions.
diff --git a/src/src/components/Grouping/Grouping.tsx b/src/src/components/Grouping/Grouping.tsx
@@ -16,6 +16,7 @@ import './Grouping.scss';
 function Grouping({
   groupingData,
   groupingSelectOptions,
+  conditionalGroupingOptions,
   onGroupingSelectChange,
   onGroupingModeChange,
   onGroupingPaletteChange,
@@ -46,6 +47,7 @@ function Grouping({
                   groupName={groupName as GroupNameEnum}
                   groupingData={groupingData}
                   groupingSelectOptions={groupingSelectOptions}
+                  conditionalGroupingOptions={conditionalGroupingOptions}
                   onSelect={onGroupingSelectChange}
                   onGroupingModeChange={onGroupingModeChange}
                   isDisabled={isDisabled}
@@ -65,6 +67,7 @@ function Grouping({
                           paletteIndex: groupingData?.paletteIndex,
                         })}
                         groupingSelectOptions={groupingSelectOptions}
+                        conditionalGroupingOptions={conditionalGroupingOptions}
                         onSelect={onGroupingSelectChange}
                         onGroupingConditionsChange={onGroupingConditionsChange}
                       />

diff --git a/src/src/components/GroupingItem/GroupingItem.tsx b/src/src/components/GroupingItem/GroupingItem.tsx
@@ -31,6 +31,7 @@ function GroupingItem({
   onSelect,
   onGroupingModeChange,
   groupingSelectOptions,
+  conditionalGroupingOptions,
   isDisabled,
 }: IGroupingItemProps): React.FunctionComponentElement<React.ReactNode> {
   return (
@@ -70,6 +71,7 @@ function GroupingItem({
             inputLabel={inputLabel}
             groupingData={groupingData}
             groupingSelectOptions={groupingSelectOptions}
+            conditionalGroupingOptions={conditionalGroupingOptions}
             advancedComponent={advancedComponent}
             onSelect={onSelect}
             onGroupingModeChange={onGroupingModeChange}

diff --git a/src/src/pages/Metrics/Metrics.tsx b/src/src/pages/Metrics/Metrics.tsx
@@ -133,6 +133,7 @@ function Metrics(
                 isDisabled={isProgressBarVisible}
                 groupingData={props.groupingData}
                 groupingSelectOptions={props.groupingSelectOptions}
+                conditionalGroupingOptions={props.conditionalGroupingOptions}
                 onGroupingSelectChange={props.onGroupingSelectChange}
                 onGroupingModeChange={props.onGroupingModeChange}
                 onGroupingPaletteChange={props.onGroupingPaletteChange}

diff --git a/src/src/pages/Metrics/MetricsContainer.tsx b/src/src/pages/Metrics/MetricsContainer.tsx
@@ -165,6 +165,7 @@ function MetricsContainer(): React.FunctionComponentElement<React.ReactNode> {
         chartPanelOffsetHeight={chartPanelOffsetHeight}
         selectedRows={metricsData?.selectedRows!}
         groupingSelectOptions={metricsData?.groupingSelectOptions!}
+        conditionalGroupingOptions={metricsData?.conditionalGroupingOptions!}
         sortOptions={metricsData?.sortOptions!}
         resizeMode={metricsData?.config?.table?.resizeMode!}
         columnsWidths={metricsData?.config?.table?.columnsWidths!}

diff --git a/src/src/pages/Metrics/components/ChartPopover/ChartPopoverAdvanced.scss b/src/src/pages/Metrics/components/ChartPopover/ChartPopoverAdvanced.scss
@@ -14,6 +14,11 @@
   &__conditionalFilter {
     padding: 1rem;
     border-bottom: $border-main;
+
+    &__icon {
+      margin-left: 0.5rem;
+      color: $text-color;
+    }
   }
 
   &__conditionalFilter__p {

diff --git a/src/src/pages/Metrics/components/ChartPopover/ChartPopoverAdvanced.tsx b/src/src/pages/Metrics/components/ChartPopover/ChartPopoverAdvanced.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react';
 
-import { Checkbox, TextField } from '@material-ui/core';
+import { Checkbox, TextField, Tooltip } from '@material-ui/core';
 import {
   CheckBox as CheckBoxIcon,
   CheckBoxOutlineBlank,
@@ -33,7 +33,7 @@ export enum IOperator {
 function ChartPopoverAdvanced({
   onGroupingConditionsChange,
   groupingData,
-  groupingSelectOptions,
+  conditionalGroupingOptions,
 }: IGroupingPopoverAdvancedProps): React.FunctionComponentElement<React.ReactNode> {
   const [inputValue, setInputValue] = useState('');
   const [selectedField, setSelectedField] =
@@ -90,7 +90,7 @@ function ChartPopoverAdvanced({
   };
 
   const options = useMemo(() => {
-    const filteredOptions = groupingSelectOptions?.filter((item) =>
+    const filteredOptions = conditionalGroupingOptions?.filter((item) =>
       item.label.toLowerCase().includes(inputValue.toLowerCase()),
     );
     return (
@@ -100,28 +100,40 @@ function ChartPopoverAdvanced({
           b.label.toLowerCase().indexOf(inputValue.toLowerCase()),
       ) || []
     );
-  }, [groupingSelectOptions, inputValue]);
+  }, [conditionalGroupingOptions, inputValue]);
 
   return (
     <ErrorBoundary>
       <div className='ChartPopoverAdvanced'>
         <div className='ChartPopoverAdvanced__conditionalFilter'>
           <Text component='h3' size={12} tint={50}>
             group by condition
+            <Tooltip
+              title='Conditional filtering for metrics is based on the last value logged.'
+              placement='top'
+            >
+              <div style={{ display: 'inline' }}>
+                <Icon
+                  name='circle-question'
+                  fontSize={14}
+                  className='ChartPopoverAdvanced__conditionalFilter__icon'
+                />
+              </div>
+            </Tooltip>
           </Text>
           <Text
             component='p'
             size={14}
             className='ChartPopoverAdvanced__conditionalFilter__p'
           >
-            Group charts by conditions such as{' '}
+            Group charts by conditions, e.g.{' '}
             <span style={{ fontFamily: 'Courier New' }}>
               run.epochs &gt; 30
             </span>
             .
           </Text>
           <div className='flex fac'>
-            {/* Add textbox to allow grouping by condition */}
+            {/* Textbox for selecting fields */}
             <Autocomplete
               className='ChartPopoverAdvanced__container__select__fieldName'
               openOnFocus
@@ -147,7 +159,7 @@ function ChartPopoverAdvanced({
                   }}
                   className='TextField__OutLined__Small'
                   variant='outlined'
-                  placeholder='Select fields'
+                  placeholder='Select field'
                 />
               )}
               renderTags={() => null} // No tags for single selection
@@ -214,7 +226,7 @@ function ChartPopoverAdvanced({
                 key={index}
                 className='ChartPopoverAdvanced__conditionalFilter__box flex fac fjb'
               >
-                {/* Show condition and button in same line */}
+                {/* Show condition and Remove button in same line */}
                 <Text
                   size={14}
                   className='ChartPopoverAdvanced__conditionalFilter__box__p'

diff --git a/src/src/pages/Params/Params.tsx b/src/src/pages/Params/Params.tsx
@@ -223,6 +223,7 @@ const Params = ({
               isDisabled={isProgressBarVisible}
               groupingData={groupingData}
               groupingSelectOptions={groupingSelectOptions}
+              conditionalGroupingOptions={groupingSelectOptions} // jescalada: TODO: Implement conditional grouping (Params/Scatters)
               onGroupingSelectChange={onGroupingSelectChange}
               onGroupingModeChange={onGroupingModeChange}
               onGroupingPaletteChange={onGroupingPaletteChange}

diff --git a/src/src/pages/Scatters/Scatters.tsx b/src/src/pages/Scatters/Scatters.tsx
@@ -86,6 +86,7 @@ function Scatters(
                 isDisabled={isProgressBarVisible}
                 groupingData={props.groupingData}
                 groupingSelectOptions={props.groupingSelectOptions}
+                conditionalGroupingOptions={props.groupingSelectOptions} // jescalada: TODO: Implement conditional grouping (Params/Scatters)
                 onGroupingSelectChange={props.onGroupingSelectChange}
                 onGroupingModeChange={props.onGroupingModeChange}
                 onGroupingPaletteChange={props.onGroupingPaletteChange}

diff --git a/src/src/services/models/explorer/metricsModelMethods.ts b/src/src/services/models/explorer/metricsModelMethods.ts
@@ -843,6 +843,19 @@ function getMetricsAppModelMethods(
         sequenceName: 'metric',
       }),
     ];
+    // Conditional grouping allows grouping by regular select options and also metrics
+    const conditionalGroupingOptions = groupingSelectOptions.concat(
+      _.uniqBy(
+        data.map((metric) => {
+          return {
+            group: 'metric',
+            label: `metric.${metric?.config?.name}`,
+            value: `${metric?.config?.name}`,
+          };
+        }),
+        'value',
+      ),
+    );
     const sortOptions = [
       ...groupingSelectOptions,
       {
@@ -942,6 +955,7 @@ function getMetricsAppModelMethods(
       tableColumns,
       sameValueColumns: tableData.sameValueColumns,
       groupingSelectOptions,
+      conditionalGroupingOptions,
       sortOptions,
       selectedRows,
     });
@@ -968,6 +982,19 @@ function getMetricsAppModelMethods(
         sequenceName: 'metric',
       }),
     ];
+    // Conditional grouping allows grouping by regular select options and also metrics
+    const conditionalGroupingOptions = groupingSelectOptions.concat(
+      _.uniqBy(
+        data.map((metric) => {
+          return {
+            group: 'metric',
+            label: `metric.${metric?.config?.name}`,
+            value: `${metric?.config?.name}`,
+          };
+        }),
+        'value',
+      ),
+    );
     const sortOptions = [
       ...groupingSelectOptions,
       {
@@ -1058,6 +1085,7 @@ function getMetricsAppModelMethods(
       tableColumns: tableColumns,
       sameValueColumns: tableData.sameValueColumns,
       groupingSelectOptions,
+      conditionalGroupingOptions,
       sortOptions,
       selectedRows,
     });

diff --git a/src/src/types/components/GroupingPopover/GroupingPopover.d.ts b/src/src/types/components/GroupingPopover/GroupingPopover.d.ts
@@ -13,6 +13,7 @@ export interface IGroupingPopoverProps {
   groupingData: IGroupingConfig;
   advancedComponent?: React.FunctionComponentElement<React.ReactNode> | null;
   groupingSelectOptions: IGroupingSelectOption[];
+  conditionalGroupingOptions?: IGroupingSelectOption[];
   onSelect: IMetricProps['onGroupingSelectChange'];
   onGroupingModeChange: IMetricProps['onGroupingModeChange'];
   inputLabel?: string;
@@ -26,6 +27,7 @@ export interface IGroupingPopoverAdvancedProps {
   onGroupingPaletteChange?: IMetricProps['onGroupingPaletteChange'];
   onShuffleChange: IMetricProps['onShuffleChange'];
   groupingSelectOptions?: IGroupingSelectOption[];
+  conditionalGroupingOptions?: IGroupingSelectOption[];
   onSelect?: IMetricProps['onGroupingSelectChange'];
   inputLabel?: string;
   onGroupingConditionsChange?: IMetricProps['onGroupingConditionsChange'];

diff --git a/src/src/types/pages/components/Grouping/Grouping.d.ts b/src/src/types/pages/components/Grouping/Grouping.d.ts
@@ -13,6 +13,7 @@ import { IMetricProps } from 'types/pages/metrics/Metrics';
 export interface IGroupingProps {
   groupingData: IGroupingConfig;
   groupingSelectOptions: IGroupingSelectOption[];
+  conditionalGroupingOptions?: IGroupingSelectOption[];
   onGroupingSelectChange: IMetricProps['onGroupingSelectChange'];
   onGroupingModeChange: IMetricProps['onGroupingModeChange'];
   onGroupingPaletteChange: IMetricProps['onGroupingPaletteChange'];

diff --git a/src/src/types/pages/components/GroupingItem/GroupingItem.d.ts b/src/src/types/pages/components/GroupingItem/GroupingItem.d.ts
@@ -14,6 +14,7 @@ export interface IGroupingItemProps extends IGroupingPopoverProps {
   groupingData: IGroupingConfig;
   advancedComponent?: React.FunctionComponentElement<React.ReactNode>;
   groupingSelectOptions: IGroupingSelectOption[];
+  conditionalGroupingOptions?: IGroupingSelectOption[];
   onReset: () => void;
   onVisibilityChange: () => void;
 }
diff --git a/src/src/types/pages/metrics/Metrics.d.ts b/src/src/types/pages/metrics/Metrics.d.ts
@@ -93,6 +93,7 @@ export interface IMetricProps extends Partial<RouteChildrenProps> {
   unselectedColumnState: UnselectedColumnState;
   sameValueColumns?: string[] | [];
   groupingSelectOptions: IGroupingSelectOption[];
+  conditionalGroupingOptions: IGroupingSelectOption[];
   sortOptions: IGroupingSelectOption[];
   requestStatus: RequestStatusEnum;
   requestProgress: IRequestProgress;

diff --git a/src/src/types/services/models/metrics/metricModel.d.ts b/src/src/types/services/models/metrics/metricModel.d.ts
@@ -18,4 +18,5 @@ export interface IMetric {
   x_axis_iters?: Float64Array;
   x_axis_values?: Float64Array;
   isHidden: boolean;
+  lastValue?: number;
 }
diff --git a/src/src/types/services/models/metrics/metricsAppModel.d.ts b/src/src/types/services/models/metrics/metricsAppModel.d.ts
@@ -56,6 +56,7 @@ export interface IMetricAppModelState {
   params: string[];
   notifyData: INotification[];
   groupingSelectOptions: IGroupingSelectOption[];
+  conditionalGroupingOptions: IGroupingSelectOption[];
   sortOptions: IGroupingSelectOption[];
   selectFormData?: {
     options: ISelectOption[];

diff --git a/src/src/utils/app/generateGroupValues.ts b/src/src/utils/app/generateGroupValues.ts
@@ -45,6 +45,7 @@ export function generateGroupValues(
         name: fieldType === 'metric' ? data[i].name : data[i].run.props.name,
         tags: data[i].run.params.tags,
         experiment: data[i].run.props.experiment?.name,
+        context: data[i].context,
       };
 
       // Get the relevant attribute's value