add combineMode

Author: craigrbarnes

packages/core/src/features/filters/types.ts

@@ -122,6 +122,24 @@ export const isFilterSet = (input: any): input is FilterSet => {
   return true;
 };
 
+export function isUnion(value: unknown): value is Union {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as Union).operator === 'or' &&
+    Array.isArray((value as Union).operands)
+  );
+}
+
+export function isIntersection(value: unknown): value is Intersection {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as Intersection).operator === 'and' &&
+    Array.isArray((value as Intersection).operands)
+  );
+}
+
 export interface OperationHandler<T> {
   handleEquals: (op: Equals) => T;
   handleNotEquals: (op: NotEquals) => T;

packages/frontend/src/components/charts/Charts.tsx

@@ -176,7 +176,11 @@ const Charts = ({
         </React.Fragment>
       );
     };
-    const dataKeys = data[field].length > 0 ? Object.keys(data[field][0]) : [];
+    console.log(field, data);
+    const dataKeys =
+      field in data && data?.[field].length > 0
+        ? Object.keys(data[field][0])
+        : [];
 
     const chartTitle = charts[field].title ?? fieldNameToTitle(field);
 

packages/frontend/src/components/facets/FacetEnumList.tsx

@@ -5,7 +5,8 @@ import {
   LoadingOverlay,
   SegmentedControl,
   TextInput,
-  Tooltip, useMantineTheme,
+  Tooltip,
+  useMantineTheme,
 } from '@mantine/core';
 import { MdClose as CloseIcon } from 'react-icons/md';
 import FacetSortPanel from './FacetSortPanel';
@@ -15,7 +16,7 @@ import FacetExpander from './FacetExpander';
 import { EnumFacetChart } from '../charts';
 import React, { useEffect, useRef, useState } from 'react';
 import { EnumFacetHooks } from './EnumFacet';
-import { SortType } from './types';
+import { SortType, CombineMode } from './types';
 import { updateFacetEnum } from './utils';
 import { useDeepCompareCallback, useDeepCompareEffect } from 'use-deep-compare';
 import { Icon } from '@iconify/react';
@@ -80,8 +81,10 @@ const FacetEnumList: React.FC<FacetEnumListProps> = ({
   const searchInputRef = useRef<HTMLInputElement>(null);
   const settingRef = useRef<HTMLDivElement>(null);
   const [searchTerm, setSearchTerm] = useState('');
-  const [combineMode, setCombineMode] = useState<'or' | 'and'>('and');
-  const { data, enumFilters, isSuccess, error } = hooks.useGetFacetData(field);
+  // const [combineMode, setCombineMode] = useState<'or' | 'and'>('or');
+
+  const { data, enumFilters, combineMode, isSuccess, error } =
+    hooks.useGetFacetData(field);
   const [selectedEnums, setSelectedEnums] = useState(enumFilters ?? []);
   const totalCount = hooks?.useTotalCounts ? hooks.useTotalCounts() : 1;
   const clearFilters = hooks.useClearFilter();
@@ -126,13 +129,36 @@ const FacetEnumList: React.FC<FacetEnumListProps> = ({
     });
     if (checked) {
       const updated = selectedEnums ? [...selectedEnums, value] : [value];
-      updateFacetEnum(field, updated, updateFacetFilters, clearFilters);
+      updateFacetEnum(
+        field,
+        updated,
+        updateFacetFilters,
+        clearFilters,
+        combineMode,
+      );
     } else {
       const updated = selectedEnums?.filter((x) => x != value);
-      updateFacetEnum(field, updated ?? [], updateFacetFilters, clearFilters);
+      updateFacetEnum(
+        field,
+        updated ?? [],
+        updateFacetFilters,
+        clearFilters,
+        combineMode,
+      );
     }
   };
 
+  const handleCombineModeChange = (mode: CombineMode) => {
+    updateFacetEnum(
+      field,
+      selectedEnums ?? [],
+      updateFacetFilters,
+      clearFilters,
+      mode,
+    );
+    console.log('set mode', mode);
+  };
+
   const [facetChartData, setFacetChartData] = useState<{
     filteredData: [string | number, number][];
     filteredDataObj: Record<string | number, number>;
@@ -309,29 +335,29 @@ const FacetEnumList: React.FC<FacetEnumListProps> = ({
           {isSettings && (
             <div className="flex w-full justify-center">
               <div className="flex items-center space-x-1 mt-1">
-              <SegmentedControl
-                classNames = {{
-                  root: 'border-1 border-accent rounded-l-md rounded-r-md',
-                  control: 'p-0 m-0',
-                  indicator: 'bg-accent text-accent-contrast'
-                }}
-                ref={settingRef}
-                value={combineMode}
-                onChange={(value: string) =>
-                  setCombineMode(value as 'and' | 'or')
-                }
-                data={[
-                  { label: 'AND', value: 'and' },
-                  { label: 'OR', value: 'or' },
-                ]}
-              />
-                <Tooltip label="Combine filters with AND or OR">
-                <Icon
-                  icon="gen3:info"
-                  height={12}
-                  width={12}
-                  color={theme.colors.accent[4]}
+                <SegmentedControl
+                  classNames={{
+                    root: 'border-1 border-accent rounded-l-md rounded-r-md',
+                    control: 'p-0 m-0',
+                    indicator: 'bg-accent text-accent-contrast',
+                  }}
+                  ref={settingRef}
+                  value={combineMode}
+                  onChange={(value: string) =>
+                    handleCombineModeChange(value as 'and' | 'or')
+                  }
+                  data={[
+                    { label: 'AND', value: 'and' },
+                    { label: 'OR', value: 'or' },
+                  ]}
                 />
+                <Tooltip label="Combine filters with AND or OR">
+                  <Icon
+                    icon="gen3:info"
+                    height={12}
+                    width={12}
+                    color={theme.colors.accent[4]}
+                  />
                 </Tooltip>
               </div>
             </div>

packages/frontend/src/components/facets/hooks.ts

@@ -22,25 +22,25 @@ export const useClearFilters = (index: string) => {
 
 /**
  * Selector for the facet values (if any) from the current cohort
+ * @param index - index of filter
  * @param field - field name to find filter for
  * @return Value of Filters or undefined
  */
 export const useExtractEnumFilterValues = (
   index: string,
   field: string,
 ): EnumFilterValue => {
-  const filter = useCoreSelector((state : CoreState) =>
+  const filter = useCoreSelector((state: CoreState) =>
     selectIndexedFilterByName(state, index, field),
   );
-  return filter ? extractEnumFilterValue(filter) :  [];
+  return filter ? extractEnumFilterValue(filter) : [];
 };
 
-
 export const useExtractRangeFilterValues = (
   index: string,
   field: string,
 ): FromToRange<string | number> | undefined => {
-  const filter  = useCoreSelector((state : CoreState) =>
+  const filter = useCoreSelector((state: CoreState) =>
     selectIndexedFilterByName(state, index, field),
   );
   return filter ? extractRangeValues(filter) : undefined;

packages/frontend/src/components/facets/types.ts

@@ -37,6 +37,8 @@ export type FacetType =
   | 'datetime'
   | 'toggle';
 
+export type CombineMode = 'and' | 'or';
+
 // required functions
 export type ClearFacetFunction = (field: string) => void;
 export type ClearIndexedFacetFunction = (index: string, field: string) => void;
@@ -83,6 +85,7 @@ export interface FacetResponse {
 
 export interface EnumFacetResponse extends FacetResponse {
   readonly enumFilters?: EnumFilterValue;
+  readonly combineMode?: CombineMode;
 }
 
 export function isEnumFacetResponse(

packages/frontend/src/components/facets/utils.ts

@@ -5,6 +5,7 @@ import {
   HistogramDataArray,
   Includes,
   Operation,
+  isUnion,
   selectIndexedFilterByName,
   isOperationWithField,
   updateCohortFilter,
@@ -19,6 +20,7 @@ import {
   FromToRange,
   UpdateFacetFilterFunction,
   FieldToName,
+  CombineMode,
 } from './types';
 import { isArray } from 'lodash';
 import { TabConfig } from '../../features/CohortBuilder/types';
@@ -31,6 +33,7 @@ export const getAllFieldsFromFilterConfigs = (
 interface ExplorerResultsData {
   [key: string]: Record<string, any>;
 }
+
 export const processBucketData = (
   data?: HistogramDataArray,
 ): Record<string, number> => {
@@ -74,15 +77,30 @@ export const updateFacetEnum = (
   values: EnumFilterValue,
   updateFacetFilters: UpdateFacetFilterFunction,
   clearFilters: ClearFacetFunction,
+  combineMode: CombineMode = 'or',
 ): void => {
   if (values === undefined) return;
   if (values.length > 0) {
     // TODO: Assuming Includes by default but this might change to Include|Excludes
-    updateFacetFilters(fieldName, {
-      operator: 'in',
-      field: fieldName,
-      operands: values,
-    } as Includes);
+    updateFacetFilters(
+      fieldName,
+      combineMode === 'and'
+        ? {
+            operator: 'and',
+            operands: [
+              {
+                operator: 'in',
+                field: fieldName,
+                operands: values,
+              } as Includes,
+            ],
+          }
+        : ({
+            operator: 'in',
+            field: fieldName,
+            operands: values,
+          } as Includes),
+    );
   }
   // no values remove the filter
   else {
@@ -173,6 +191,7 @@ export const useUpdateFilters = (index: string) => {
   // update the filter for this facet
 
   return (field: string, filter: Operation) => {
+    console.log('useUpdateFilters', index, filter);
     dispatch(
       updateCohortFilter({
         index: index,
@@ -230,3 +249,33 @@ export const extractRangeValues = <T extends string | number>(
 export const convertToStringArray = (
   inputArray: (string | number)[],
 ): string[] => inputArray.map(String);
+
+/**
+ * This function creates a new operation by combining the provided filter
+ * with an 'and' logical operator. The resulting operation contains the filter
+ * as its sole operand initially.
+ *
+ * @param {Operation} filter - The operation to be added as the first operand.
+ * @returns {Operation} A new operation object with an 'and' operator and the given filter as its operand.
+ */
+export const addUnion = (filter: Operation): Operation => {
+  return {
+    operator: 'and',
+    operands: [filter],
+  };
+};
+
+/**
+ * Removes a union operation and returns the sole operand if the union
+ * operation contains only one operand. If the union operation has multiple
+ * operands or if the input is not a union, returns undefined.
+ *
+ * @param {Operation} filter - The operation to evaluate and possibly modify, expected to be a union.
+ * @returns {Operation | undefined} The sole operand of the union if it contains only one, or undefined otherwise.
+ */
+export const removeUnion = (filter: Operation): Operation | undefined => {
+  if (isUnion(filter) && filter.operands.length === 1) {
+    return filter.operands[0];
+  }
+  return undefined;
+};

packages/frontend/src/features/CohortBuilder/CohortPanel.tsx

@@ -6,6 +6,7 @@ import {
   extractEnumFilterValue,
   type FacetDefinition,
   FacetType,
+  isUnion,
   selectIndexFilters,
   useCoreSelector,
   useGetAggsQuery,
@@ -22,11 +23,12 @@ import {
   getAllFieldsFromFilterConfigs,
   processBucketData,
   processRangeData,
+  removeUnion,
   useGetFacetFilters,
   useUpdateFilters,
 } from '../../components/facets/utils';
 import { useClearFilters } from '../../components/facets/hooks';
-import { FacetDataHooks } from '../../components/facets/types';
+import { CombineMode, FacetDataHooks } from '../../components/facets/types';
 import CohortManager from './CohortManager';
 import { Charts } from '../../components/charts';
 import ExplorerTable from './ExplorerTable/ExplorerTable';
@@ -102,12 +104,24 @@ export const CohortPanel = ({
 
   const getEnumFacetData = useDeepCompareCallback(
     (field: string) => {
+      let filters = undefined;
+      let combineMode: CombineMode = 'or';
+      if (field in cohortFilters.root) {
+        if (isUnion(cohortFilters.root[field])) {
+          const unionFilters = removeUnion(cohortFilters.root[field]);
+          if (unionFilters) {
+            filters = extractEnumFilterValue(unionFilters);
+            combineMode = 'and';
+          }
+        } else {
+          filters = extractEnumFilterValue(cohortFilters.root[field]);
+        }
+      }
+
       return {
         data: processBucketData(data?.[field]),
-        enumFilters:
-          field in cohortFilters.root
-            ? extractEnumFilterValue(cohortFilters.root[field])
-            : undefined,
+        enumFilters: filters,
+        combineMode: combineMode,
         isSuccess: isSuccess,
       };
     },