From 95c60a3d2c07cd2f42e6ae7c4c49b03e9c7558b1 Mon Sep 17 00:00:00 2001 From: Ruben Thoms Date: Fri, 3 Nov 2023 20:01:49 +0100 Subject: [PATCH] Added queries for response fetching --- .../components/filterSelect.tsx | 18 +- .../hooks/useRealizationResponses.ts | 67 +++++ .../InplaceVolumetricsNew/loadModule.tsx | 4 +- .../InplaceVolumetricsNew/settings.tsx | 27 +- .../modules/InplaceVolumetricsNew/state.ts | 12 +- .../modules/InplaceVolumetricsNew/view.tsx | 250 +----------------- 6 files changed, 119 insertions(+), 259 deletions(-) create mode 100644 frontend/src/modules/InplaceVolumetricsNew/hooks/useRealizationResponses.ts diff --git a/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx b/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx index 66421a8f9..17f1c4ca4 100644 --- a/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx +++ b/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx @@ -8,24 +8,30 @@ export type FilterSelectProps = { name: string; options: string[]; size: number; - onChange?: (value: string) => void; + onChange?: (values: string[]) => void; }; export const FilterSelect: React.FC = (props) => { - const [value, setValue] = useValidState("", props.options); + const [values, setValues] = React.useState([]); const selectOptions = props.options.map((option) => ({ value: `${option}`, label: `${option}` })); - function handleSelectionChange(values: string[]) { - setValue(values[0]); + function handleSelectionChange(newValues: string[]) { + setValues(newValues); if (props.onChange) { - props.onChange(values[0]); + props.onChange(newValues); } } return ( ); }; diff --git a/frontend/src/modules/InplaceVolumetricsNew/hooks/useRealizationResponses.ts b/frontend/src/modules/InplaceVolumetricsNew/hooks/useRealizationResponses.ts new file mode 100644 index 000000000..7d0d37d34 --- /dev/null +++ b/frontend/src/modules/InplaceVolumetricsNew/hooks/useRealizationResponses.ts @@ -0,0 +1,67 @@ +import { Body_get_realizations_response_api, EnsembleScalarResponse_api } from "@api"; +import { apiService } from "@framework/ApiService"; +import { EnsembleIdent } from "@framework/EnsembleIdent"; +import { QueriesOptions, UseQueryResult, useQueries } from "@tanstack/react-query"; + +const STALE_TIME = 60 * 1000; +const CACHE_TIME = 60 * 1000; + +export type ResponseData = { + data: Array<{ + ensembleIdent: EnsembleIdent; + tableName: string; + responseName: string; + responses?: EnsembleScalarResponse_api; + }>; + isFetching: boolean; +}; + +export function useRealizationsResponses( + ensembleIdents: EnsembleIdent[], + tableNames: string[], // also known as "source" + responseNames: string[], + filters?: Body_get_realizations_response_api +): ResponseData { + const queries = []; + const metaData: ResponseData["data"] = []; + + for (const ensembleIdent of ensembleIdents) { + for (const responseName of responseNames) { + for (const tableName of tableNames) { + queries.push({ + queryKey: ["getRealizationsResponse", ensembleIdent?.toString(), tableName, responseName], + queryFn: () => { + const caseUuid = ensembleIdent?.getCaseUuid(); + const ensembleName = ensembleIdent?.getEnsembleName(); + return apiService.inplaceVolumetrics.getRealizationsResponse( + caseUuid, + ensembleName, + tableName, + responseName, + filters + ); + }, + staleTime: STALE_TIME, + gcTime: CACHE_TIME, + enabled: Boolean(ensembleIdent && tableName && responseName), + }); + metaData.push({ + ensembleIdent, + tableName, + responseName, + }); + } + } + } + + return useQueries({ + queries, + combine: (results: UseQueryResult[]): ResponseData => ({ + data: results.map((result, index) => ({ + ...metaData[index], + responses: result.data, + })), + isFetching: results.some((result) => result.isFetching), + }), + }); +} diff --git a/frontend/src/modules/InplaceVolumetricsNew/loadModule.tsx b/frontend/src/modules/InplaceVolumetricsNew/loadModule.tsx index 1978583df..027885768 100644 --- a/frontend/src/modules/InplaceVolumetricsNew/loadModule.tsx +++ b/frontend/src/modules/InplaceVolumetricsNew/loadModule.tsx @@ -5,7 +5,9 @@ import { State } from "./state"; import { view } from "./view"; const defaultState: State = { - subModules: [], + selectedEnsembleIdents: [], + selectedResponseNames: [], + selectedTableNames: [], }; const module = ModuleRegistry.initModule("InplaceVolumetricsNew", defaultState); diff --git a/frontend/src/modules/InplaceVolumetricsNew/settings.tsx b/frontend/src/modules/InplaceVolumetricsNew/settings.tsx index fbb8bf8c3..7550fee8b 100644 --- a/frontend/src/modules/InplaceVolumetricsNew/settings.tsx +++ b/frontend/src/modules/InplaceVolumetricsNew/settings.tsx @@ -33,7 +33,10 @@ function findValidRealizations(ensembleIdents: EnsembleIdent[], ensembleSet: Ens } export const settings = ({ workbenchSession, moduleContext }: ModuleFCProps) => { - const [selectedEnsembleIdents, setSelectedEnsembleIdents] = React.useState([]); + const [selectedEnsembleIdents, setSelectedEnsembleIdents] = moduleContext.useStoreState("selectedEnsembleIdents"); + const [selectedResponseNames, setSelectedResponseNames] = moduleContext.useStoreState("selectedResponseNames"); + const [selectedTableNames, setSelectedTableNames] = moduleContext.useStoreState("selectedTableNames"); + const isEnsembleSetLoading = useIsEnsembleSetLoading(workbenchSession); const ensembleSet = useEnsembleSet(workbenchSession); @@ -51,12 +54,25 @@ export const settings = ({ workbenchSession, moduleContext }: ModuleFCProps; } + function handleSourceChange(values: string[]) { + setSelectedTableNames(values); + } + + function handleResponsesChange(values: string[]) { + setSelectedResponseNames(values); + } + const validRealizations = findValidRealizations(selectedEnsembleIdents, ensembleSet); return (
} expanded> - + } expanded>
@@ -77,7 +93,12 @@ export const settings = ({ workbenchSession, moduleContext }: ModuleFCProps - + {filterOptions && Object.entries(filterOptions.categories).map(([category, values]) => makeCategoricalSelect(category, values) diff --git a/frontend/src/modules/InplaceVolumetricsNew/state.ts b/frontend/src/modules/InplaceVolumetricsNew/state.ts index 34fae6955..b584c64e7 100644 --- a/frontend/src/modules/InplaceVolumetricsNew/state.ts +++ b/frontend/src/modules/InplaceVolumetricsNew/state.ts @@ -1,11 +1,7 @@ -export type SubModule = { - id: string; - relX: number; - relY: number; - relWidth: number; - relHeight: number; -}; +import { EnsembleIdent } from "@framework/EnsembleIdent"; export type State = { - subModules: SubModule[]; + selectedEnsembleIdents: EnsembleIdent[]; + selectedTableNames: string[]; + selectedResponseNames: string[]; }; diff --git a/frontend/src/modules/InplaceVolumetricsNew/view.tsx b/frontend/src/modules/InplaceVolumetricsNew/view.tsx index 35d131c06..9df3d52c7 100644 --- a/frontend/src/modules/InplaceVolumetricsNew/view.tsx +++ b/frontend/src/modules/InplaceVolumetricsNew/view.tsx @@ -1,258 +1,26 @@ import React from "react"; import { ModuleFCProps } from "@framework/Module"; -import { LayoutElement } from "@framework/Workbench"; -import { LayoutBox } from "@framework/components/LayoutBox"; import { useElementSize } from "@lib/hooks/useElementSize"; -import { Point, Rect } from "@lib/utils/geometry"; +import { useRealizationsResponses } from "./hooks/useRealizationResponses"; import { State } from "./state"; export const view = (props: ModuleFCProps) => { + const responseNames = props.moduleContext.useStoreValue("selectedResponseNames"); + const tableNames = props.moduleContext.useStoreValue("selectedTableNames"); + const ensembleIdents = props.moduleContext.useStoreValue("selectedEnsembleIdents"); const ref = React.useRef(null); - /* - - const [position, setPosition] = React.useState({ x: 0, y: 0 }); - const [pointer, setPointer] = React.useState({ x: -1, y: -1 }); - const [layout, setLayout] = React.useState([]); - const [tempLayoutBoxId, setTempLayoutBoxId] = React.useState(null); - const mainRef = React.useRef(null); const size = useElementSize(ref); - const layoutBoxRef = React.useRef(null); - const subModules = props.moduleContext.useStoreValue("subModules"); - - const convertLayoutRectToRealRect = React.useCallback( - (element: LayoutElement): Rect => { - return { - x: element.relX * size.width, - y: element.relY * size.height, - width: element.relWidth * size.width, - height: element.relHeight * size.height, - }; - }, - [size] - ); - - React.useEffect(() => { - let pointerDownPoint: Point | null = null; - let pointerDownElementPosition: Point | null = null; - let pointerDownElementId: string | null = null; - let relativePointerPosition: Point = { x: 0, y: 0 }; - let pointerToElementDiff: Point = { x: 0, y: 0 }; - let dragging = false; - let moduleInstanceId: string | null = null; - let moduleName: string | null = null; - setLayout(props.workbench.getLayout()); - let originalLayout: LayoutElement[] = props.workbench.getLayout(); - let currentLayout: LayoutElement[] = props.workbench.getLayout(); - let originalLayoutBox = makeLayoutBoxes(originalLayout); - let currentLayoutBox = originalLayoutBox; - layoutBoxRef.current = currentLayoutBox; - let lastTimeStamp = 0; - let lastMovePosition: Point = { x: 0, y: 0 }; - let delayTimer: ReturnType | null = null; - let isNewModule = false; - - const adjustLayout = () => { - if (currentLayoutBox && moduleInstanceId) { - const preview = currentLayoutBox.previewLayout( - relativePointerPosition, - size, - moduleInstanceId, - isNewModule - ); - if (preview) { - currentLayout = preview.toLayout(); - currentLayoutBox = preview; - } - setLayout(currentLayout); - layoutBoxRef.current = currentLayoutBox; - } - delayTimer = null; - }; - - const handleModuleHeaderPointerDown = (payload: GuiEventPayloads[GuiEvent.ModuleHeaderPointerDown]) => { - console.debug("handleModuleHeaderPointerDown", payload); - pointerDownPoint = payload.pointerPosition; - pointerDownElementPosition = payload.elementPosition; - pointerDownElementId = payload.moduleInstanceId; - isNewModule = false; - }; - - const handleNewModulePointerDown = (payload: GuiEventPayloads[GuiEvent.NewModulePointerDown]) => { - pointerDownPoint = payload.pointerPosition; - pointerDownElementPosition = payload.elementPosition; - pointerDownElementId = v4(); - setTempLayoutBoxId(pointerDownElementId); - isNewModule = true; - moduleName = payload.moduleName; - }; - - const handlePointerUp = (e: PointerEvent) => { - if (!pointerDownPoint) { - return; - } - if (dragging) { - if (delayTimer) { - clearTimeout(delayTimer); - adjustLayout(); - } - if (isNewModule && moduleName) { - const layoutElement = currentLayout.find((el) => el.moduleInstanceId === pointerDownElementId); - if (layoutElement) { - const instance = props.workbench.makeAndAddModuleInstance(moduleName, layoutElement); - layoutElement.moduleInstanceId = instance.getId(); - layoutElement.moduleName = instance.getName(); - } - } - setDraggedModuleInstanceId(null); - if (isNewModule) { - setTempLayoutBoxId(null); - } - currentLayoutBox = makeLayoutBoxes(currentLayout); - originalLayoutBox = currentLayoutBox; - layoutBoxRef.current = currentLayoutBox; - setLayout(currentLayout); - props.workbench.setLayout(currentLayout); - setPosition({ x: 0, y: 0 }); - setPointer({ x: -1, y: -1 }); - e.stopPropagation(); - e.preventDefault(); - } - pointerDownPoint = null; - pointerDownElementPosition = null; - pointerDownElementId = null; - moduleInstanceId = null; - dragging = false; - document.body.classList.remove("select-none"); - originalLayout = currentLayout; - }; - - const handlePointerMove = (e: PointerEvent) => { - if (!pointerDownPoint || !ref.current || !pointerDownElementId || !pointerDownElementPosition) { - return; - } - if (!dragging) { - if (pointDistance(pointerEventToPoint(e), pointerDownPoint) > MANHATTAN_LENGTH) { - setDraggedModuleInstanceId(pointerDownElementId); - moduleInstanceId = pointerDownElementId; - const rect = ref.current.getBoundingClientRect(); - setPosition(pointRelativeToDomRect(pointerDownElementPosition, rect)); - relativePointerPosition = pointRelativeToDomRect(pointerDownPoint, rect); - document.body.classList.add("select-none"); - dragging = true; - pointerToElementDiff = pointDifference(pointerDownPoint, pointerDownElementPosition); - lastTimeStamp = e.timeStamp; - lastMovePosition = pointerEventToPoint(e); - } - } else { - if (!pointerDownElementId || !pointerDownPoint) { - return; - } - const rect = ref.current.getBoundingClientRect(); - setPosition(pointDifference(pointDifference(pointerEventToPoint(e), rect), pointerToElementDiff)); - setPointer(pointDifference(pointerEventToPoint(e), rect)); - relativePointerPosition = pointDifference(pointerEventToPoint(e), rect); - const speed = pointDistance(pointerEventToPoint(e), lastMovePosition) / (e.timeStamp - lastTimeStamp); - lastTimeStamp = e.timeStamp; - lastMovePosition = pointerEventToPoint(e); - - if (!rectContainsPoint(addMarginToRect(rect, 25), pointerEventToPoint(e))) { - currentLayout = originalLayout; - currentLayoutBox = originalLayoutBox; - setLayout(currentLayout); - layoutBoxRef.current = currentLayoutBox; - if (delayTimer) { - clearTimeout(delayTimer); - delayTimer = null; - } - return; - } - - if (delayTimer && speed > 0.5) { - clearTimeout(delayTimer); - delayTimer = null; - } - if (delayTimer === null) { - delayTimer = setTimeout(adjustLayout, 500); - } - } - }; - - const handleButtonClick = (e: KeyboardEvent) => { - if (e.key === "Escape") { - if (delayTimer) { - clearTimeout(delayTimer); - } - setLayout(originalLayout); - currentLayout = originalLayout; - pointerDownPoint = null; - pointerDownElementPosition = null; - pointerDownElementId = null; - setDraggedModuleInstanceId(null); - moduleInstanceId = null; - dragging = false; - document.body.classList.remove("select-none"); - originalLayout = currentLayout; - currentLayoutBox = makeLayoutBoxes(currentLayout); - originalLayoutBox = currentLayoutBox; - setLayout(currentLayout); - isNewModule = false; - setTempLayoutBoxId(null); - } - }; - - const handleRemoveModuleInstanceRequest = (payload: GuiEventPayloads[GuiEvent.RemoveModuleInstanceRequest]) => { - if (delayTimer) { - clearTimeout(delayTimer); - } - if (dragging) { - return; - } - props.workbench.removeModuleInstance(payload.moduleInstanceId); - currentLayoutBox.removeLayoutElement(payload.moduleInstanceId); - currentLayout = currentLayoutBox.toLayout(); - setLayout(currentLayout); - originalLayout = currentLayout; - originalLayoutBox = currentLayoutBox; - props.workbench.setLayout(currentLayout); - }; - - const removeModuleHeaderPointerDownSubscriber = guiMessageBroker.subscribeToEvent( - GuiEvent.ModuleHeaderPointerDown, - handleModuleHeaderPointerDown - ); - const removeNewModulePointerDownSubscriber = guiMessageBroker.subscribeToEvent( - GuiEvent.NewModulePointerDown, - handleNewModulePointerDown - ); - const removeRemoveModuleInstanceRequestSubscriber = guiMessageBroker.subscribeToEvent( - GuiEvent.RemoveModuleInstanceRequest, - handleRemoveModuleInstanceRequest - ); - - document.addEventListener("pointerup", handlePointerUp); - document.addEventListener("pointermove", handlePointerMove); - document.addEventListener("keydown", handleButtonClick); - - return () => { - removeModuleHeaderPointerDownSubscriber(); - removeNewModulePointerDownSubscriber(); - removeRemoveModuleInstanceRequestSubscriber(); - document.removeEventListener("pointerup", handlePointerUp); - document.removeEventListener("pointermove", handlePointerMove); - document.removeEventListener("keydown", handleButtonClick); - if (delayTimer) { - clearTimeout(delayTimer); - } - }; - }, [size, moduleInstances]); - */ + const tableData = useRealizationsResponses(ensembleIdents, tableNames, responseNames); return (
- View + {JSON.stringify(ensembleIdents)} + {JSON.stringify(responseNames)} + {JSON.stringify(tableNames)} + {JSON.stringify(tableData)}
); };