diff --git a/apps/test-app/src/index.tsx b/apps/test-app/src/index.tsx index e7e529b46..69b1d05bf 100644 --- a/apps/test-app/src/index.tsx +++ b/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: { diff --git a/packages/garden/src/lib/components/Garden.tsx b/packages/garden/src/lib/components/Garden.tsx index d4b29eba8..7031e076d 100644 --- a/packages/garden/src/lib/components/Garden.tsx +++ b/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 = { @@ -45,8 +45,8 @@ interface GardenProps, TContext = und customViews?: CustomVirtualViews; clickEvents?: OnClickEvents; groupingKeys: string[]; - dimension: string | null; - type: string | null; + timeInterval: string | null; + dateVariant: string | null; selected?: string | null; } @@ -59,8 +59,8 @@ export function Garden, TContext = un getIdentifier, groupingKeys, customViews, - dimension, - type, + timeInterval, + dateVariant, visuals, clickEvents, selected = null, @@ -72,8 +72,8 @@ export function Garden, TContext = un diff --git a/packages/garden/src/lib/components/GardenItemContainer/GardenItemContainer.tsx b/packages/garden/src/lib/components/GardenItemContainer/GardenItemContainer.tsx index 17e22bebc..13f246ead 100644 --- a/packages/garden/src/lib/components/GardenItemContainer/GardenItemContainer.tsx +++ b/packages/garden/src/lib/components/GardenItemContainer/GardenItemContainer.tsx @@ -86,7 +86,7 @@ export const GardenItemContainer = , const isColumnExpanded = !!expand.expandedColumns.find((s) => s === virtualColumn.index); const { - groupingService: { groupingKeys, dimension, type }, + groupingService: { groupingKeys, timeInterval, dateVariant }, } = useGarden(); const queries = useBlockCache({ @@ -110,8 +110,8 @@ export const GardenItemContainer = , { columnName: group.columnName, groupingKeys: groupingKeys, - dimension: dimension, - type: type, + timeInterval: timeInterval, + dateVariant: dateVariant, subgroupName: group.name, }, context, diff --git a/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx b/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx index 191277a4b..85b726411 100644 --- a/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx +++ b/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx @@ -18,10 +18,10 @@ export const VirtualContainer = ({ }: VirtualContainerProps): 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, @@ -29,8 +29,8 @@ export const VirtualContainer = ({ queryFn: ({ signal }) => dataSource.getGardenMeta( { - dimension, - type, + timeInterval, + dateVariant, groupingKeys, }, context, diff --git a/packages/garden/src/lib/context/gardenContext.tsx b/packages/garden/src/lib/context/gardenContext.tsx index db1ab479f..3441ccf62 100644 --- a/packages/garden/src/lib/context/gardenContext.tsx +++ b/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 = ( getIdentifier: GetIdentifier; 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 ( {props.children} @@ -60,12 +60,12 @@ const useSelectionService = (getIdentifier: GetIdentifier, 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, }; }; diff --git a/packages/garden/src/lib/hooks/useBlockCache.ts b/packages/garden/src/lib/hooks/useBlockCache.ts index f3961f4b5..1e377b429 100644 --- a/packages/garden/src/lib/hooks/useBlockCache.ts +++ b/packages/garden/src/lib/hooks/useBlockCache.ts @@ -21,13 +21,13 @@ export function useBlockCache({ hash, }: UseBlockCacheArgs) { 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({ const coordinates = getBlockIndexes(block, blockSqrt); return getBlockAsync( - { ...coordinates, groupingKeys: groupingKeys, dimension: dimension, type: type }, + { ...coordinates, groupingKeys: groupingKeys, timeInterval: timeInterval, dateVariant: dateVariant }, context, signal ); diff --git a/packages/garden/src/lib/types/config.ts b/packages/garden/src/lib/types/config.ts index 24215a371..05e53afb0 100644 --- a/packages/garden/src/lib/types/config.ts +++ b/packages/garden/src/lib/types/config.ts @@ -19,8 +19,8 @@ export type GardenConfig, TContext = getDisplayName: GetDisplayName; /** 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; /** Supply functions for handling clicks in the garden */ diff --git a/packages/garden/src/lib/types/index.ts b/packages/garden/src/lib/types/index.ts index 384424596..5e5b966d6 100644 --- a/packages/garden/src/lib/types/index.ts +++ b/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; }; diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json index 4701af989..e702f03b6 100644 --- a/packages/workspace-fusion/package.json +++ b/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", diff --git a/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx b/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx index 6ceca7ac9..bbab6c24b 100644 --- a/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx +++ b/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; iconRef: React.MutableRefObject; 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] && ( - {groupingOption.dimension && - groupingOption.dimension.map((dim) => ( + {groupingOption.timeInterval && + groupingOption.timeInterval.map((dim) => ( onChangeDimension(e.target.value)} + name="timeInterval" + checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()} + onChange={(e) => onChangeTimeInterval(e.target.value)} /> ))} - {groupingOption.type && - groupingOption.type.map((typ) => ( + {groupingOption.dateVariant && + groupingOption.dateVariant.map((typ) => ( onChangeMode(e.target.value)} + name="dateVariant" + checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()} + onChange={(e) => onChangeDateVarient(e.target.value)} /> ))} diff --git a/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx b/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx index 426fb0fe7..300ed6bb0 100644 --- a/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx +++ b/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx @@ -21,14 +21,14 @@ type GardenPopoverItemProps = { filterState: FilterState; config: GardenConfig; 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} /> diff --git a/packages/workspace-fusion/src/modules/garden/components/wrapper/GardenWrapper.tsx b/packages/workspace-fusion/src/modules/garden/components/wrapper/GardenWrapper.tsx index 19bf158de..f40243d6b 100644 --- a/packages/workspace-fusion/src/modules/garden/components/wrapper/GardenWrapper.tsx +++ b/packages/workspace-fusion/src/modules/garden/components/wrapper/GardenWrapper.tsx @@ -24,25 +24,25 @@ export const GardenWrapper = , TFilte const { selectItem } = useWorkspace(); const [groupingKeys, setGroupingKeys] = useState(config.initialGrouping); - const [dimension, updateDim] = useState(config.initialDimension ?? null); - const onChangeDimension = (dim: string | null) => { - updateDim(dim); + const [timeInterval, updateTimeInterval] = useState(config.initialTimeInterval ?? null); + const onChangetimeInterval = (timeInterval: string | null) => { + updateTimeInterval(timeInterval); }; - const [type, updateMode] = useState(config.initialMode ?? null); - const onChangeMode = (mode: string | null) => { - updateMode(mode); + const [dateVariant, updateDateVariant] = useState(config.initialDateVariant ?? null); + const onChangeDateVariant = (dateVariant: string | null) => { + updateDateVariant(dateVariant); }; - const groupingKeys$ = useRef(new BehaviorSubject({ groupingKeys, dimension, type })); + const groupingKeys$ = useRef(new BehaviorSubject({ groupingKeys, timeInterval, dateVariant })); useEffect(() => { /** * You might not need an effect * Yes you do! */ - groupingKeys$.current.next({ groupingKeys, dimension, type }); - }, [groupingKeys, dimension, type]); + groupingKeys$.current.next({ groupingKeys, timeInterval, dateVariant }); + }, [groupingKeys, timeInterval, dateVariant]); const { setIcons } = useWorkspaceHeaderComponents(); useEffect(() => { @@ -54,8 +54,8 @@ export const GardenWrapper = , TFilte anchor={anchor} groupingKeys$={groupingKeys$.current} setGroupingKeys={setGroupingKeys} - onChangeDimension={onChangeDimension} - onChangeMode={onChangeMode} + onChangeTimeInterval={onChangetimeInterval} + onChangeDateVariant={onChangeDateVariant} /> ), name: 'garden-grouping', @@ -85,8 +85,8 @@ export const GardenWrapper = , TFilte selected={selection?.id} getIdentifier={getIdentifier} groupingKeys={groupingKeys} - dimension={dimension} - type={type} + timeInterval={timeInterval} + dateVariant={dateVariant} getDisplayName={config.getDisplayName} clickEvents={{ onClickItem: (i) => {