Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use study-config-server to store network visualization parameters per study #2449

Merged
merged 9 commits into from
Dec 19, 2024
Merged

Use study-config-server to store network visualization parameters per study #2449

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3fb2dcc
sounds ok (wip + todo fix validate button)
dbraquart Dec 12, 2024
f2f21cc
Merge remote-tracking branch 'origin/main' into dbraquart/use-study-c…
dbraquart Dec 12, 2024
a7933f3
avoid null value
dbraquart Dec 13, 2024
47959b4
update redux callers
dbraquart Dec 13, 2024
14a5296
Merge remote-tracking branch 'origin/main' into dbraquart/use-study-c…
dbraquart Dec 13, 2024
f33f876
prettier fix after merge
dbraquart Dec 13, 2024
8db17c1
Merge branch 'main' into dbraquart/use-study-config-server
dbraquart Dec 17, 2024
e7a038f
Merge remote-tracking branch 'origin/main' into dbraquart/use-study-c…
dbraquart Dec 19, 2024
c5f17c3
rev remark and prettier after conflicts
dbraquart Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 31 additions & 63 deletions src/components/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,11 @@ import { FormattedMessage } from 'react-intl';
import {
APP_NAME,
COMMON_APP_NAME,
PARAM_CENTER_LABEL,
PARAM_COMPONENT_LIBRARY,
PARAM_DEVELOPER_MODE,
PARAM_DIAGONAL_LABEL,
PARAM_FAVORITE_CONTINGENCY_LISTS,
PARAM_FLUX_CONVENTION,
PARAM_INIT_NAD_WITH_GEO_DATA,
PARAM_LANGUAGE,
PARAM_LIMIT_REDUCTION,
PARAM_LINE_FLOW_ALERT_THRESHOLD,
PARAM_LINE_FLOW_COLOR_MODE,
PARAM_LINE_FLOW_MODE,
PARAM_LINE_FULL_PATH,
PARAM_LINE_PARALLEL_PATH,
PARAM_MAP_BASEMAP,
PARAM_MAP_MANUAL_REFRESH,
PARAM_SUBSTATION_LAYOUT,
PARAM_THEME,
PARAM_USE_NAME,
} from '../utils/config-params';
Expand All @@ -64,29 +52,19 @@ import {
changeLockedColumns,
changeReorderedColumns,
limitReductionModified,
selectCenterLabelState,
selectComponentLibrary,
selectComputedLanguage,
selectDiagonalLabelState,
selectEnableDeveloperMode,
selectFavoriteContingencyLists,
selectFluxConvention,
selectInitNadWithGeoData,
selectLanguage,
selectLimitReduction,
selectLineFlowAlertThreshold,
selectLineFlowColorMode,
selectLineFlowMode,
selectLineFullPathState,
selectLineParallelPathState,
selectMapBaseMap,
selectMapManualRefresh,
selectSubstationLayout,
selectTheme,
selectUseName,
setOptionalServices,
setParamsLoaded,
setUpdateNetworkVisualizationParameters,
} from '../redux/actions';
import { getNetworkVisualizationParameters } from '../services/study/study-config.ts';

const noUserManager = { instance: null, error: null };

