From befc1f6cda914838ca225209645212121bb78072 Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Mon, 28 Oct 2024 12:58:56 +0100 Subject: [PATCH 1/8] chore: Removed console log --- src/pages/ModelPages/Model/Model.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index 353e5cf..069fd8a 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -23,7 +23,6 @@ export const Model = () => { useEffect(() => { if (data) { setAnalogueModel(data.data); - console.log('setting global state'); } }, [data, setAnalogueModel]); From a4c66fa4ed0f8bd37899dbbb8f50226db32db2f0 Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Mon, 28 Oct 2024 14:23:32 +0100 Subject: [PATCH 2/8] feat: Added empty analogue model state --- src/hooks/GlobalState.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/hooks/GlobalState.tsx b/src/hooks/GlobalState.tsx index a77df77..3f4598d 100644 --- a/src/hooks/GlobalState.tsx +++ b/src/hooks/GlobalState.tsx @@ -31,6 +31,7 @@ type IPepmContext = { }; type IPepmContextActions = { setAnalogueModel: (analogueModel: AnalogueModelDetail) => void; + setAnalogueModelEmpty: () => void; }; export const usePepmContextStore = create()( @@ -40,5 +41,9 @@ export const usePepmContextStore = create()( set((state) => { state.analogueModel = am; }), + setAnalogueModelEmpty: () => + set((state) => { + state.analogueModel = analogueModelEmpty; + }), })), ); From a99995d40183463790b6482deaed36621e12192d Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Mon, 28 Oct 2024 14:24:14 +0100 Subject: [PATCH 3/8] feat: Removed all unnecessary fetch model calls, and removed some prop drills --- .../AreaCoordinates/AreaCoordinates.tsx | 19 +++--- .../CoordinatesDialog/CoordinatesDialog.tsx | 18 ++---- .../CaseGroup/CaseButtons/CaseButtons.tsx | 14 +++-- .../Compute/CaseGroup/CaseRow/CaseRow.tsx | 15 ++--- .../CaseGroup/CaseRow/hooks/useModelArea.tsx | 11 ++-- .../HandleModel/SidePane/SidePane.tsx | 3 + .../ModelFilesView/ModelFilesView.tsx | 14 ++--- .../ModelMetadataView/ModelMetadataView.tsx | 63 +++++++++---------- .../ModelNavigationBar/ModelNavigationBar.tsx | 3 + 9 files changed, 77 insertions(+), 83 deletions(-) diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx index 0c2808f..4074ef7 100644 --- a/src/components/AreaCoordinates/AreaCoordinates.tsx +++ b/src/components/AreaCoordinates/AreaCoordinates.tsx @@ -17,7 +17,6 @@ import { ModelAreaTypeDto, } from '../../api/generated'; import { useFetchCases } from '../../hooks/useFetchCases'; -import { useFetchModel } from '../../hooks/useFetchModel'; import { useFetchModelAreas } from '../../hooks/useFetchModelAreas'; import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates'; import { ErrorMessage } from '../ErrorMessage/ErrorMessage'; @@ -29,6 +28,7 @@ import { validateCoordinates, } from './hooks/AreaCoordinates.hooks'; import { useModelResults } from './hooks/useModelResults'; +import { usePepmContextStore } from '../../hooks/GlobalState'; export type AreaCoordinateType = { modelAreaId: string; @@ -84,7 +84,7 @@ export const AreaCoordinates = ({ const [fallbackAreaCoordinate, setfallbackAreaCoordinate] = useState(); const { modelId } = useParams(); - const { data, isLoading } = useFetchModel(modelId); + const { analogueModel } = usePepmContextStore(); const cases = useFetchCases(); const { activeAreaResultList } = useModelResults( activeArea.name, @@ -108,7 +108,8 @@ export const AreaCoordinates = ({ return; } - const selectableAreas = data?.data?.modelAreas && data?.data?.modelAreas; + const selectableAreas = + analogueModel.modelAreas && analogueModel.modelAreas; const selectedArea = selectableAreas?.filter( (area) => area.modelAreaType === changes.selectedItems[0].name, @@ -267,7 +268,7 @@ export const AreaCoordinates = ({ setEdit(!edit); }; - if (modelAreas.isLoading || modelAreas.data === undefined || isLoading) + if (modelAreas.isLoading || modelAreas.data === undefined || !analogueModel) return

Loading.....

