Skip to content

Commit

Permalink
feat: make scenario parameters collapsable and move it above dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@nborde-CSM
nborde-CSM committed Feb 25, 2022
1 parent 3d8dd1b commit 04f971f
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 70 deletions.
147 changes: 96 additions & 51 deletions src/components/ScenarioParameters/ScenarioParameters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@

import React, { useEffect, useMemo, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Grid, makeStyles, Typography } from '@material-ui/core';
import { Grid, makeStyles, Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { SCENARIO_PARAMETERS_CONFIG } from '../../config/ScenarioParameters';
import { DATASET_ID_VARTYPE, SCENARIO_RUN_STATE } from '../../services/config/ApiConstants';
import { EditModeButton, NormalModeButton, ScenarioParametersTabs } from './components';
Expand All @@ -29,6 +30,24 @@ const useStyles = makeStyles((theme) => ({
alignItems: 'center',
margin: `0 ${theme.spacing(3)}px`,
},
accordion: {
backgroundColor: theme.palette.background.card,
},
accordionSummary: {
flexDirection: 'row-reverse',
marginLeft: '-10px',
},
accordionDetailsContent: {
width: '100%',
},
gridContainerSummary: {
direction: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
gridSummary: {
marginLeft: '10px',
},
}));

const getRunTemplateParametersIds = (runTemplatesParametersIdsDict, runTemplateId) => {
Expand Down Expand Up @@ -134,6 +153,11 @@ const ScenarioParameters = ({
setParametersValuesToRender(generateParametersValuesToRenderFromParametersValuesRef());
};

// Add accordion expand status in state
const [accordionSummaryExpanded, setAccordionSummaryExpanded] = useState(
localStorage.getItem('parametersAccordionExpanded') === 'true'
);

// Generate input components for each scenario parameters tab
for (const parametersGroupMetadata of parametersGroupsMetadata) {
parametersGroupMetadata.tab = ScenarioParametersTabFactory.create(
Expand Down Expand Up @@ -193,23 +217,36 @@ const ScenarioParameters = ({
return parametersData.concat(additionalParameters);
};

const startParametersEdition = () => changeEditMode(true);
const askDiscardConfirmation = () => setShowDiscardConfirmationPopup(true);
const cancelDiscard = () => setShowDiscardConfirmationPopup(false);
const confirmDiscard = () => {
setShowDiscardConfirmationPopup(false);
changeEditMode(false);
discardLocalChanges();
const startParametersEdition = (event) => {
if (!accordionSummaryExpanded) {
setAccordionSummaryExpanded(true);
} else {
event.stopPropagation();
}
changeEditMode(true);
};

const startScenarioLaunch = async () => {
const askDiscardConfirmation = (event) => {
event.stopPropagation();
setShowDiscardConfirmationPopup(true);
};
const startScenarioLaunch = async (event) => {
event.stopPropagation();
await processScenarioLaunch(ScenarioParametersUtils.shouldForceUpdateScenarioParameters());
};

const startScenarioUpdateAndLaunch = async () => {
const startScenarioUpdateAndLaunch = async (event) => {
event.stopPropagation();
await processScenarioLaunch(true);
};

const cancelDiscard = () => {
setShowDiscardConfirmationPopup(false);
};
const confirmDiscard = () => {
setShowDiscardConfirmationPopup(false);
changeEditMode(false);
discardLocalChanges();
};

const processScenarioLaunch = async (forceUpdate) => {
// If scenario parameters have never been updated, force parameters update
if (!currentScenario.data.parametersValues || currentScenario.data.parametersValues.length === 0) {
Expand All @@ -233,50 +270,58 @@ const ScenarioParameters = ({
const noTabsShown = parametersGroupsMetadata.length === 0;
const isCurrentScenarioRunning = currentScenario.data.state === SCENARIO_RUN_STATE.RUNNING;

const handleSummaryClick = () => {
const expandedNewState = !accordionSummaryExpanded;
localStorage.setItem('scenarioParametersAccordionExpanded', expandedNewState);
setAccordionSummaryExpanded(expandedNewState);
};

return (
<div>
<Grid container direction="column" justifyContent="center" alignContent="flex-start">
<Grid
container
className={classes.root}
direction="row"
justifyContent="space-between"
alignContent="flex-start"
spacing={5}
<Accordion className={classes.accordion} expanded={accordionSummaryExpanded}>
<AccordionSummary
data-cy="scenario-params-accordion-summary"
className={classes.accordionSummary}
expandIcon={<ExpandMoreIcon />}
onClick={handleSummaryClick}
>
<Grid item>
<Typography variant="subtitle1">
{t('genericcomponent.text.scenario.parameters.title', 'Scenario parameters')}
</Typography>
</Grid>
<PermissionsGate authorizedPermissions={[PERMISSIONS.canEditOrLaunchScenario]}>
<Grid container className={classes.gridContainerSummary}>
<Grid className={classes.gridSummary}>
<Typography variant="subtitle1">
{t('genericcomponent.text.scenario.parameters.title', 'Scenario parameters')}
</Typography>
</Grid>
<Grid item>
{editMode ? (
<EditModeButton
classes={classes}
handleClickOnDiscardChange={askDiscardConfirmation}
handleClickOnUpdateAndLaunchScenario={startScenarioUpdateAndLaunch}
/>
) : (
<NormalModeButton
classes={classes}
handleClickOnEdit={startParametersEdition}
handleClickOnLaunchScenario={startScenarioLaunch}
editDisabled={noTabsShown || isCurrentScenarioRunning}
runDisabled={isCurrentScenarioRunning}
/>
)}
<PermissionsGate authorizedPermissions={[PERMISSIONS.canEditOrLaunchScenario]}>
{editMode ? (
<EditModeButton
classes={classes}
handleClickOnDiscardChange={(event) => askDiscardConfirmation(event)}
handleClickOnUpdateAndLaunchScenario={(event) => startScenarioUpdateAndLaunch(event)}
/>
) : (
<NormalModeButton
classes={classes}
handleClickOnEdit={(event) => startParametersEdition(event)}
handleClickOnLaunchScenario={(event) => startScenarioLaunch(event)}
editDisabled={noTabsShown || isCurrentScenarioRunning}
runDisabled={isCurrentScenarioRunning}
/>
)}
</PermissionsGate>
</Grid>
</PermissionsGate>
</Grid>
</Grid>
<Grid item className={classes.tabs}>
{
<form onSubmit={preventSubmit}>
<ScenarioParametersTabs parametersGroupsMetadata={parametersGroupsMetadata} userRoles={userRoles} />
</form>
}
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails>
<div item className={classes.accordionDetailsContent}>
{
<form onSubmit={preventSubmit}>
<ScenarioParametersTabs parametersGroupsMetadata={parametersGroupsMetadata} userRoles={userRoles} />
</form>
}
</div>
</AccordionDetails>
</Accordion>
<SimpleTwoActionsDialog
id={'discard-changes'}
open={showDiscardConfirmationPopup}
Expand Down
39 changes: 20 additions & 19 deletions src/views/Scenario/Scenario.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ const useStyles = makeStyles((theme) => ({
flexGrow: 1,
height: '100%',
},
powerBICard: {
height: '400px',
},
}));

const Scenario = (props) => {
Expand Down Expand Up @@ -220,24 +223,7 @@ const Scenario = (props) => {
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Card style={{ height: '400px' }}>
<SimplePowerBIReportEmbed
reports={reports}
reportConfiguration={SCENARIO_DASHBOARD_CONFIG}
scenario={currentScenario.data}
lang={i18n.language}
downloadLogsFile={() => {
ScenarioRunService.downloadLogsFile(currentScenario.data?.lastRun, LOG_TYPES[SCENARIO_RUN_LOG_TYPE]);
}}
labels={reportLabels}
useAAD={USE_POWER_BI_WITH_USER_CREDENTIALS}
/>
</Card>
</Grid>
<Grid item xs={12}>
<Card>
<Grid item xs={12}>
{currentScenario.data && (
<ScenarioParameters
editMode={editMode}
Expand All @@ -254,9 +240,24 @@ const Scenario = (props) => {
userRoles={user.roles}
/>
)}
</Card>
</Grid>
</Grid>
</Grid>
<Grid>
<Card className={classes.powerBICard}>
<SimplePowerBIReportEmbed
reports={reports}
reportConfiguration={SCENARIO_DASHBOARD_CONFIG}
scenario={currentScenario.data}
lang={i18n.language}
downloadLogsFile={() => {
ScenarioRunService.downloadLogsFile(currentScenario.data?.lastRun, LOG_TYPES[SCENARIO_RUN_LOG_TYPE]);
}}
labels={reportLabels}
useAAD={USE_POWER_BI_WITH_USER_CREDENTIALS}
/>
</Card>
</Grid>
</>
);
};
Expand Down

0 comments on commit 04f971f

Please sign in to comment.