Expand All @@ -96,6 +74,7 @@ const App = () => {
const { snackError } = useSnackMessage();

const user = useSelector((state) => state.user);
const studyUuid = useSelector((state) => state.studyUuid);
const tablesNamesIndexes = useSelector((state) => state.tables.namesIndexes);
const tablesDefinitionIndexes = useSelector((state) => state.tables.definitionIndexes);

Expand All @@ -113,6 +92,14 @@ const App = () => {

const [tabIndex, setTabIndex] = useState(0);

const updateNetworkVisualizationsParams = useCallback(
(params) => {
console.debug('received network visualizations parameters : ', params);
dispatch(setUpdateNetworkVisualizationParameters(params));
},
[dispatch]
);

const updateParams = useCallback(
(params) => {
console.debug('received UI parameters : ', params);
Expand All @@ -132,51 +119,15 @@ const App = () => {
dispatch(selectLanguage(param.value));
dispatch(selectComputedLanguage(getComputedLanguage(param.value)));
break;
case PARAM_CENTER_LABEL:
dispatch(selectCenterLabelState(param.value === 'true'));
break;
case PARAM_DIAGONAL_LABEL:
dispatch(selectDiagonalLabelState(param.value === 'true'));
break;
case PARAM_LIMIT_REDUCTION:
dispatch(selectLimitReduction(param.value));
break;
case PARAM_LINE_FLOW_ALERT_THRESHOLD:
dispatch(selectLineFlowAlertThreshold(param.value));
break;
case PARAM_LINE_FLOW_COLOR_MODE:
dispatch(selectLineFlowColorMode(param.value));
break;
case PARAM_LINE_FLOW_MODE:
dispatch(selectLineFlowMode(param.value));
break;
case PARAM_FLUX_CONVENTION:
dispatch(selectFluxConvention(param.value));
break;
case PARAM_DEVELOPER_MODE:
dispatch(selectEnableDeveloperMode(param.value === 'true'));
break;
case PARAM_INIT_NAD_WITH_GEO_DATA:
dispatch(selectInitNadWithGeoData(param.value === 'true'));
break;
case PARAM_LINE_FULL_PATH:
dispatch(selectLineFullPathState(param.value === 'true'));
break;
case PARAM_LINE_PARALLEL_PATH:
dispatch(selectLineParallelPathState(param.value === 'true'));
break;
case PARAM_SUBSTATION_LAYOUT:
dispatch(selectSubstationLayout(param.value));
break;
case PARAM_COMPONENT_LIBRARY:
dispatch(selectComponentLibrary(param.value));
break;
case PARAM_MAP_MANUAL_REFRESH:
dispatch(selectMapManualRefresh(param.value === 'true'));
break;
case PARAM_MAP_BASEMAP:
dispatch(selectMapBaseMap(param.value));
break;
case PARAM_USE_NAME:
dispatch(selectUseName(param.value === 'true'));
break;
Expand Down Expand Up @@ -343,7 +294,11 @@ const App = () => {
}, [initialMatchSilentRenewCallbackUrl, dispatch, initialMatchSigninCallbackUrl]);

useEffect(() => {
if (user !== null) {
if (user !== null && studyUuid !== null) {
const fetchNetworkVisualizationParametersPromise = getNetworkVisualizationParameters(studyUuid).then(
(params) => updateNetworkVisualizationsParams(params)
);

const fetchCommonConfigPromise = fetchConfigParameters(COMMON_APP_NAME).then((params) =>
updateParams(params)
);
Expand Down Expand Up @@ -409,7 +364,12 @@ const App = () => {
// This might not be necessary but allows to gradually migrate parts
// of the code that don't subscribe to exactly the parameters they need.
// Code that depends on this could be rewritten to depend on what it acually needs.
Promise.all([fetchCommonConfigPromise, fetchAppConfigPromise, fetchOptionalServices])
Promise.all([
fetchNetworkVisualizationParametersPromise,
fetchCommonConfigPromise,
fetchAppConfigPromise,
fetchOptionalServices,
])
.then(() => {
dispatch(setParamsLoaded());
})
Expand All @@ -425,7 +385,15 @@ const App = () => {
ws.close();
};
}
}, [user, dispatch, updateParams, connectNotificationsUpdateConfig, snackError]);
}, [
user,
studyUuid,
dispatch,
updateParams,
connectNotificationsUpdateConfig,
snackError,
updateNetworkVisualizationsParams,
]);

const onChangeTab = useCallback((newTabIndex) => {
setTabIndex(newTabIndex);
Expand Down
61 changes: 36 additions & 25 deletions src/components/diagrams/diagram-pane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,7 @@

import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
PARAM_CENTER_LABEL,
PARAM_COMPONENT_LIBRARY,
PARAM_DIAGONAL_LABEL,
PARAM_INIT_NAD_WITH_GEO_DATA,
PARAM_LANGUAGE,
PARAM_SUBSTATION_LAYOUT,
PARAM_USE_NAME,
} from '../../utils/config-params';
import { PARAM_LANGUAGE, PARAM_USE_NAME } from '../../utils/config-params';
import { Box, Chip, Stack, Theme } from '@mui/material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import TimelineIcon from '@mui/icons-material/Timeline';
Expand Down Expand Up @@ -60,11 +52,8 @@ const useDisplayView = (studyUuid: UUID, currentNode: CurrentTreeNode) => {
const { snackError } = useSnackMessage();
const paramUseName = useSelector((state: AppState) => state[PARAM_USE_NAME]);
const { getNameOrId } = useNameOrId();
const centerName = useSelector((state: AppState) => state[PARAM_CENTER_LABEL]);
const diagonalName = useSelector((state: AppState) => state[PARAM_DIAGONAL_LABEL]);
const substationLayout = useSelector((state: AppState) => state[PARAM_SUBSTATION_LAYOUT]);
const componentLibrary = useSelector((state: AppState) => state[PARAM_COMPONENT_LIBRARY]);
const language = useSelector((state: AppState) => state[PARAM_LANGUAGE]);
const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);

const checkAndGetVoltageLevelSingleLineDiagramUrl = useCallback(
(voltageLevelId: UUID) =>
Expand All @@ -74,14 +63,22 @@ const useDisplayView = (studyUuid: UUID, currentNode: CurrentTreeNode) => {
currentNode?.id,
voltageLevelId,
paramUseName,
centerName,
diagonalName,
componentLibrary,
networkVisuParams.singleLineDiagramParameters.centerLabel,
networkVisuParams.singleLineDiagramParameters.diagonalLabel,
networkVisuParams.singleLineDiagramParameters.componentLibrary,
SLD_DISPLAY_MODE.STATE_VARIABLE,
language
)
: null,
[currentNode, studyUuid, paramUseName, centerName, diagonalName, componentLibrary, language]
[
currentNode,
studyUuid,
paramUseName,
networkVisuParams.singleLineDiagramParameters.centerLabel,
networkVisuParams.singleLineDiagramParameters.diagonalLabel,
networkVisuParams.singleLineDiagramParameters.componentLibrary,
language,
]
);

const checkAndGetSubstationSingleLineDiagramUrl = useCallback(
Expand All @@ -92,22 +89,36 @@ const useDisplayView = (studyUuid: UUID, currentNode: CurrentTreeNode) => {
currentNode?.id,
voltageLevelId,
paramUseName,
centerName,
diagonalName,
substationLayout,
componentLibrary,
networkVisuParams.singleLineDiagramParameters.centerLabel,
networkVisuParams.singleLineDiagramParameters.diagonalLabel,
networkVisuParams.singleLineDiagramParameters.substationLayout,
networkVisuParams.singleLineDiagramParameters.componentLibrary,
language
)
: null,
[centerName, componentLibrary, diagonalName, studyUuid, substationLayout, paramUseName, currentNode, language]
[
networkVisuParams.singleLineDiagramParameters.centerLabel,
networkVisuParams.singleLineDiagramParameters.componentLibrary,
networkVisuParams.singleLineDiagramParameters.diagonalLabel,
studyUuid,
networkVisuParams.singleLineDiagramParameters.substationLayout,
paramUseName,
currentNode,
language,
]
);
const initNadWithGeoData = useSelector((state: AppState) => state[PARAM_INIT_NAD_WITH_GEO_DATA]);
const checkAndGetNetworkAreaDiagramUrl = useCallback(
(voltageLevelsIds: UUID[], depth: number) =>
isNodeBuilt(currentNode)
? getNetworkAreaDiagramUrl(studyUuid, currentNode?.id, voltageLevelsIds, depth, initNadWithGeoData)
? getNetworkAreaDiagramUrl(
studyUuid,
currentNode?.id,
voltageLevelsIds,
depth,
networkVisuParams.networkAreaDiagramParameters.initNadWithGeoData
)
: null,
[studyUuid, currentNode, initNadWithGeoData]
[studyUuid, currentNode, networkVisuParams.networkAreaDiagramParameters.initNadWithGeoData]
);

// this callback returns a promise
Expand Down
7 changes: 3 additions & 4 deletions src/components/diagrams/networkAreaDiagram/network-area-diagram-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import { mergeSx } from '../../utils/functions';
import ComputingType from '../../computing-status/computing-type';
import { AppState } from 'redux/reducer';
import { storeNetworkAreaDiagramNodeMovement } from '../../../redux/actions';
import { PARAM_INIT_NAD_WITH_GEO_DATA } from '../../../utils/config-params';
import { getNadIdentifier } from '../diagram-utils';
import EquipmentPopover from 'components/tooltips/equipment-popover';
import { UUID } from 'crypto';
Expand Down Expand Up @@ -156,16 +155,16 @@ function NetworkAreaDiagramContent(props: NetworkAreaDiagramContentProps) {
const loadFlowStatus = useSelector((state: AppState) => state.computingStatus[ComputingType.LOAD_FLOW]);
const nadNodeMovements = useSelector((state: AppState) => state.nadNodeMovements);
const diagramStates = useSelector((state: AppState) => state.diagramStates);
const initNadWithGeoData = useSelector((state: AppState) => state[PARAM_INIT_NAD_WITH_GEO_DATA]);
const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);
const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
const [anchorPosition, setAnchorPosition] = useState({ top: 0, left: 0 });
const [hoveredEquipmentId, setHoveredEquipmentId] = useState('');
const [hoveredEquipmentType, setHoveredEquipmentType] = useState('');
const studyUuid = useSelector((state: AppState) => state.studyUuid);

const nadIdentifier = useMemo(() => {
return getNadIdentifier(diagramStates, initNadWithGeoData);
}, [diagramStates, initNadWithGeoData]);
return getNadIdentifier(diagramStates, networkVisuParams.networkAreaDiagramParameters.initNadWithGeoData);
}, [diagramStates, networkVisuParams.networkAreaDiagramParameters.initNadWithGeoData]);

const onMoveNodeCallback = useCallback(
(equipmentId: string, nodeId: string, x: number, y: number, xOrig: number, yOrig: number) => {
Expand Down
29 changes: 15 additions & 14 deletions src/components/diagrams/singleLineDiagram/position-diagram-pane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@
import Dialog from '@mui/material/Dialog';
import { useCallback, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import {
PARAM_CENTER_LABEL,
PARAM_COMPONENT_LIBRARY,
PARAM_DIAGONAL_LABEL,
PARAM_LANGUAGE,
PARAM_USE_NAME,
} from '../../../utils/config-params';
import { PARAM_LANGUAGE, PARAM_USE_NAME } from '../../../utils/config-params';
import PositionDiagram from './position-diagram';
import { SLD_DISPLAY_MODE } from '../../network/constants';
import { DiagramType } from '../diagram-common';
Expand All @@ -39,10 +33,8 @@ const PositionDiagramPane: FC<PositionDiagramPaneProps> = ({
studyUuid,
}) => {
const useName = useSelector((state: AppState) => state[PARAM_USE_NAME]);
const centerName = useSelector((state: AppState) => state[PARAM_CENTER_LABEL]);
const diagonalName = useSelector((state: AppState) => state[PARAM_DIAGONAL_LABEL]);
const componentLibrary = useSelector((state: AppState) => state[PARAM_COMPONENT_LIBRARY]);
const language = useSelector((state: AppState) => state[PARAM_LANGUAGE]);
const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);

const [svgUrl, setSvgUrl] = useState<string | null>(null);
const handleClose = () => {
Expand All @@ -57,13 +49,22 @@ const PositionDiagramPane: FC<PositionDiagramPaneProps> = ({
currentNodeUuid,
voltageLevelId?.id,
useName,
centerName,
diagonalName,
componentLibrary,
networkVisuParams.singleLineDiagramParameters.centerLabel,
networkVisuParams.singleLineDiagramParameters.diagonalLabel,
networkVisuParams.singleLineDiagramParameters.componentLibrary,
SLD_DISPLAY_MODE.FEEDER_POSITION,
language
),
[studyUuid, currentNodeUuid, voltageLevelId?.id, useName, centerName, diagonalName, componentLibrary, language]
[
studyUuid,
currentNodeUuid,
voltageLevelId?.id,
useName,
networkVisuParams.singleLineDiagramParameters.centerLabel,
networkVisuParams.singleLineDiagramParameters.diagonalLabel,
networkVisuParams.singleLineDiagramParameters.componentLibrary,
language,
]
);

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/dialogs/parameters/network-visualizations/network-visualizations-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,15 @@ export const networkVisualizationParametersSchema = yup.object().shape({
[PARAM_LINE_PARALLEL_PATH]: yup.boolean(),
[PARAM_LINE_FLOW_MODE]: yup.string(),
[PARAM_LINE_FLOW_COLOR_MODE]: yup.string(),
[PARAM_LINE_FLOW_ALERT_THRESHOLD]: yup.number().positive(),
[PARAM_LINE_FLOW_ALERT_THRESHOLD]: yup.number().positive().max(100),
[PARAM_MAP_MANUAL_REFRESH]: yup.boolean(),
[PARAM_MAP_BASEMAP]: yup.string(),
}),
[TabValue.SINGLE_LINE_DIAGRAM]: yup.object().shape({
[PARAM_DIAGONAL_LABEL]: yup.boolean(),
[PARAM_CENTER_LABEL]: yup.boolean(),
[PARAM_SUBSTATION_LAYOUT]: yup.string(),
[PARAM_COMPONENT_LIBRARY]: yup.string().nullable(),
[PARAM_COMPONENT_LIBRARY]: yup.string(),
}),
[TabValue.NETWORK_AREA_DIAGRAM]: yup.object().shape({
[PARAM_INIT_NAD_WITH_GEO_DATA]: yup.boolean(),
Expand Down
Loading
Loading