; return ( @@ -365,18 +366,18 @@ export const AreaCoordinates = ({ )} - {data && data.data.analogueModelImage === null && ( + {analogueModel && analogueModel.analogueModelImage === null && (
No image is found for this model. Try refreshing the page
)} - {data?.data.analogueModelId && - data.data.analogueModelImage?.analogueModelImageId && ( + {analogueModel.analogueModelId && + analogueModel.analogueModelImage?.analogueModelImageId && ( )} diff --git a/src/components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog.tsx b/src/components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog.tsx index 4e16d5b..327657c 100644 --- a/src/components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog.tsx +++ b/src/components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog.tsx @@ -3,12 +3,11 @@ import { Button, Dialog, Snackbar } from '@equinor/eds-core-react'; import { useState } from 'react'; -import { useParams } from 'react-router-dom'; import { CoordinateDto } from '../../../api/generated'; -import { useFetchModel } from '../../../hooks/useFetchModel'; import { useFetchModelAreas } from '../../../hooks/useFetchModelAreas'; import { AreaCoordinates } from '../AreaCoordinates'; import * as Styled from '../AreaCoordinates.styled'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export type AreaCoordinateType = { modelAreaId: string; @@ -23,16 +22,9 @@ export const CoordinatesDialog = ({ toggleOpen: () => void; }) => { const [showSaveAlert, setSaveAlert] = useState(false); - - const { modelId } = useParams(); - - const { data, isLoading } = useFetchModel(modelId); + const { analogueModel } = usePepmContextStore(); const modelAreas = useFetchModelAreas(); - // const [activeModelArea, setActiveModelArea] = useState(null); - - // const {data, isLoading} = useFetch - function clearStatus() { setSaveAlert(false); } @@ -41,14 +33,16 @@ export const CoordinatesDialog = ({ toggleOpen(); }; - if (modelAreas.isLoading || modelAreas.data === undefined || isLoading) + if (modelAreas.isLoading || modelAreas.data === undefined || !analogueModel) return

Loading.....

; return ( <> - Manage model areas for {data?.data.name} + + Manage model areas for {analogueModel.name} + diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx index aa842ab..31b4a8a 100644 --- a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx +++ b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx @@ -15,12 +15,12 @@ import { import { ConfirmDialog } from '../../../../components/ConfirmDialog/ConfirmDialog'; import * as Styled from './CaseButtons.styled'; import { useIsOwnerOrAdmin } from '../../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../../hooks/GlobalState'; export const CaseButtons = ({ id, caseType, saved, - isProcessed, caseStatus, hasUnsavedCase, saveCase, @@ -32,7 +32,6 @@ export const CaseButtons = ({ id: string; caseType: string; saved: boolean; - isProcessed?: boolean; caseStatus: ComputeJobStatus; hasUnsavedCase: boolean; runCase?: () => void; @@ -43,6 +42,7 @@ export const CaseButtons = ({ setAlertMessage: (message: string) => void; duplicateCase: () => void; }) => { + const { analogueModel } = usePepmContextStore(); const isOwnerOrAdmin = useIsOwnerOrAdmin(); const [deleteConfirm, setDeleteConfirm] = useState(false); const [saveConfirm, setSaveConfirm] = useState(false); @@ -137,7 +137,7 @@ export const CaseButtons = ({ ) : saved ? ( @@ -181,7 +183,7 @@ export const CaseButtons = ({ <> { const [caseError, setCaseError] = useState(''); const { modelId } = useParams<{ modelId: string }>(); + const { analogueModel } = usePepmContextStore(); const indicatorSettings = settingsFilter('Indicator'); const netToGrossSettings = settingsFilter('Net-To-Gross'); @@ -95,14 +97,8 @@ export const CaseRow = ({ continiousParameterSettings, ); - const { - isLoading, - isProcessed, - areaList, - selectedModelArea, - setModelArea, - selectedRowArea, - } = useModelArea(allCasesList); + const { areaList, selectedModelArea, setModelArea, selectedRowArea } = + useModelArea(allCasesList); const { inputSettingsList } = useGetParameterList( settingType, @@ -278,7 +274,7 @@ export const CaseRow = ({ 'Archel', ); - if (isLoading) return

Loading ...

; + if (!analogueModel) return

Loading ...

; return ( @@ -380,7 +376,6 @@ export const CaseRow = ({ id={id} caseType={caseType === 'Object' ? 'Object' : 'Variogram'} saved={saved} - isProcessed={isProcessed} caseStatus={rowCase.jobStatus} hasUnsavedCase={hasUnsavedCase(id)} saveCase={() => handleSaveCase(id)} diff --git a/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx b/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx index efac9df..3df1e75 100644 --- a/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx +++ b/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx @@ -1,13 +1,12 @@ /* eslint-disable max-lines-per-function */ import { useCallback, useState } from 'react'; import { ComputeCaseDto, ModelAreaDto } from '../../../../../api/generated'; -import { useFetchModel } from '../../../../../hooks/useFetchModel'; +import { usePepmContextStore } from '../../../../../hooks/GlobalState'; export const useModelArea = (allCasesList: ComputeCaseDto[]) => { const [selectedModelArea, setModelArea] = useState(); - const { data, isLoading } = useFetchModel(); + const { analogueModel } = usePepmContextStore(); - const isProcessed = data?.data.isProcessed; const wholeModelObject: ModelAreaDto[] = [ { modelAreaId: '', @@ -16,8 +15,8 @@ export const useModelArea = (allCasesList: ComputeCaseDto[]) => { }, ]; const areaList: ModelAreaDto[] = - data && data.data.modelAreas - ? data.data.modelAreas.concat(wholeModelObject) + analogueModel && analogueModel.modelAreas + ? analogueModel.modelAreas.concat(wholeModelObject) : wholeModelObject; const selectedRowArea = useCallback( @@ -70,8 +69,6 @@ export const useModelArea = (allCasesList: ComputeCaseDto[]) => { ); return { - isLoading, - isProcessed, areaList, selectedModelArea, setModelArea, diff --git a/src/features/HandleModel/SidePane/SidePane.tsx b/src/features/HandleModel/SidePane/SidePane.tsx index 9ce341a..98087e8 100644 --- a/src/features/HandleModel/SidePane/SidePane.tsx +++ b/src/features/HandleModel/SidePane/SidePane.tsx @@ -3,8 +3,10 @@ import { arrow_back as BACK } from '@equinor/eds-icons'; import { useNavigate } from 'react-router-dom'; import * as Styled from './SidePane.styled'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const SidePane = ({ uploading }: { uploading: boolean }) => { + const { setAnalogueModelEmpty } = usePepmContextStore(); const navigate = useNavigate(); const backItems: SidebarLinkProps = { @@ -29,6 +31,7 @@ export const SidePane = ({ uploading }: { uploading: boolean }) => { label={backItems.label} icon={backItems.icon} onClick={() => { + setAnalogueModelEmpty(); navigate('/'); }} > diff --git a/src/features/ModelView/ModelFilesView/ModelFilesView.tsx b/src/features/ModelView/ModelFilesView/ModelFilesView.tsx index acdf06b..f28dcb1 100644 --- a/src/features/ModelView/ModelFilesView/ModelFilesView.tsx +++ b/src/features/ModelView/ModelFilesView/ModelFilesView.tsx @@ -1,12 +1,12 @@ import { Table, Typography } from '@equinor/eds-core-react'; import { UploadList } from '../../../api/generated'; -import { useFetchModel } from '../../../hooks/useFetchModel'; import * as Styled from './ModelFilesView.styled'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const ModelFilesView = () => { - const { isLoading, data } = useFetchModel(); + const { analogueModel } = usePepmContextStore(); - if (isLoading || !data?.success) return

Loading ...

; + if (!analogueModel) return

Loading ...

; return ( @@ -21,10 +21,10 @@ export const ModelFilesView = () => { - {data.success && - (data.data.fileUploads?.length === undefined || - data.data.fileUploads?.length > 0) ? ( - data.data.fileUploads?.map((file: UploadList) => ( + {analogueModel && + (analogueModel.fileUploads?.length === undefined || + analogueModel.fileUploads?.length > 0) ? ( + analogueModel.fileUploads?.map((file: UploadList) => ( {file.originalFileName} - diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index c6ecbf8..0e27a57 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -21,11 +21,11 @@ import { queryClient } from '../../../auth/queryClient'; import { GrossDepositionEnviromentGroup } from '../../../components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup'; import { OutcropAnalogueGroup } from '../../../components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup'; import { StratigrapicGroups } from '../../../components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups'; -import { useFetchModel } from '../../../hooks/useFetchModel'; import { EditNameDescription } from '../EditNameDescription/EditNameDescription'; import * as Styled from './ModelMetadataView.styled'; import { getAnalogueModelImage } from '../../../api/custom/getAnalogueModelImageById'; import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const ModelMetadataView = ({ modelIdParent, @@ -35,9 +35,8 @@ export const ModelMetadataView = ({ uploadingProgress?: number; }) => { const isOwnerOrAdmin = useIsOwnerOrAdmin(); - const { isLoading, data } = useFetchModel( - modelIdParent ? modelIdParent : undefined, - ); + const { analogueModel } = usePepmContextStore(); + const [isAddModelDialog, setAddModelDialog] = useState(false); const generateImageRequested = useRef(false); @@ -45,24 +44,24 @@ export const ModelMetadataView = ({ const { modelId } = useParams(); const defaultMetadata: AnalogueModelDetail = { - analogueModelId: data?.data.analogueModelId - ? data?.data.analogueModelId + analogueModelId: analogueModel.analogueModelId + ? analogueModel.analogueModelId : '', - name: data?.data.name ? data?.data.name : '', - description: data?.data.description ? data?.data.description : '', - isProcessed: data?.data.isProcessed ? data?.data.isProcessed : false, + name: analogueModel.name ? analogueModel.name : '', + description: analogueModel.description ? analogueModel.description : '', + isProcessed: analogueModel.isProcessed ? analogueModel.isProcessed : false, sourceType: AnalogueModelSourceType.DELTARES, - outcrops: data?.data.outcrops ? data?.data.outcrops : [], - fileUploads: data?.data.fileUploads ? data?.data.fileUploads : [], + outcrops: analogueModel.outcrops ? analogueModel.outcrops : [], + fileUploads: analogueModel.fileUploads ? analogueModel.fileUploads : [], parameters: [], - metadata: data?.data.metadata ? data?.data.metadata : [], + metadata: analogueModel.metadata ? analogueModel.metadata : [], modelAreas: [], stratigraphicGroups: [], geologicalGroups: [], processingStatus: JobStatus.UNKNOWN, }; - const imageId = data?.data.analogueModelImage?.analogueModelImageId ?? ''; + const imageId = analogueModel.analogueModelImage?.analogueModelImageId ?? ''; const imageRequest = useQuery({ queryKey: ['analogue-model-image', modelId, imageId], @@ -91,22 +90,20 @@ export const ModelMetadataView = ({ useEffect(() => { if ( modelId && - data && - !isLoading && - data?.data?.analogueModelImage === null && + analogueModel && + analogueModel.analogueModelImage === null && generateImageRequested.current === false && - data.data.isProcessed + analogueModel.isProcessed ) { generateImageRequested.current = true; generateThumbnailOnLoad(modelId); } }, [ - data, - isLoading, - data?.data?.analogueModelImage, + analogueModel, + analogueModel.analogueModelImage, modelId, generateThumbnailOnLoad, - data?.data.isProcessed, + analogueModel.isProcessed, ]); function toggleEditMetadata() { @@ -154,7 +151,9 @@ export const ModelMetadataView = ({ } const updateModelMetadata = async (metadata: AnalogueModelDetail) => { - const id = data?.data.analogueModelId ? data?.data.analogueModelId : ''; + const id = analogueModel.analogueModelId + ? analogueModel.analogueModelId + : ''; const modelMetadata = { name: metadata.name, description: metadata.description, @@ -245,7 +244,7 @@ export const ModelMetadataView = ({ } }; - if (isLoading || !data?.success) return

Loading ...

; + if (!analogueModel) return

Loading ...

; return ( @@ -254,9 +253,9 @@ export const ModelMetadataView = ({ Description <> - {data.data.description && ( + {analogueModel.description && ( - {data.data.description} + {analogueModel.description} )} @@ -277,14 +276,14 @@ export const ModelMetadataView = ({ closeDialog={toggleEditMetadata} /> - {imageRequest.data && data.data && ( + {imageRequest.data && analogueModel && ( - {data.data.name} + {analogueModel.name} )} - {data.data.isProcessed && + {analogueModel.isProcessed && !imageRequest.data && generateImageRequested.current && (
@@ -296,7 +295,7 @@ export const ModelMetadataView = ({
)} - {!data.data.isProcessed && ( + {!analogueModel.isProcessed && (
Cannot generate picture for unprocessed model. @@ -330,14 +329,14 @@ export const ModelMetadataView = ({
@@ -345,7 +344,7 @@ export const ModelMetadataView = ({ diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx index c69ccef..17c04df 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx @@ -9,6 +9,7 @@ import { import { useLocation, useNavigate } from 'react-router-dom'; import { VariogramIcon } from '../../../assets/VaritogramIcon'; import * as Styled from './ModelNavigationBar.styled'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; type MenuItems = SidebarLinkProps & { subItems?: Array<{ @@ -21,6 +22,7 @@ type MenuItems = SidebarLinkProps & { }; export const ModelNavigationBar = () => { + const { setAnalogueModelEmpty } = usePepmContextStore(); const location = useLocation(); const navigate = useNavigate(); @@ -92,6 +94,7 @@ export const ModelNavigationBar = () => { label={backItems.label} icon={backItems.icon} onClick={() => { + setAnalogueModelEmpty(); navigate('/'); }} > From c9e1af7537c603c699ca9906b367066414e2e0ab Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Fri, 1 Nov 2024 10:33:12 +0100 Subject: [PATCH 4/8] feat: Added model area type and outcrops to global state --- .../AreaCoordinates/AreaCoordinates.tsx | 28 ++++++------ .../CoordinatesDialog/CoordinatesDialog.tsx | 11 ++--- .../GrossDepositionEnviromentGroup.tsx | 14 +++--- .../OutcropAnalogueGroup.tsx | 22 ++++------ .../OutcropSelect/OutcropSelect.tsx | 11 ++--- .../StratigrapicGroups/StratigrapicGroups.tsx | 13 +++--- .../Compute/CaseGroup/CaseRow/CaseRow.tsx | 7 ++- .../CaseGroup/CaseRow/hooks/useModelArea.tsx | 7 ++- .../HandleModelComponent.tsx | 12 ++++-- .../HandleModel/SidePane/SidePane.tsx | 4 +- .../ModelFilesView/ModelFilesView.tsx | 9 ++-- .../ModelMetadataView/ModelMetadataView.tsx | 43 +++++-------------- .../ModelNameFrame/ModelNameFrame.tsx | 7 ++- .../ModelNavigationBar/ModelNavigationBar.tsx | 4 +- src/hooks/GlobalState.tsx | 30 ++++++++++--- src/hooks/useFetchModel.ts | 4 +- src/hooks/useFetchOutcropData.ts | 4 +- src/pages/AddModel/AddModel.tsx | 19 -------- src/pages/ModelPages/Model/Model.tsx | 24 ++++++++--- 19 files changed, 137 insertions(+), 136 deletions(-) diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx index 4074ef7..3845195 100644 --- a/src/components/AreaCoordinates/AreaCoordinates.tsx +++ b/src/components/AreaCoordinates/AreaCoordinates.tsx @@ -17,7 +17,6 @@ import { ModelAreaTypeDto, } from '../../api/generated'; import { useFetchCases } from '../../hooks/useFetchCases'; -import { useFetchModelAreas } from '../../hooks/useFetchModelAreas'; import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates'; import { ErrorMessage } from '../ErrorMessage/ErrorMessage'; import { AnalogueModelImageView } from '../ImageView/AnalogueModelImageView'; @@ -28,7 +27,10 @@ import { validateCoordinates, } from './hooks/AreaCoordinates.hooks'; import { useModelResults } from './hooks/useModelResults'; -import { usePepmContextStore } from '../../hooks/GlobalState'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../hooks/GlobalState'; export type AreaCoordinateType = { modelAreaId: string; @@ -84,13 +86,12 @@ export const AreaCoordinates = ({ const [fallbackAreaCoordinate, setfallbackAreaCoordinate] = useState(); const { modelId } = useParams(); - const { analogueModel } = usePepmContextStore(); + const { analogueModel, modelAreaTypes } = usePepmContextStore(); const cases = useFetchCases(); const { activeAreaResultList } = useModelResults( activeArea.name, cases.data?.data, ); - const modelAreas = useFetchModelAreas(); const mutateAreaCoordinates = useMutateAreaCoordinates(); const handleSelectChange = async ( @@ -268,7 +269,7 @@ export const AreaCoordinates = ({ setEdit(!edit); }; - if (modelAreas.isLoading || modelAreas.data === undefined || !analogueModel) + if (modelAreaTypes.length === 0 || analogueModel === analogueModelDefault) return

Loading.....

; return ( @@ -279,7 +280,7 @@ export const AreaCoordinates = ({ option.name} onOptionsChange={handleSelectChange} selectedOptions={[activeArea]} @@ -366,13 +367,14 @@ export const AreaCoordinates = ({ )} - {analogueModel && analogueModel.analogueModelImage === null && ( -
- - No image is found for this model. Try refreshing the page - -
- )} + {analogueModel !== analogueModelDefault && + analogueModel.analogueModelImage === null && ( +
+ + No image is found for this model. Try refreshing the page + +
+ )} {analogueModel.analogueModelId && analogueModel.analogueModelImage?.analogueModelImageId && ( void; }) => { const [showSaveAlert, setSaveAlert] = useState(false); - const { analogueModel } = usePepmContextStore(); - const modelAreas = useFetchModelAreas(); + const { analogueModel, modelAreaTypes } = usePepmContextStore(); function clearStatus() { setSaveAlert(false); @@ -33,7 +34,7 @@ export const CoordinatesDialog = ({ toggleOpen(); }; - if (modelAreas.isLoading || modelAreas.data === undefined || !analogueModel) + if (modelAreaTypes.length === 0 || analogueModel === analogueModelDefault) return

Loading.....

; return ( diff --git a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx index a997894..22a6978 100644 --- a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx +++ b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx @@ -11,10 +11,8 @@ import { useMutation } from '@tanstack/react-query'; import { useState } from 'react'; import { AddGeologicalGroupForm, - AnalogueModelDetail, AnalogueModelsService, DeleteGeologicalGroupCommandResponse, - GeologicalGroupDto, GeologicalStandardDto, } from '../../../api/generated'; import { queryClient } from '../../../auth/queryClient'; @@ -24,6 +22,7 @@ import * as Styled from './GrossDepositionEnviromentGroup.styled'; import { validateInput } from './GDE.hooks'; import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export interface GdeType { grossDepEnv?: GeologicalStandardDto; @@ -46,18 +45,15 @@ export type GDEErrorType = { }; export const GrossDepositionEnviromentGroup = ({ modelIdParent, - defaultMetadata, - gdeGroups, deleteGdeRow, }: { modelIdParent?: string; - defaultMetadata: AnalogueModelDetail; - gdeGroups: GeologicalGroupDto[]; deleteGdeRow: ( geologicalGroupId: string, ) => Promise; }) => { const isOwnerOrAdmin = useIsOwnerOrAdmin(); + const { analogueModel } = usePepmContextStore(); const [showGdeDialog, setShowGdeDialog] = useState(false); const [gdeObject, setGdeObject] = useState(defaultGdeData); const [errors, setErrors] = useState({}); @@ -85,7 +81,7 @@ export const GrossDepositionEnviromentGroup = ({ }); const handleAddGde = async () => { - const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId; + const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId; const err = await validateInput(gdeObject); setErrors(err); @@ -128,7 +124,7 @@ export const GrossDepositionEnviromentGroup = ({ Gross Depositional Environment (GDE) - {gdeGroups.length > 0 && ( + {analogueModel.geologicalGroups.length > 0 && ( @@ -141,7 +137,7 @@ export const GrossDepositionEnviromentGroup = ({ - {gdeGroups.map((row) => ( + {analogueModel.geologicalGroups.map((row) => ( {isOwnerOrAdmin && ( diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx index 87737d3..122bc09 100644 --- a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx +++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx @@ -8,16 +8,13 @@ import { } from '@equinor/eds-core-react'; import { delete_to_trash as deleteIcon } from '@equinor/eds-icons'; import { useState } from 'react'; -import { - AddAnalogueModelOutcropForm, - AnalogueModelDetail, - OutcropDto, -} from '../../../api/generated'; +import { AddAnalogueModelOutcropForm } from '../../../api/generated'; import { useOutcropAnalouge } from '../../../hooks/useOutcropAnalogue'; import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled'; import { OutcropSelect } from '../OutcropSelect/OutcropSelect'; import * as Styled from './OutcropAnalogueGroup.styled'; import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export interface OutcropType { outcropId?: string; @@ -41,14 +38,11 @@ export type OutcropErrorType = { export const OutcropAnalogueGroup = ({ modelIdParent, - defaultMetadata, - outcropGroup, }: { modelIdParent?: string; - defaultMetadata: AnalogueModelDetail; - outcropGroup: OutcropDto[]; }) => { const isOwnerOrAdmin = useIsOwnerOrAdmin(); + const { analogueModel } = usePepmContextStore(); const [showOutcropDialog, setShowOutcropDialog] = useState(false); const [errors, setErrors] = useState({}); const [outcropObject, setOutcropObject] = @@ -72,7 +66,7 @@ export const OutcropAnalogueGroup = ({ }; const handleAddOutcropAnalogue = async () => { - const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId; + const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId; const err = await validateInput(outcropObject); setErrors(err); @@ -89,7 +83,7 @@ export const OutcropAnalogueGroup = ({ }; const handleDeleteOutcropAnalogue = async (stratigraphicGroupId: string) => { - const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId; + const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId; const res = await useOutcrop.deleteOutcropAnalogue.mutateAsync({ id: id, outcropId: stratigraphicGroupId, @@ -102,7 +96,7 @@ export const OutcropAnalogueGroup = ({ Outcrop Analogue - {outcropGroup.length > 0 && ( + {analogueModel.outcrops.length > 0 && (
@@ -114,7 +108,7 @@ export const OutcropAnalogueGroup = ({ - {outcropGroup.map((row) => ( + {analogueModel.outcrops.map((row) => ( {isOwnerOrAdmin && ( @@ -164,7 +158,7 @@ export const OutcropAnalogueGroup = ({ diff --git a/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx b/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx index 5161e33..d0968e4 100644 --- a/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx +++ b/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx @@ -1,13 +1,13 @@ /* eslint-disable max-lines-per-function */ import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react'; import { OutcropDto } from '../../../api/generated'; -import { useFetchOutcropData } from '../../../hooks/useFetchOutcropData'; import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled'; import { sortList } from '../../../utils/SortList'; import { OutcropErrorType, OutcropType, } from '../OutcropAnalogueGroup/OutcropAnalogueGroup'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const OutcropSelect = ({ outcropObject, @@ -20,9 +20,10 @@ export const OutcropSelect = ({ error: OutcropErrorType; setOutcropObject: React.Dispatch>; }) => { - const OutcropData = useFetchOutcropData(); - if (OutcropData.isLoading || !OutcropData.data?.success) - return

Loading .....

; + const { outcrops } = usePepmContextStore(); + const oc: OutcropDto[] = [...outcrops]; + + if (outcrops.length === 0) return

Loading .....

; const filterDisabled = (option: OutcropDto) => { const caseExists = outcropGroup.filter( @@ -35,7 +36,7 @@ export const OutcropSelect = ({ option.name} onOptionsChange={(e: AutocompleteChanges) => { const copyObject: OutcropType = { diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx index 20b057b..f7855f2 100644 --- a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx +++ b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx @@ -11,7 +11,6 @@ import { useMutation } from '@tanstack/react-query'; import { useState } from 'react'; import { AddStatigraphicGroupForm, - AnalogueModelDetail, AnalogueModelsService, CountryDto, DeleteStratigraphicGroupCommandResponse, @@ -27,6 +26,7 @@ import { StratigraphicColumnSelect } from '../StratigraphicColumnSelect/Stratigr import { validateInput } from './StratigrapicGroups.hooks'; import * as Styled from './StratigrapicGroups.styled'; import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export interface StratColumnType { country?: CountryDto; @@ -56,18 +56,15 @@ export type StratColumnErrorType = { export const StratigrapicGroups = ({ modelIdParent, - defaultMetadata, - stratColumnGroups, deleteStratColRow, }: { modelIdParent?: string; - defaultMetadata: AnalogueModelDetail; - stratColumnGroups: StratigraphicGroupDto[]; deleteStratColRow: ( stratigraphicGroupId: string, ) => Promise; }) => { const isOwnerOrAdmin = useIsOwnerOrAdmin(); + const { analogueModel } = usePepmContextStore(); const [stratColumnObject, setStratColumnObject] = useState( defaultStratColumnData, ); @@ -101,7 +98,7 @@ export const StratigrapicGroups = ({ }); const handleAddStratCol = async () => { - const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId; + const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId; const err = await validateInput(stratColumnObject); setErrors(err); if ( @@ -153,7 +150,7 @@ export const StratigrapicGroups = ({ Stratigraphic column - {stratColumnGroups.length > 0 && ( + {analogueModel.stratigraphicGroups.length > 0 && (
@@ -168,7 +165,7 @@ export const StratigrapicGroups = ({ - {stratColumnGroups.map((row) => ( + {analogueModel.stratigraphicGroups.map((row) => ( {isOwnerOrAdmin && ( diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx index cbdf176..a67def4 100644 --- a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx +++ b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx @@ -25,7 +25,10 @@ import { useSetSaved } from './hooks/useSetSaved'; import { useMutation } from '@tanstack/react-query'; import { queryClient } from '../../../../auth/queryClient'; import { useParams } from 'react-router-dom'; -import { usePepmContextStore } from '../../../../hooks/GlobalState'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../../../hooks/GlobalState'; export const CaseRow = ({ rowCase, @@ -274,7 +277,7 @@ export const CaseRow = ({ 'Archel', ); - if (!analogueModel) return

Loading ...

; + if (analogueModel === analogueModelDefault) return

Loading ...

; return ( diff --git a/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx b/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx index 3df1e75..370f32f 100644 --- a/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx +++ b/src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx @@ -1,7 +1,10 @@ /* eslint-disable max-lines-per-function */ import { useCallback, useState } from 'react'; import { ComputeCaseDto, ModelAreaDto } from '../../../../../api/generated'; -import { usePepmContextStore } from '../../../../../hooks/GlobalState'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../../../../hooks/GlobalState'; export const useModelArea = (allCasesList: ComputeCaseDto[]) => { const [selectedModelArea, setModelArea] = useState(); @@ -15,7 +18,7 @@ export const useModelArea = (allCasesList: ComputeCaseDto[]) => { }, ]; const areaList: ModelAreaDto[] = - analogueModel && analogueModel.modelAreas + analogueModel !== analogueModelDefault && analogueModel.modelAreas ? analogueModel.modelAreas.concat(wholeModelObject) : wholeModelObject; diff --git a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx index b5d25f4..41190b9 100644 --- a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx +++ b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx @@ -18,13 +18,16 @@ import { validateValues, } from './HandleModelComponent.hooks'; import * as Styled from './HandleModelComponent.styled'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../../hooks/GlobalState'; Icon.add({ error_outlined }); interface AddModelDialogProps { confirm?: (file: File, metadata: AnalogueModelDetail) => Promise; progress?: number; uploading?: boolean; - defaultMetadata: AnalogueModelDetail; isAddUploading?: boolean; existingData?: AnalogueModelDetail; modelId?: string; @@ -60,15 +63,15 @@ export const HandleModelComponent = ({ confirm, progress, uploading, - defaultMetadata, isAddUploading, existingData, modelId, }: AddModelDialogProps) => { + const { setAnalogueModel } = usePepmContextStore(); const [isFileDisplay, setFileDisplay] = useState(false); const [files, setFiles] = useState(defaultFiles); const [metadata, setMetadata] = - useState(defaultMetadata); + useState(analogueModelDefault); const [submitting, setSubmitting] = useState(false); const [fileSize, setFileSize] = useState(0); const [rawFile, setrawFile] = useState(); @@ -115,7 +118,7 @@ export const HandleModelComponent = ({ if (Object.keys(errors).length === 0 && submitting) { finishSubmit(); } - }, [confirm, defaultMetadata, errors, files.NC, metadata, submitting]); + }, [confirm, errors, files.NC, metadata, submitting]); function toggleINIFileContent() { setFileDisplay(!isFileDisplay); @@ -186,6 +189,7 @@ export const HandleModelComponent = ({ const path = generatePath('../:id/details', { id: modelId, }); + setAnalogueModel(metadata); navigate(path); }} > diff --git a/src/features/HandleModel/SidePane/SidePane.tsx b/src/features/HandleModel/SidePane/SidePane.tsx index 98087e8..8970984 100644 --- a/src/features/HandleModel/SidePane/SidePane.tsx +++ b/src/features/HandleModel/SidePane/SidePane.tsx @@ -6,7 +6,7 @@ import * as Styled from './SidePane.styled'; import { usePepmContextStore } from '../../../hooks/GlobalState'; export const SidePane = ({ uploading }: { uploading: boolean }) => { - const { setAnalogueModelEmpty } = usePepmContextStore(); + const { setanalogueModelDefault } = usePepmContextStore(); const navigate = useNavigate(); const backItems: SidebarLinkProps = { @@ -31,7 +31,7 @@ export const SidePane = ({ uploading }: { uploading: boolean }) => { label={backItems.label} icon={backItems.icon} onClick={() => { - setAnalogueModelEmpty(); + setanalogueModelDefault(); navigate('/'); }} > diff --git a/src/features/ModelView/ModelFilesView/ModelFilesView.tsx b/src/features/ModelView/ModelFilesView/ModelFilesView.tsx index f28dcb1..199f2c0 100644 --- a/src/features/ModelView/ModelFilesView/ModelFilesView.tsx +++ b/src/features/ModelView/ModelFilesView/ModelFilesView.tsx @@ -1,12 +1,15 @@ import { Table, Typography } from '@equinor/eds-core-react'; import { UploadList } from '../../../api/generated'; import * as Styled from './ModelFilesView.styled'; -import { usePepmContextStore } from '../../../hooks/GlobalState'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../../hooks/GlobalState'; export const ModelFilesView = () => { const { analogueModel } = usePepmContextStore(); - if (!analogueModel) return

Loading ...

; + if (analogueModel === analogueModelDefault) return

Loading ...

; return ( @@ -21,7 +24,7 @@ export const ModelFilesView = () => { - {analogueModel && + {analogueModel !== analogueModelDefault && (analogueModel.fileUploads?.length === undefined || analogueModel.fileUploads?.length > 0) ? ( analogueModel.fileUploads?.map((file: UploadList) => ( diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index 0e27a57..d76ac47 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -9,10 +9,8 @@ import { AddMetadataDto, AnalogueModelDetail, AnalogueModelMetadataService, - AnalogueModelSourceType, GenerateThumbnailCommand, JobsService, - JobStatus, MetadataDto, UpdateAnalogueModelCommandBody, } from '../../../api/generated'; @@ -25,7 +23,10 @@ import { EditNameDescription } from '../EditNameDescription/EditNameDescription' import * as Styled from './ModelMetadataView.styled'; import { getAnalogueModelImage } from '../../../api/custom/getAnalogueModelImageById'; import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; -import { usePepmContextStore } from '../../../hooks/GlobalState'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../../hooks/GlobalState'; export const ModelMetadataView = ({ modelIdParent, @@ -43,23 +44,9 @@ export const ModelMetadataView = ({ const { modelId } = useParams(); - const defaultMetadata: AnalogueModelDetail = { - analogueModelId: analogueModel.analogueModelId - ? analogueModel.analogueModelId - : '', - name: analogueModel.name ? analogueModel.name : '', - description: analogueModel.description ? analogueModel.description : '', - isProcessed: analogueModel.isProcessed ? analogueModel.isProcessed : false, - sourceType: AnalogueModelSourceType.DELTARES, - outcrops: analogueModel.outcrops ? analogueModel.outcrops : [], - fileUploads: analogueModel.fileUploads ? analogueModel.fileUploads : [], - parameters: [], - metadata: analogueModel.metadata ? analogueModel.metadata : [], - modelAreas: [], - stratigraphicGroups: [], - geologicalGroups: [], - processingStatus: JobStatus.UNKNOWN, - }; + const defaultMetadata: AnalogueModelDetail = analogueModel + ? analogueModel + : analogueModelDefault; const imageId = analogueModel.analogueModelImage?.analogueModelImageId ?? ''; @@ -90,7 +77,7 @@ export const ModelMetadataView = ({ useEffect(() => { if ( modelId && - analogueModel && + analogueModel !== analogueModelDefault && analogueModel.analogueModelImage === null && generateImageRequested.current === false && analogueModel.isProcessed @@ -244,7 +231,7 @@ export const ModelMetadataView = ({ } }; - if (!analogueModel) return

Loading ...

; + if (analogueModel === analogueModelDefault) return

Loading ...

; return ( @@ -276,7 +263,7 @@ export const ModelMetadataView = ({ closeDialog={toggleEditMetadata} /> - {imageRequest.data && analogueModel && ( + {imageRequest.data && analogueModel !== analogueModelDefault && ( {analogueModel.name} @@ -326,25 +313,17 @@ export const ModelMetadataView = ({ Model metadata
- +
diff --git a/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx b/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx index 0ad2a5f..207f5ab 100644 --- a/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx +++ b/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx @@ -1,6 +1,9 @@ import { Typography } from '@equinor/eds-core-react'; import * as Styled from './ModelNameFrame.styled'; -import { usePepmContextStore } from '../../../hooks/GlobalState'; +import { + analogueModelDefault, + usePepmContextStore, +} from '../../../hooks/GlobalState'; export const ModelNameFrame = () => { const { analogueModel } = usePepmContextStore(); @@ -10,7 +13,7 @@ export const ModelNameFrame = () => { return ( - {analogueModel ? ( + {analogueModel !== analogueModelDefault ? ( {analogueModel.name} diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx index 17c04df..2d4ba7c 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx @@ -22,7 +22,7 @@ type MenuItems = SidebarLinkProps & { }; export const ModelNavigationBar = () => { - const { setAnalogueModelEmpty } = usePepmContextStore(); + const { setanalogueModelDefault } = usePepmContextStore(); const location = useLocation(); const navigate = useNavigate(); @@ -94,7 +94,7 @@ export const ModelNavigationBar = () => { label={backItems.label} icon={backItems.icon} onClick={() => { - setAnalogueModelEmpty(); + setanalogueModelDefault(); navigate('/'); }} > diff --git a/src/hooks/GlobalState.tsx b/src/hooks/GlobalState.tsx index 3f4598d..a3c7417 100644 --- a/src/hooks/GlobalState.tsx +++ b/src/hooks/GlobalState.tsx @@ -4,9 +4,11 @@ import { AnalogueModelDetail, AnalogueModelSourceType, JobStatus, + ModelAreaTypeDto, + OutcropDto, } from '../api/generated'; -export const analogueModelEmpty: AnalogueModelDetail = { +export const analogueModelDefault: AnalogueModelDetail = { analogueModelId: '', name: '', description: '', @@ -28,22 +30,36 @@ export const analogueModelEmpty: AnalogueModelDetail = { type IPepmContext = { analogueModel: AnalogueModelDetail; + modelAreaTypes: ModelAreaTypeDto[]; + outcrops: OutcropDto[]; }; type IPepmContextActions = { setAnalogueModel: (analogueModel: AnalogueModelDetail) => void; - setAnalogueModelEmpty: () => void; + setanalogueModelDefault: () => void; + setModelAreaTypes: (modelAreaTypes: ModelAreaTypeDto[]) => void; + setOutcrops: (outcrops: OutcropDto[]) => void; }; export const usePepmContextStore = create()( immer((set, get) => ({ - analogueModel: analogueModelEmpty, - setAnalogueModel: (am: AnalogueModelDetail) => + analogueModel: analogueModelDefault, + modelAreaTypes: [], + outcrops: [], + setAnalogueModel: (analogueModel: AnalogueModelDetail) => set((state) => { - state.analogueModel = am; + state.analogueModel = analogueModel; }), - setAnalogueModelEmpty: () => + setanalogueModelDefault: () => set((state) => { - state.analogueModel = analogueModelEmpty; + state.analogueModel = analogueModelDefault; + }), + setModelAreaTypes: (modelAreaTypes: ModelAreaTypeDto[]) => + set((state) => { + state.modelAreaTypes = modelAreaTypes; + }), + setOutcrops: (outcrops: OutcropDto[]) => + set((state) => { + state.outcrops = outcrops; }), })), ); diff --git a/src/hooks/useFetchModel.ts b/src/hooks/useFetchModel.ts index 0476334..5bc44a2 100644 --- a/src/hooks/useFetchModel.ts +++ b/src/hooks/useFetchModel.ts @@ -4,8 +4,10 @@ import { AnalogueModelsService } from '../api/generated/services/AnalogueModelsS import { useMsal } from '@azure/msal-react'; import { useParams } from 'react-router-dom'; import { useAccessToken } from './useAccessToken'; +import { analogueModelDefault, usePepmContextStore } from './GlobalState'; export const useFetchModel = (id?: string) => { + const { analogueModel } = usePepmContextStore(); const { modelId } = useParams(); const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); @@ -15,7 +17,7 @@ export const useFetchModel = (id?: string) => { const query = useQuery({ queryKey: ['analogue-model', ID], queryFn: () => AnalogueModelsService.getApiAnalogueModels1(ID), - enabled: !!token, + enabled: !!token && analogueModel === analogueModelDefault, }); return query; diff --git a/src/hooks/useFetchOutcropData.ts b/src/hooks/useFetchOutcropData.ts index a4fc7a3..7713a9b 100644 --- a/src/hooks/useFetchOutcropData.ts +++ b/src/hooks/useFetchOutcropData.ts @@ -2,15 +2,17 @@ import { useMsal } from '@azure/msal-react'; import { useQuery } from '@tanstack/react-query'; import { OutcropsService } from '../api/generated'; import { useAccessToken } from './useAccessToken'; +import { usePepmContextStore } from './GlobalState'; export const useFetchOutcropData = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { outcrops } = usePepmContextStore(); const query = useQuery({ queryKey: ['smda-GDE'], queryFn: () => OutcropsService.getApiOutcrops(), - enabled: !!token, + enabled: !!token && outcrops.length === 0, }); return query; diff --git a/src/pages/AddModel/AddModel.tsx b/src/pages/AddModel/AddModel.tsx index 3c0bbc3..2807eb1 100644 --- a/src/pages/AddModel/AddModel.tsx +++ b/src/pages/AddModel/AddModel.tsx @@ -9,11 +9,9 @@ import { AddMetadataDto, AnalogueModelDetail, AnalogueModelMetadataService, - AnalogueModelSourceType, AnalogueModelsService, ConvertAnalogueModelCommand, CreateAnalogueModelCommand, - JobStatus, JobsService, MetadataDto, UploadFileType, @@ -58,22 +56,6 @@ export const AddModel = () => { const [uploadId, setUploadId] = useState(''); const [uploadStatus, setUploadStatus] = useState(); - const defaultMetadata: AnalogueModelDetail = { - analogueModelId: '', - name: '', - description: '', - isProcessed: false, - sourceType: AnalogueModelSourceType.DELTARES, - outcrops: [], - fileUploads: [], - parameters: [], - metadata: [], - modelAreas: [], - stratigraphicGroups: [], - geologicalGroups: [], - processingStatus: JobStatus.UNKNOWN, - }; - const createModel = useMutation({ mutationFn: AnalogueModelsService.postApiAnalogueModels, onSuccess: () => { @@ -305,7 +287,6 @@ export const AddModel = () => { 0} modelId={modelId} diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index 069fd8a..2eba391 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -12,19 +12,33 @@ import { import { mood_sad } from '@equinor/eds-icons'; import { useEffect } from 'react'; import { usePepmContextStore } from '../../../hooks/GlobalState'; +import { useFetchModelAreas } from '../../../hooks/useFetchModelAreas'; +import { useFetchOutcropData } from '../../../hooks/useFetchOutcropData'; // eslint-disable-next-line camelcase Icon.add({ mood_sad }); export const Model = () => { const { data, isLoading, failureReason } = useFetchModel(); - const { setAnalogueModel } = usePepmContextStore(); + const modelArea = useFetchModelAreas(); + const outcropData = useFetchOutcropData(); + + const { setAnalogueModel, setModelAreaTypes, setOutcrops } = + usePepmContextStore(); useEffect(() => { - if (data) { - setAnalogueModel(data.data); - } - }, [data, setAnalogueModel]); + if (data) setAnalogueModel(data.data); + if (modelArea.data?.data) setModelAreaTypes(modelArea.data.data); + if (outcropData.data?.data) setOutcrops(outcropData.data.data); + }, [ + data, + modelArea.data?.data, + + outcropData.data?.data, + setAnalogueModel, + setModelAreaTypes, + setOutcrops, + ]); if (failureReason) return ( From 6e37551bf7031ce3df5892f8c80bdc9cc3409c37 Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Fri, 1 Nov 2024 10:45:28 +0100 Subject: [PATCH 5/8] feat: Added several Dto's to global state --- src/hooks/GlobalState.tsx | 49 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/src/hooks/GlobalState.tsx b/src/hooks/GlobalState.tsx index a3c7417..8ab7081 100644 --- a/src/hooks/GlobalState.tsx +++ b/src/hooks/GlobalState.tsx @@ -3,9 +3,14 @@ import { immer } from 'zustand/middleware/immer'; import { AnalogueModelDetail, AnalogueModelSourceType, + ComputeCaseDto, + CountryDto, + FieldDto, JobStatus, ModelAreaTypeDto, OutcropDto, + StratColumnDto, + StratUnitDto, } from '../api/generated'; export const analogueModelDefault: AnalogueModelDetail = { @@ -30,29 +35,53 @@ export const analogueModelDefault: AnalogueModelDetail = { type IPepmContext = { analogueModel: AnalogueModelDetail; + computeCases: ComputeCaseDto[]; modelAreaTypes: ModelAreaTypeDto[]; outcrops: OutcropDto[]; + countries: CountryDto[]; + fields: FieldDto[]; + stratigraphicColumns: StratColumnDto[]; + stratigraphicUnits: StratUnitDto[]; }; type IPepmContextActions = { setAnalogueModel: (analogueModel: AnalogueModelDetail) => void; - setanalogueModelDefault: () => void; + setAnalogueModelDefault: () => void; + setComputeCases: (computeCases: ComputeCaseDto[]) => void; + setComputeCasesDefault: () => void; setModelAreaTypes: (modelAreaTypes: ModelAreaTypeDto[]) => void; setOutcrops: (outcrops: OutcropDto[]) => void; + setCountries: (countries: CountryDto[]) => void; + setFields: (fields: FieldDto[]) => void; + setStratigraphicColumns: (fields: StratColumnDto[]) => void; + setStratigraphicUnits: (fields: StratUnitDto[]) => void; }; export const usePepmContextStore = create()( immer((set, get) => ({ analogueModel: analogueModelDefault, + computeCases: [], modelAreaTypes: [], outcrops: [], + countries: [], + fields: [], + stratigraphicColumns: [], + stratigraphicUnits: [], setAnalogueModel: (analogueModel: AnalogueModelDetail) => set((state) => { state.analogueModel = analogueModel; }), - setanalogueModelDefault: () => + setAnalogueModelDefault: () => set((state) => { state.analogueModel = analogueModelDefault; }), + setComputeCases: (computeCases: ComputeCaseDto[]) => + set((state) => { + state.computeCases = computeCases; + }), + setComputeCasesDefault: () => + set((state) => { + state.computeCases = []; + }), setModelAreaTypes: (modelAreaTypes: ModelAreaTypeDto[]) => set((state) => { state.modelAreaTypes = modelAreaTypes; @@ -61,5 +90,21 @@ export const usePepmContextStore = create()( set((state) => { state.outcrops = outcrops; }), + setCountries: (countries: CountryDto[]) => + set((state) => { + state.countries = countries; + }), + setFields: (fields: FieldDto[]) => + set((state) => { + state.fields = fields; + }), + setStratigraphicColumns: (stratigraphicColumns: StratColumnDto[]) => + set((state) => { + state.stratigraphicColumns = stratigraphicColumns; + }), + setStratigraphicUnits: (stratigraphicUnits: StratUnitDto[]) => + set((state) => { + state.stratigraphicUnits = stratigraphicUnits; + }), })), ); From cc66664c38a410a0d100a50141b4a54e39141fe4 Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Fri, 1 Nov 2024 13:21:24 +0100 Subject: [PATCH 6/8] feat: Updated GDE and stratographics --- .../GdeSelect/GdeSelect.tsx | 15 +++--- .../StratigraphicColumnSelect.tsx | 41 ++++++---------- .../HandleModel/SidePane/SidePane.tsx | 4 +- .../ModelNavigationBar/ModelNavigationBar.tsx | 4 +- src/hooks/GlobalState.tsx | 8 ++++ src/hooks/useFetchGrossDepData.ts | 4 +- src/hooks/useFetchOutcropData.ts | 2 +- src/hooks/useFetchStratColData.ts | 13 +++-- src/pages/ModelPages/Model/Model.tsx | 48 +++++++++++++++++-- 9 files changed, 92 insertions(+), 47 deletions(-) diff --git a/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx b/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx index 5c4d7fc..5c890ac 100644 --- a/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx +++ b/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx @@ -1,13 +1,13 @@ /* eslint-disable max-lines-per-function */ import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react'; import { GeologicalStandardDto } from '../../../api/generated'; -import { useFetchGrossDepData } from '../../../hooks/useFetchGrossDepData'; import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled'; import { sortList } from '../../../utils/SortList'; import { GDEErrorType, GdeType, } from '../GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const GdeSelect = ({ gdeObject, @@ -20,29 +20,28 @@ export const GdeSelect = ({ error: GDEErrorType; setErrors: React.Dispatch>; }) => { - const GdeData = useFetchGrossDepData(); + const { geologyStandards } = usePepmContextStore(); + if (geologyStandards.length === 0) return

Loading .....

; - if (GdeData.isLoading || !GdeData.data?.success) return

Loading .....

; - - const Gde = GdeData.data.data.filter( + const Gde = geologyStandards.filter( (g) => g.geologyGroup === 'GrossDepositionalEnvironment', ); - const De = GdeData.data.data.filter( + const De = geologyStandards.filter( (g) => g.geologyGroup === 'DepositionalEnvironment' && g.geologicalStandardParentId === gdeObject.grossDepEnv?.geologicalStandardId, ); - const SubEnvironment = GdeData.data.data.filter( + const SubEnvironment = geologyStandards.filter( (g) => g.geologyGroup === 'Subenvironment' && g.geologicalStandardParentId === gdeObject.grossDepEnv?.geologicalStandardId, ); - const ArchitecturalElement = GdeData.data.data.filter( + const ArchitecturalElement = geologyStandards.filter( (g) => g.geologyGroup === 'ArchitecturalElement', ); diff --git a/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx b/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx index 7aebfb5..4694147 100644 --- a/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx +++ b/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx @@ -6,18 +6,13 @@ import { StratColumnDto, StratUnitDto, } from '../../../api/generated'; -import { - useFetchSmdaCountries, - useFetchSmdaFields, - useFetchSmdaMetadataStratigraphicUnits, - useFetchSmdaStratigraphicColumns, -} from '../../../hooks/useFetchStratColData'; import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled'; import { sortList } from '../../../utils/SortList'; import { StratColumnErrorType, StratColumnType, } from '../StratigrapicGroups/StratigrapicGroups'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const StratigraphicColumnSelect = ({ stratColumnObject, @@ -30,37 +25,31 @@ export const StratigraphicColumnSelect = ({ error: StratColumnErrorType; setErrors: React.Dispatch>; }) => { - const countryData = useFetchSmdaCountries(); - const fieldData = useFetchSmdaFields(); - const stratColumnData = useFetchSmdaStratigraphicColumns(); - const stratUnitData = useFetchSmdaMetadataStratigraphicUnits(); + const { fields, countries, stratigraphicColumns, stratigraphicUnits } = + usePepmContextStore(); if ( - countryData.isLoading || - !countryData?.data?.success || - fieldData.isLoading || - !fieldData?.data?.success || - stratColumnData.isLoading || - !stratColumnData?.data?.success || - stratUnitData.isLoading || - !stratUnitData?.data?.success + fields.length === 0 || + countries.length === 0 || + stratigraphicColumns.length === 0 || + stratigraphicUnits.length === 0 ) return

Loading ...

; const hasFields = (id: string) => { - const res = fieldData.data.data.filter((f) => f.countryId === id); + const res = fields.filter((f) => f.countryId === id); return res; }; const hasStratCol = (id: string) => { - const StratColContryList = stratColumnData.data.data.map((col) => + const StratColContryList = stratigraphicColumns.map((col) => col.countries.filter((c) => c.countryId === id), ); const res = StratColContryList.filter((col) => col.length > 0); return res; }; - const filterCountries = countryData.data.data.filter( + const filterCountries = countries.filter( (c) => hasStratCol(c.countryId).length > 0 || hasFields(c.countryId).length > 0, ); @@ -92,7 +81,7 @@ export const StratigraphicColumnSelect = ({ disabled={stratColumnObject.country === undefined} label="Field" options={sortList( - fieldData.data.data.filter( + fields.filter( (field) => field.countryId === stratColumnObject.country?.countryId, ), )} @@ -123,7 +112,7 @@ export const StratigraphicColumnSelect = ({ disabled={stratColumnObject.country === undefined} label="Stratigraphic column" options={sortList( - stratColumnData.data.data.filter( + stratigraphicColumns.filter( (c) => stratColumnObject.country !== undefined && c.countries.filter( @@ -163,7 +152,7 @@ export const StratigraphicColumnSelect = ({ disabled={stratColumnObject.stratColumn === undefined} label="Level 1 (group)" options={sortList( - stratUnitData.data.data + stratigraphicUnits .filter((s) => s.level === 1) .filter( (c) => @@ -201,7 +190,7 @@ export const StratigraphicColumnSelect = ({ disabled={stratColumnObject.level1 === undefined} label="Level 2 (formation)" options={sortList( - stratUnitData.data.data + stratigraphicUnits .filter((s) => s.level === 2) .filter( (c) => @@ -242,7 +231,7 @@ export const StratigraphicColumnSelect = ({ disabled={stratColumnObject.level2 === undefined} label="Level 3 (formation/subzone)" options={sortList( - stratUnitData.data.data + stratigraphicUnits .filter((s) => s.level === 3) .filter( (c) => diff --git a/src/features/HandleModel/SidePane/SidePane.tsx b/src/features/HandleModel/SidePane/SidePane.tsx index 8970984..d1516c0 100644 --- a/src/features/HandleModel/SidePane/SidePane.tsx +++ b/src/features/HandleModel/SidePane/SidePane.tsx @@ -6,7 +6,7 @@ import * as Styled from './SidePane.styled'; import { usePepmContextStore } from '../../../hooks/GlobalState'; export const SidePane = ({ uploading }: { uploading: boolean }) => { - const { setanalogueModelDefault } = usePepmContextStore(); + const { setAnalogueModelDefault } = usePepmContextStore(); const navigate = useNavigate(); const backItems: SidebarLinkProps = { @@ -31,7 +31,7 @@ export const SidePane = ({ uploading }: { uploading: boolean }) => { label={backItems.label} icon={backItems.icon} onClick={() => { - setanalogueModelDefault(); + setAnalogueModelDefault(); navigate('/'); }} > diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx index 2d4ba7c..2c698c0 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx @@ -22,7 +22,7 @@ type MenuItems = SidebarLinkProps & { }; export const ModelNavigationBar = () => { - const { setanalogueModelDefault } = usePepmContextStore(); + const { setAnalogueModelDefault } = usePepmContextStore(); const location = useLocation(); const navigate = useNavigate(); @@ -94,7 +94,7 @@ export const ModelNavigationBar = () => { label={backItems.label} icon={backItems.icon} onClick={() => { - setanalogueModelDefault(); + setAnalogueModelDefault(); navigate('/'); }} > diff --git a/src/hooks/GlobalState.tsx b/src/hooks/GlobalState.tsx index 8ab7081..d2dd54c 100644 --- a/src/hooks/GlobalState.tsx +++ b/src/hooks/GlobalState.tsx @@ -6,6 +6,7 @@ import { ComputeCaseDto, CountryDto, FieldDto, + GeologicalStandardDto, JobStatus, ModelAreaTypeDto, OutcropDto, @@ -42,6 +43,7 @@ type IPepmContext = { fields: FieldDto[]; stratigraphicColumns: StratColumnDto[]; stratigraphicUnits: StratUnitDto[]; + geologyStandards: GeologicalStandardDto[]; }; type IPepmContextActions = { setAnalogueModel: (analogueModel: AnalogueModelDetail) => void; @@ -54,6 +56,7 @@ type IPepmContextActions = { setFields: (fields: FieldDto[]) => void; setStratigraphicColumns: (fields: StratColumnDto[]) => void; setStratigraphicUnits: (fields: StratUnitDto[]) => void; + setGeologicalStandards: (geologyStandards: GeologicalStandardDto[]) => void; }; export const usePepmContextStore = create()( @@ -66,6 +69,7 @@ export const usePepmContextStore = create()( fields: [], stratigraphicColumns: [], stratigraphicUnits: [], + geologyStandards: [], setAnalogueModel: (analogueModel: AnalogueModelDetail) => set((state) => { state.analogueModel = analogueModel; @@ -106,5 +110,9 @@ export const usePepmContextStore = create()( set((state) => { state.stratigraphicUnits = stratigraphicUnits; }), + setGeologicalStandards: (geologyStandards: GeologicalStandardDto[]) => + set((state) => { + state.geologyStandards = geologyStandards; + }), })), ); diff --git a/src/hooks/useFetchGrossDepData.ts b/src/hooks/useFetchGrossDepData.ts index 1eb749d..9b02707 100644 --- a/src/hooks/useFetchGrossDepData.ts +++ b/src/hooks/useFetchGrossDepData.ts @@ -2,15 +2,17 @@ import { useMsal } from '@azure/msal-react'; import { useQuery } from '@tanstack/react-query'; import { MetadataService } from '../api/generated'; import { useAccessToken } from './useAccessToken'; +import { usePepmContextStore } from './GlobalState'; export const useFetchGrossDepData = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { geologyStandards } = usePepmContextStore(); const query = useQuery({ queryKey: ['smda-GDE'], queryFn: () => MetadataService.getApiMetadataSmdaMetadataGeologyStandards(), - enabled: !!token, + enabled: !!token && geologyStandards.length === 0, }); return query; diff --git a/src/hooks/useFetchOutcropData.ts b/src/hooks/useFetchOutcropData.ts index 7713a9b..b3d7e77 100644 --- a/src/hooks/useFetchOutcropData.ts +++ b/src/hooks/useFetchOutcropData.ts @@ -10,7 +10,7 @@ export const useFetchOutcropData = () => { const { outcrops } = usePepmContextStore(); const query = useQuery({ - queryKey: ['smda-GDE'], + queryKey: ['outcrop'], queryFn: () => OutcropsService.getApiOutcrops(), enabled: !!token && outcrops.length === 0, }); diff --git a/src/hooks/useFetchStratColData.ts b/src/hooks/useFetchStratColData.ts index c14dff2..455ead9 100644 --- a/src/hooks/useFetchStratColData.ts +++ b/src/hooks/useFetchStratColData.ts @@ -2,15 +2,17 @@ import { useMsal } from '@azure/msal-react'; import { useQuery } from '@tanstack/react-query'; import { MetadataService } from '../api/generated'; import { useAccessToken } from './useAccessToken'; +import { usePepmContextStore } from './GlobalState'; export const useFetchSmdaCountries = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { countries } = usePepmContextStore(); const query = useQuery({ queryKey: ['smda-countries'], queryFn: () => MetadataService.getApiMetadataSmdaMetadataCountries(), - enabled: !!token, + enabled: !!token && countries.length === 0, }); return query; @@ -19,11 +21,12 @@ export const useFetchSmdaCountries = () => { export const useFetchSmdaFields = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { fields } = usePepmContextStore(); const query = useQuery({ queryKey: ['smda-fields'], queryFn: () => MetadataService.getApiMetadataSmdaMetadataFields(), - enabled: !!token, + enabled: !!token && fields.length === 0, }); return query; @@ -32,12 +35,13 @@ export const useFetchSmdaFields = () => { export const useFetchSmdaStratigraphicColumns = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { stratigraphicColumns } = usePepmContextStore(); const query = useQuery({ queryKey: ['smda-strat-columns'], queryFn: () => MetadataService.getApiMetadataSmdaMetadataStratigraphicColumns(), - enabled: !!token, + enabled: !!token && stratigraphicColumns.length === 0, }); return query; @@ -46,12 +50,13 @@ export const useFetchSmdaStratigraphicColumns = () => { export const useFetchSmdaMetadataStratigraphicUnits = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { stratigraphicUnits } = usePepmContextStore(); const query = useQuery({ queryKey: ['smda-strat-units'], queryFn: () => MetadataService.getApiMetadataSmdaMetadataStratigraphicUnits(), - enabled: !!token, + enabled: !!token && stratigraphicUnits.length === 0, }); return query; diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index 2eba391..42270f2 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -1,3 +1,4 @@ +/* eslint-disable max-lines-per-function */ import { Outlet } from 'react-router-dom'; import { ModelNameFrame } from '../../../features/ModelView/ModelNameFrame/ModelNameFrame'; import { ModelNavigationBar } from '../../../features/ModelView/ModelNavigationBar/ModelNavigationBar'; @@ -14,6 +15,13 @@ import { useEffect } from 'react'; import { usePepmContextStore } from '../../../hooks/GlobalState'; import { useFetchModelAreas } from '../../../hooks/useFetchModelAreas'; import { useFetchOutcropData } from '../../../hooks/useFetchOutcropData'; +import { + useFetchSmdaCountries, + useFetchSmdaFields, + useFetchSmdaMetadataStratigraphicUnits, + useFetchSmdaStratigraphicColumns, +} from '../../../hooks/useFetchStratColData'; +import { useFetchGrossDepData } from '../../../hooks/useFetchGrossDepData'; // eslint-disable-next-line camelcase Icon.add({ mood_sad }); @@ -22,24 +30,58 @@ export const Model = () => { const { data, isLoading, failureReason } = useFetchModel(); const modelArea = useFetchModelAreas(); const outcropData = useFetchOutcropData(); + const countryData = useFetchSmdaCountries(); + const fieldData = useFetchSmdaFields(); + const stratColumnData = useFetchSmdaStratigraphicColumns(); + const stratUnitData = useFetchSmdaMetadataStratigraphicUnits(); + const geologyStandards = useFetchGrossDepData(); - const { setAnalogueModel, setModelAreaTypes, setOutcrops } = - usePepmContextStore(); + const { + setAnalogueModel, + setModelAreaTypes, + setOutcrops, + setCountries, + setFields, + setStratigraphicColumns, + setStratigraphicUnits, + setGeologicalStandards, + } = usePepmContextStore(); useEffect(() => { if (data) setAnalogueModel(data.data); if (modelArea.data?.data) setModelAreaTypes(modelArea.data.data); if (outcropData.data?.data) setOutcrops(outcropData.data.data); + if (geologyStandards.data?.data) + setGeologicalStandards(geologyStandards.data.data); }, [ data, + geologyStandards.data?.data, modelArea.data?.data, - outcropData.data?.data, setAnalogueModel, + setGeologicalStandards, setModelAreaTypes, setOutcrops, ]); + useEffect(() => { + if (countryData.data?.data) setCountries(countryData.data.data); + if (fieldData.data?.data) setFields(fieldData.data.data); + if (stratColumnData.data?.data) + setStratigraphicColumns(stratColumnData.data.data); + if (stratUnitData.data?.data) + setStratigraphicUnits(stratUnitData.data.data); + }, [ + countryData.data?.data, + fieldData.data?.data, + setCountries, + setFields, + setStratigraphicColumns, + setStratigraphicUnits, + stratColumnData.data?.data, + stratUnitData.data?.data, + ]); + if (failureReason) return ( From 6c4e57c095f2b08603925d8dad13718432f0d73a Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Tue, 5 Nov 2024 09:59:40 +0100 Subject: [PATCH 7/8] feat: Added new hook for compute settings --- src/hooks/useFetchComputeSettings.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/hooks/useFetchComputeSettings.tsx diff --git a/src/hooks/useFetchComputeSettings.tsx b/src/hooks/useFetchComputeSettings.tsx new file mode 100644 index 0000000..7de6298 --- /dev/null +++ b/src/hooks/useFetchComputeSettings.tsx @@ -0,0 +1,17 @@ +import { useQuery } from '@tanstack/react-query'; +import { useMsal } from '@azure/msal-react'; +import { useAccessToken } from './useAccessToken'; +import { ComputeSettingsService } from '../api/generated'; + +export const useFetchComputeSettings = () => { + const { instance, accounts } = useMsal(); + const token = useAccessToken(instance, accounts[0]); + + const query = useQuery({ + queryKey: ['compute-settings'], + queryFn: () => ComputeSettingsService.getApiComputeSettings(), + enabled: !!token, + }); + + return query; +}; From f0e02be8a698dddd991bd56b8708fa01ac2e7a8c Mon Sep 17 00:00:00 2001 From: Thomas L Fagermyr Date: Tue, 5 Nov 2024 10:01:07 +0100 Subject: [PATCH 8/8] feat: Updated model page to do most calls. Added multiple states in global context --- .../AreaCoordinates/AreaCoordinates.tsx | 6 ++--- src/features/Compute/CaseGroup/CaseGroup.tsx | 27 +++++-------------- .../VariogramResultTable.tsx | 9 +++---- src/hooks/GlobalState.tsx | 9 +++++++ src/hooks/useFetchCases.ts | 4 +++ .../Compute/ComputeObject/ComputeObject.tsx | 8 +++--- .../ComputeVariogram/ComputeVariogram.tsx | 6 ++--- src/pages/ModelPages/Model/Model.tsx | 13 +++++++++ .../Results/ObjectResult/ObjectResult.tsx | 6 ++--- .../VariogramResults/VariogramResults.tsx | 6 ++--- 10 files changed, 52 insertions(+), 42 deletions(-) diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx index 3845195..d3d0426 100644 --- a/src/components/AreaCoordinates/AreaCoordinates.tsx +++ b/src/components/AreaCoordinates/AreaCoordinates.tsx @@ -16,7 +16,6 @@ import { CoordinateDto, ModelAreaTypeDto, } from '../../api/generated'; -import { useFetchCases } from '../../hooks/useFetchCases'; import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates'; import { ErrorMessage } from '../ErrorMessage/ErrorMessage'; import { AnalogueModelImageView } from '../ImageView/AnalogueModelImageView'; @@ -86,11 +85,10 @@ export const AreaCoordinates = ({ const [fallbackAreaCoordinate, setfallbackAreaCoordinate] = useState(); const { modelId } = useParams(); - const { analogueModel, modelAreaTypes } = usePepmContextStore(); - const cases = useFetchCases(); + const { analogueModel, modelAreaTypes, computeCases } = usePepmContextStore(); const { activeAreaResultList } = useModelResults( activeArea.name, - cases.data?.data, + computeCases, ); const mutateAreaCoordinates = useMutateAreaCoordinates(); diff --git a/src/features/Compute/CaseGroup/CaseGroup.tsx b/src/features/Compute/CaseGroup/CaseGroup.tsx index 76e5607..5304ea0 100644 --- a/src/features/Compute/CaseGroup/CaseGroup.tsx +++ b/src/features/Compute/CaseGroup/CaseGroup.tsx @@ -1,16 +1,14 @@ /* eslint-disable max-lines */ /* eslint-disable max-lines-per-function */ -import { useMsal } from '@azure/msal-react'; import { Button, Icon, Tooltip } from '@equinor/eds-core-react'; import { add as ADD } from '@equinor/eds-icons'; -import { useMutation, useQuery } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; import { useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { AnalogueModelComputeCasesService, ComputeCaseDto, ComputeJobStatus, - ComputeSettingsService, CreateComputeCaseCommandForm, CreateComputeCaseInputSettingsForm, UpdateComputeCaseCommandForm, @@ -18,11 +16,10 @@ import { } from '../../../api/generated'; import { queryClient } from '../../../auth/queryClient'; import { CaseCardComponent } from '../../../components/CaseCardComponent/CaseCardComponent'; -import { useAccessToken } from '../../../hooks/useAccessToken'; -import { useFetchCases } from '../../../hooks/useFetchCases'; import * as Styled from './CaseGroup.styled'; import { CaseRow } from './CaseRow/CaseRow'; import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../hooks/GlobalState'; export const CaseGroup = ({ caseList, @@ -40,10 +37,8 @@ export const CaseGroup = ({ runCase: (computeCaseId: string) => void; }) => { const [localList, setLocalList] = useState([]); - const { data, isLoading } = useFetchCases(); + const { computeCases, computeSettings } = usePepmContextStore(); const { modelId } = useParams<{ modelId: string }>(); - const { instance, accounts } = useMsal(); - const token = useAccessToken(instance, accounts[0]); const isOwnerOrAdmin = useIsOwnerOrAdmin(); const saveApiCase = useMutation({ @@ -103,17 +98,9 @@ export const CaseGroup = ({ }, }); - const computeSettingsResponse = useQuery({ - queryKey: ['compute-settings'], - queryFn: () => ComputeSettingsService.getApiComputeSettings(), - enabled: !!token, - }); - const settingsFilter = (name: string) => { - if (computeSettingsResponse) { - return computeSettingsResponse.data?.data.filter( - (item) => item.name === name, - ); + if (computeSettings) { + return computeSettings.filter((item) => item.name === name); } }; @@ -302,7 +289,7 @@ export const CaseGroup = ({ }, [addCase, triggerAddCase]); const duplicateCase = (id: string) => { - const caseToDuplicate = data?.data.filter((c) => c.computeCaseId === id); + const caseToDuplicate = computeCases.filter((c) => c.computeCaseId === id); const randomLocalId = Math.floor(Math.random() * 100).toString(); if (caseToDuplicate) { const newCase: ComputeCaseDto = { @@ -327,7 +314,7 @@ export const CaseGroup = ({ } }; - if (isLoading || computeSettingsResponse.isLoading) return

Loading ...

; + if (computeSettings.length === 0) return

Loading ...

; return ( <> diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx index 5eae068..4b9d4f8 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx @@ -3,9 +3,9 @@ import { Typography } from '@equinor/eds-core-react'; import { EdsDataGrid } from '@equinor/eds-data-grid-react'; import { useState } from 'react'; import { GetVariogramResultsDto } from '../../../../../../api/generated'; -import { useFetchCases } from '../../../../../../hooks/useFetchCases'; import { ImageResult } from '../ImageResult/ImageResult'; import * as Styled from './VariogramResultTable.styled'; +import { usePepmContextStore } from '../../../../../../hooks/GlobalState'; interface ResultObjectType { variogramResultId: string; @@ -25,11 +25,10 @@ export const VariogramResultTable = ({ }: { resultList: GetVariogramResultsDto[]; }) => { + const { computeCases } = usePepmContextStore(); const [open, setOpen] = useState(false); const [imageId, setImageId] = useState(''); - const caseList = useFetchCases(); - const roundResultString = (value: number) => { if (value) { return value.toFixed(NumberOfDecimals); @@ -37,7 +36,7 @@ export const VariogramResultTable = ({ }; const resultElementsList: ResultObjectType[] = resultList.map((e) => { - const method = caseList.data?.data.filter( + const method = computeCases.filter( (c) => c.computeCaseId === e.computeCaseId, )[0]?.computeMethod?.name; let parameter = ''; @@ -49,7 +48,7 @@ export const VariogramResultTable = ({ parameter = e.attribute ? e.attribute : ''; } - const modelArea = caseList.data?.data.filter( + const modelArea = computeCases.filter( (c) => c.computeCaseId === e.computeCaseId, )[0]?.modelArea; diff --git a/src/hooks/GlobalState.tsx b/src/hooks/GlobalState.tsx index d2dd54c..b8d3da0 100644 --- a/src/hooks/GlobalState.tsx +++ b/src/hooks/GlobalState.tsx @@ -8,6 +8,7 @@ import { FieldDto, GeologicalStandardDto, JobStatus, + ListComputeSettingsMethodDto, ModelAreaTypeDto, OutcropDto, StratColumnDto, @@ -44,7 +45,9 @@ type IPepmContext = { stratigraphicColumns: StratColumnDto[]; stratigraphicUnits: StratUnitDto[]; geologyStandards: GeologicalStandardDto[]; + computeSettings: ListComputeSettingsMethodDto[]; }; + type IPepmContextActions = { setAnalogueModel: (analogueModel: AnalogueModelDetail) => void; setAnalogueModelDefault: () => void; @@ -57,6 +60,7 @@ type IPepmContextActions = { setStratigraphicColumns: (fields: StratColumnDto[]) => void; setStratigraphicUnits: (fields: StratUnitDto[]) => void; setGeologicalStandards: (geologyStandards: GeologicalStandardDto[]) => void; + setComputeSettings: (computeSettings: ListComputeSettingsMethodDto[]) => void; }; export const usePepmContextStore = create()( @@ -70,6 +74,7 @@ export const usePepmContextStore = create()( stratigraphicColumns: [], stratigraphicUnits: [], geologyStandards: [], + computeSettings: [], setAnalogueModel: (analogueModel: AnalogueModelDetail) => set((state) => { state.analogueModel = analogueModel; @@ -114,5 +119,9 @@ export const usePepmContextStore = create()( set((state) => { state.geologyStandards = geologyStandards; }), + setComputeSettings: (computeSettings: ListComputeSettingsMethodDto[]) => + set((state) => { + state.computeSettings = computeSettings; + }), })), ); diff --git a/src/hooks/useFetchCases.ts b/src/hooks/useFetchCases.ts index 1006412..e58290d 100644 --- a/src/hooks/useFetchCases.ts +++ b/src/hooks/useFetchCases.ts @@ -4,11 +4,13 @@ import { useMsal } from '@azure/msal-react'; import { useParams } from 'react-router-dom'; import { AnalogueModelComputeCasesService } from '../api/generated'; import { useAccessToken } from './useAccessToken'; +import { usePepmContextStore } from './GlobalState'; export const useFetchCases = () => { const { modelId } = useParams(); const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); + const { setComputeCases } = usePepmContextStore(); const query = useQuery({ queryKey: ['model-cases', modelId], @@ -20,5 +22,7 @@ export const useFetchCases = () => { refetchInterval: 30000, }); + if (query.data?.data) setComputeCases(query.data.data); + return query; }; diff --git a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx index e67a541..f8f1f41 100644 --- a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx +++ b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx @@ -7,9 +7,9 @@ import { EstimateObjectCommand, JobsService } from '../../../../api/generated'; import { queryClient } from '../../../../auth/queryClient'; import { CaseGroup } from '../../../../features/Compute/CaseGroup/CaseGroup'; import { ComputeHeader } from '../../../../features/Compute/ComputeHeader/ComputeHeader'; -import { useFetchCases } from '../../../../hooks/useFetchCases'; import * as Styled from '../Compute.styled'; import { CaseInfoTyoe } from '../ComputeVariogram/ComputeVariogram'; +import { usePepmContextStore } from '../../../../hooks/GlobalState'; const ObjectCaseInfo: CaseInfoTyoe = { type: 'Channel', @@ -30,7 +30,7 @@ export const ComputeObject = () => { setAlert(message); }; - const { data } = useFetchCases(); + const { computeCases } = usePepmContextStore(); const computeObject = useMutation({ mutationFn: JobsService.postApiJobsComputeObjectEstimations, @@ -54,11 +54,11 @@ export const ComputeObject = () => { }; // Returnerer Cases fra DB - const channel = data?.data.filter( + const channel = computeCases.filter( (method) => method.computeMethod.name === 'Channel', ); - const mouthbar = data?.data.filter( + const mouthbar = computeCases.filter( (method) => method.computeMethod.name === 'Mouthbar', ); diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx index f6dd996..7a6500e 100644 --- a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx +++ b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx @@ -11,9 +11,9 @@ import { import { queryClient } from '../../../../auth/queryClient'; import { CaseGroup } from '../../../../features/Compute/CaseGroup/CaseGroup'; import { ComputeHeader } from '../../../../features/Compute/ComputeHeader/ComputeHeader'; -import { useFetchCases } from '../../../../hooks/useFetchCases'; import * as Styled from '../Compute.styled'; import { useIsOwnerOrAdmin } from '../../../../hooks/useIsOwnerOrAdmin'; +import { usePepmContextStore } from '../../../../hooks/GlobalState'; export interface CaseInfoTyoe { type: string; @@ -54,10 +54,10 @@ export const ComputeVariogram = () => { setAlert(undefined); } - const { data } = useFetchCases(); + const { computeCases } = usePepmContextStore(); const methodFilter = (name: string) => { - return data?.data.filter((method) => method.computeMethod.name === name); + return computeCases.filter((method) => method.computeMethod.name === name); }; const Indicator = methodFilter('Indicator'); const NetToGross = methodFilter('Net-To-Gross'); diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index 42270f2..c896088 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -22,6 +22,8 @@ import { useFetchSmdaStratigraphicColumns, } from '../../../hooks/useFetchStratColData'; import { useFetchGrossDepData } from '../../../hooks/useFetchGrossDepData'; +import { useFetchCases } from '../../../hooks/useFetchCases'; +import { useFetchComputeSettings } from '../../../hooks/useFetchComputeSettings'; // eslint-disable-next-line camelcase Icon.add({ mood_sad }); @@ -35,9 +37,12 @@ export const Model = () => { const stratColumnData = useFetchSmdaStratigraphicColumns(); const stratUnitData = useFetchSmdaMetadataStratigraphicUnits(); const geologyStandards = useFetchGrossDepData(); + const cases = useFetchCases(); + const computeSettings = useFetchComputeSettings(); const { setAnalogueModel, + setComputeCases, setModelAreaTypes, setOutcrops, setCountries, @@ -45,23 +50,31 @@ export const Model = () => { setStratigraphicColumns, setStratigraphicUnits, setGeologicalStandards, + setComputeSettings, } = usePepmContextStore(); useEffect(() => { if (data) setAnalogueModel(data.data); + if (cases.data?.data) setComputeCases(cases.data.data); if (modelArea.data?.data) setModelAreaTypes(modelArea.data.data); if (outcropData.data?.data) setOutcrops(outcropData.data.data); if (geologyStandards.data?.data) setGeologicalStandards(geologyStandards.data.data); + if (computeSettings.data?.data) + setComputeSettings(computeSettings.data.data); }, [ + cases.data?.data, data, geologyStandards.data?.data, modelArea.data?.data, outcropData.data?.data, + computeSettings.data?.data, setAnalogueModel, + setComputeCases, setGeologicalStandards, setModelAreaTypes, setOutcrops, + setComputeSettings, ]); useEffect(() => { diff --git a/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx b/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx index 8bc1594..535d9ad 100644 --- a/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx +++ b/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx @@ -1,10 +1,10 @@ import { CaseResultView } from '../../../../features/Results/CaseResult/CaseResultView/CaseResultView'; import { NoResults } from '../../../../features/Results/NoResults/NoResults'; -import { useFetchCases } from '../../../../hooks/useFetchCases'; import { useFetchObjectResults } from '../../../../hooks/useFetchChannelResults'; +import { usePepmContextStore } from '../../../../hooks/GlobalState'; export const ObjectResult = () => { - const cases = useFetchCases(); + const { computeCases } = usePepmContextStore(); const { data, isLoading } = useFetchObjectResults(); const objectResults = data?.data; @@ -15,7 +15,7 @@ export const ObjectResult = () => { {objectResults !== undefined && objectResults.length > 0 ? ( ) : ( diff --git a/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx b/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx index 544c86a..bff5b86 100644 --- a/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx +++ b/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx @@ -1,11 +1,11 @@ import { CaseResultView } from '../../../../features/Results/CaseResult/CaseResultView/CaseResultView'; import { NoResults } from '../../../../features/Results/NoResults/NoResults'; -import { useFetchCases } from '../../../../hooks/useFetchCases'; +import { usePepmContextStore } from '../../../../hooks/GlobalState'; import { useFetchVariogramResults } from '../../../../hooks/useFetchVariogramResults'; export const VariogramResults = () => { const { data, isLoading } = useFetchVariogramResults(); - const cases = useFetchCases(); + const { computeCases } = usePepmContextStore(); const variogramResults = data?.data; if (isLoading) return <>Loading ...; @@ -15,7 +15,7 @@ export const VariogramResults = () => { {variogramResults !== undefined && variogramResults?.length > 0 ? ( ) : (