Chore refactor grouping option

apps/test-app/src/index.tsx

@@ -26,14 +26,22 @@ export function App() {
           console.log(a);
           return {
             allGroupingOptions: [
-              { groupingKey: 'RFOC', dimension: ['Daily', 'Weekly', 'Monthly'], type: ['Forecast', 'Planned'] },
-              { groupingKey: 'RFCC', dimension: ['Daily', 'Weekly', 'Monthly'], type: ['Forecast', 'Planned'] },
+              {
+                groupingKey: 'RFOC',
+                timeInterval: ['Daily', 'Weekly', 'Monthly'],
+                dateVariant: ['Forecast', 'Planned'],
+              },
+              {
+                groupingKey: 'RFCC',
+                timeInterval: ['Daily', 'Weekly', 'Monthly'],
+                dateVariant: ['Forecast', 'Planned'],
+              },
               {
                 groupingKey: 'Some very long keys',
-                dimension: ['Daily', 'Weekly'],
-                type: ['Forecast', 'Planned', 'Done'],
+                timeInterval: ['Daily', 'Weekly'],
+                dateVariant: ['Forecast', 'Planned', 'Done'],
               },
-              { groupingKey: 'System', dimension: null, type: null },
+              { groupingKey: 'System', timeInterval: null, dateVariant: null },
             ] as GroupingOption[],
             columnCount: 2,
             columnStart: 0,
@@ -64,8 +72,8 @@ export function App() {
           throw new Error('');
         },
         initialGrouping: ['RFOC'],
-        initialMode: 'Planned',
-        initialDimension: 'Weekly',
+        initialDateVariant: 'Planned',
+        initialTimeInterval: 'Weekly',
       }}
       filterOptions={{
         dataSource: {

packages/garden/src/lib/components/Garden.tsx

@@ -25,8 +25,8 @@ import { GardenContextProvider } from '../context/gardenContext';
 
 export type GardenMetaRequest = {
   groupingKeys: string[];
-  dimension?: string | null;
-  type?: string | null;
+  timeInterval?: string | null;
+  dateVariant?: string | null;
 };
 
 export type GardenDataSource<TContext> = {
@@ -45,8 +45,8 @@ interface GardenProps<TData extends Record<PropertyKey, unknown>, TContext = und
   customViews?: CustomVirtualViews<TData>;
   clickEvents?: OnClickEvents<TData>;
   groupingKeys: string[];
-  dimension: string | null;
-  type: string | null;
+  timeInterval: string | null;
+  dateVariant: string | null;
   selected?: string | null;
 }
 
@@ -59,8 +59,8 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
   getIdentifier,
   groupingKeys,
   customViews,
-  dimension,
-  type,
+  timeInterval,
+  dateVariant,
   visuals,
   clickEvents,
   selected = null,
@@ -72,8 +72,8 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
       <ErrorBoundary FallbackComponent={GardenError}>
         <GardenContextProvider
           getIdentifier={getIdentifier}
-          dimension={dimension}
-          type={type}
+          timeInterval={timeInterval}
+          dateVariant={dateVariant}
           initialGrouping={groupingKeys}
           selected={selected}
         >

packages/garden/src/lib/components/GardenItemContainer/GardenItemContainer.tsx

@@ -86,7 +86,7 @@ export const GardenItemContainer = <TData extends Record<PropertyKey, unknown>,
   const isColumnExpanded = !!expand.expandedColumns.find((s) => s === virtualColumn.index);
 
   const {
-    groupingService: { groupingKeys, dimension, type },
+    groupingService: { groupingKeys, timeInterval, dateVariant },
   } = useGarden();
 
   const queries = useBlockCache<TData[], TContext>({
@@ -110,8 +110,8 @@ export const GardenItemContainer = <TData extends Record<PropertyKey, unknown>,
         {
           columnName: group.columnName,
           groupingKeys: groupingKeys,
-          dimension: dimension,
-          type: type,
+          timeInterval: timeInterval,
+          dateVariant: dateVariant,
           subgroupName: group.name,
         },
         context,

packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx

@@ -18,19 +18,19 @@ export const VirtualContainer = <TContext,>({
 }: VirtualContainerProps<TContext>): JSX.Element | null => {
   const { onClickItem } = useGardenConfig();
   const {
-    groupingService: { groupingKeys, dimension, type },
+    groupingService: { groupingKeys, timeInterval, dateVariant },
   } = useGarden();
 
-  const { data, isFetching } = useQuery(['garden', ...groupingKeys, dimension, type, context], {
+  const { data, isFetching } = useQuery(['garden', ...groupingKeys, timeInterval, dateVariant, context], {
     refetchOnWindowFocus: false,
     suspense: true,
     useErrorBoundary: true,
     keepPreviousData: false,
     queryFn: ({ signal }) =>
       dataSource.getGardenMeta(
         {
-          dimension,
-          type,
+          timeInterval,
+          dateVariant,
           groupingKeys,
         },
         context,

packages/garden/src/lib/context/gardenContext.tsx

@@ -8,8 +8,8 @@ type GardenState = {
 
 type GroupingService = {
   groupingKeys: string[];
-  dimension: string | null;
-  type: string | null;
+  timeInterval: string | null;
+  dateVariant: string | null;
 };
 
 type SelectionService = {
@@ -25,12 +25,12 @@ export const GardenContextProvider = <T,>(
     getIdentifier: GetIdentifier<T>;
     selected: string | null;
     initialGrouping: string[];
-    dimension: string | null;
-    type: string | null;
+    timeInterval: string | null;
+    dateVariant: string | null;
   }>
 ) => {
   const selectionService = useSelectionService(props.getIdentifier, props.selected);
-  const groupingService = useGroupingService(props.initialGrouping, props.dimension, props.type);
+  const groupingService = useGroupingService(props.initialGrouping, props.timeInterval, props.dateVariant);
 
   return (
     <GardenContext.Provider value={{ groupingService, selectionService }}>{props.children}</GardenContext.Provider>
@@ -60,12 +60,12 @@ const useSelectionService = <T,>(getIdentifier: GetIdentifier<T>, initialSelecte
 
 const useGroupingService = (
   initialGrouping: string[],
-  dimension: string | null,
-  type: string | null
+  timeInterval: string | null,
+  dateVariant: string | null
 ): GroupingService => {
   return {
     groupingKeys: initialGrouping,
-    dimension: dimension,
-    type: type,
+    timeInterval: timeInterval,
+    dateVariant: dateVariant,
   };
 };

packages/garden/src/lib/hooks/useBlockCache.ts

@@ -21,13 +21,13 @@ export function useBlockCache<T, TContext = undefined>({
   hash,
 }: UseBlockCacheArgs<T, TContext>) {
   const {
-    groupingService: { groupingKeys, dimension, type },
+    groupingService: { groupingKeys, timeInterval, dateVariant },
   } = useGarden();
 
   const blockCache = useQueries({
     queries: blocks.map((block) => ({
       /** Unique identifier for blocks, add state here to invalidate query onChange */
-      queryKey: [...groupingKeys, dimension, type, `x${block.x}`, `y${block.y}`, context, ...hash],
+      queryKey: [...groupingKeys, timeInterval, dateVariant, `x${block.x}`, `y${block.y}`, context, ...hash],
       /** Only fetch if block is in view */
       enabled: !!blocksInView.find((s) => s.x === block.x && s.y === block.y),
       /** Annoying default in react-query */
@@ -39,7 +39,7 @@ export function useBlockCache<T, TContext = undefined>({
         const coordinates = getBlockIndexes(block, blockSqrt);
 
         return getBlockAsync(
-          { ...coordinates, groupingKeys: groupingKeys, dimension: dimension, type: type },
+          { ...coordinates, groupingKeys: groupingKeys, timeInterval: timeInterval, dateVariant: dateVariant },
           context,
           signal
         );

packages/garden/src/lib/types/config.ts

@@ -19,8 +19,8 @@ export type GardenConfig<TData extends Record<PropertyKey, unknown>, TContext =
   getDisplayName: GetDisplayName<TData>;
   /** The keys used for grouping when the garden loads initially */
   initialGrouping: string[];
-  initialDimension?: string | null;
-  initialMode?: string | null;
+  initialTimeInterval?: string | null;
+  initialDateVariant?: string | null;
   /** The available keys to be used for grouping */
   // fieldSettings?: FieldSettings<TData, TExtendedFields, TCustomGroupByKeys>;
   /** Supply functions for handling clicks in the garden */

packages/garden/src/lib/types/index.ts

@@ -19,7 +19,7 @@ export type GardenMeta = {
 
 export type GetHeaderBlockRequestArgs = Pick<
   GetBlockRequestArgs,
-  'columnStart' | 'columnEnd' | 'groupingKeys' | 'dimension' | 'type'
+  'columnStart' | 'columnEnd' | 'groupingKeys' | 'timeInterval' | 'dateVariant'
 >;
 
 export type GetBlockRequestArgs = {
@@ -34,17 +34,17 @@ export type GetBlockRequestArgs = {
   /** Grouping key */
   groupingKeys: string[];
 
-  dimension: string | null;
+  timeInterval: string | null;
 
-  type: string | null;
+  dateVariant: string | null;
 };
 
 export type GetSubgroupItemsArgs = {
   groupingKeys: string[];
   columnName: string;
   subgroupName: string;
-  dimension: string | null;
-  type: string | null;
+  timeInterval: string | null;
+  dateVariant: string | null;
 };
 
 export type GardenHeaderGroup = {
@@ -54,6 +54,6 @@ export type GardenHeaderGroup = {
 
 export type GroupingOption = {
   groupingKey: string;
-  dimension: string[] | null;
-  type: string[] | null;
+  timeInterval: string[] | null;
+  dateVariant: string[] | null;
 };

packages/workspace-fusion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "4.0.4",
+  "version": "5.0.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx

@@ -11,10 +11,10 @@ type GroupingSelectorProps = {
   context: FilterState;
   setGroupingKeys: (keys: string[]) => void;
   groupingKeys: string[];
-  dimension: string | null;
-  type: string | null;
-  onChangeDimension: (dimension: string | null) => void;
-  onChangeMode: (type: string | null) => void;
+  timeInterval: string | null;
+  dateVariant: string | null;
+  onChangeTimeInterval: (timeInterval: string | null) => void;
+  onChangeDateVarient: (dateVariant: string | null) => void;
   popoverRef: React.MutableRefObject<HTMLDivElement | null>;
   iconRef: React.MutableRefObject<HTMLDivElement | null>;
   close: VoidFunction;
@@ -23,23 +23,23 @@ type GroupingSelectorProps = {
 export function GroupingSelector({
   dataSource,
   context,
-  dimension,
-  type,
+  timeInterval,
+  dateVariant,
   setGroupingKeys,
-  onChangeDimension,
-  onChangeMode,
+  onChangeTimeInterval,
+  onChangeDateVarient,
   groupingKeys,
   iconRef,
   popoverRef,
   close,
 }: GroupingSelectorProps): JSX.Element | null {
-  const { data } = useQuery(['garden', ...groupingKeys, dimension, type, context], {
+  const { data } = useQuery(['garden', ...groupingKeys, timeInterval, dateVariant, context], {
     refetchOnWindowFocus: false,
     suspense: true,
     useErrorBoundary: true,
     keepPreviousData: false,
     queryFn: ({ signal }) =>
-      dataSource.getGardenMeta({ groupingKeys, dimension, type }, context, signal ?? new AbortSignal()),
+      dataSource.getGardenMeta({ groupingKeys, timeInterval, dateVariant }, context, signal ?? new AbortSignal()),
   });
 
   const selectorRef = useRef(null);
@@ -58,12 +58,12 @@ export function GroupingSelector({
       throw new Error('Invalid grouping option');
     }
 
-    if (!foundGroupingOption?.dimension?.includes(dimension ?? '')) {
-      onChangeDimension(foundGroupingOption.dimension?.at(0) ?? null);
+    if (!foundGroupingOption?.timeInterval?.includes(timeInterval ?? '')) {
+      onChangeTimeInterval(foundGroupingOption.timeInterval?.at(0) ?? null);
     }
 
-    if (!foundGroupingOption?.type?.includes(type ?? '')) {
-      onChangeMode(foundGroupingOption.type?.at(0) ?? null);
+    if (!foundGroupingOption?.dateVariant?.includes(dateVariant ?? '')) {
+      onChangeDateVarient(foundGroupingOption.dateVariant?.at(0) ?? null);
     }
 
     setGroupingKeys([key]);
@@ -104,28 +104,28 @@ export function GroupingSelector({
           groupingOption.groupingKey === groupingKeys[0] && (
             <RadioWrapper>
               <RadioCategoryWrapper>
-                {groupingOption.dimension &&
-                  groupingOption.dimension.map((dim) => (
+                {groupingOption.timeInterval &&
+                  groupingOption.timeInterval.map((dim) => (
                     <Radio
                       key={dim}
                       label={dim}
                       value={dim}
-                      name="Dimension"
-                      checked={dimension?.trim().toLowerCase() === dim.trim().toLowerCase()}
-                      onChange={(e) => onChangeDimension(e.target.value)}
+                      name="timeInterval"
+                      checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
+                      onChange={(e) => onChangeTimeInterval(e.target.value)}
                     />
                   ))}
               </RadioCategoryWrapper>
               <RadioCategoryWrapper>
-                {groupingOption.type &&
-                  groupingOption.type.map((typ) => (
+                {groupingOption.dateVariant &&
+                  groupingOption.dateVariant.map((typ) => (
                     <Radio
                       key={typ}
                       label={typ}
                       value={typ}
-                      name="type"
-                      checked={type?.trim().toLowerCase() === typ.trim().toLowerCase()}
-                      onChange={(e) => onChangeMode(e.target.value)}
+                      name="dateVariant"
+                      checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
+                      onChange={(e) => onChangeDateVarient(e.target.value)}
                     />
                   ))}
               </RadioCategoryWrapper>

packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx

@@ -21,14 +21,14 @@ type GardenPopoverItemProps = {
   filterState: FilterState;
   config: GardenConfig<any, FilterState>;
   setGroupingKeys: (keys: string[]) => void;
-  onChangeDimension: (dimension: string | null) => void;
-  onChangeMode: (mode: string | null) => void;
+  onChangeTimeInterval: (timeInterval: string | null) => void;
+  onChangeDateVariant: (dateVariant: string | null) => void;
 };
 export const GardenPopoverItem = ({
   anchor,
   groupingKeys$,
-  onChangeDimension,
-  onChangeMode,
+  onChangeTimeInterval,
+  onChangeDateVariant,
   setGroupingKeys,
   config,
   filterState,
@@ -73,10 +73,10 @@ export const GardenPopoverItem = ({
                 popoverRef={popoverRef}
                 groupingKeys={groupState.groupingKeys}
                 setGroupingKeys={setGroupingKeys}
-                dimension={groupState.dimension}
-                onChangeDimension={onChangeDimension}
-                type={groupState.type}
-                onChangeMode={onChangeMode}
+                timeInterval={groupState.timeInterval}
+                onChangeTimeInterval={onChangeTimeInterval}
+                dateVariant={groupState.dateVariant}
+                onChangeDateVarient={onChangeDateVariant}
                 context={filterState}
                 dataSource={config}
               />