#230 scenario viewer adjustments (#241)

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

gui/src/ScenarioViewer.tsx

@@ -53,7 +53,6 @@ interface ScenarioViewerProps {
     id?: string;
     expandable?: boolean;
     expanded?: boolean;
-    defaultExpanded?: boolean;
     updateVarName?: string;
     defaultScenario?: string;
     scenario?: ScenarioFull | Array<ScenarioFull>;
@@ -233,6 +232,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
     const {
         id = "",
         expandable = true,
+        expanded = true,
         showConfig = false,
         showCycle = false,
         showDelete = true,
@@ -240,7 +240,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
         showPipelines = true,
         showSubmit = true,
         showSubmitPipelines = true,
-        showTags = false,
+        showTags = true,
     } = props;
 
     const dispatch = useDispatch();
@@ -250,7 +250,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
         scId,
         scPrimary,
         scConfig,
-        scDate,
+        scCycle,
         scLabel,
         scTags,
         scProperties,
@@ -275,7 +275,6 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
     }, [props.scenario, props.defaultScenario]);
 
     const active = useDynamicProperty(props.active, props.defaultActive, true);
-    const expanded = useDynamicProperty(props.expanded, props.defaultExpanded, false);
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
 
     const [deleteDialog, setDeleteDialogOpen] = useState(false);
@@ -306,8 +305,11 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
     });
 
     // userExpanded
-    const [userExpanded, setUserExpanded] = useState(false);
-    const onExpand = useCallback((e: SyntheticEvent, exp: boolean) => setUserExpanded(exp), []);
+    const [userExpanded, setUserExpanded] = useState(isScenario && expanded);
+    const onExpand = useCallback(
+        (e: SyntheticEvent, expand: boolean) => expandable && setUserExpanded(expand),
+        [expandable]
+    );
 
     // submits
     const submitPipeline = useCallback(
@@ -467,8 +469,8 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                 }))
             );
         setLabel(scLabel);
-        isScenario || setUserExpanded(false);
-    }, [scTags, scProperties, scLabel, isScenario, showTags, showProperties]);
+        setUserExpanded(expanded && isScenario);
+    }, [scTags, scProperties, scLabel, isScenario, showTags, showProperties, expanded]);
 
     // Refresh on broadcast
     useEffect(() => {
@@ -482,13 +484,13 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
         <>
             <Box sx={MainBoxSx} id={id} onClick={onFocus} className={className}>
                 <Accordion
-                    defaultExpanded={expandable && expanded}
+                    defaultExpanded={expanded}
                     expanded={userExpanded}
                     onChange={onExpand}
                     disabled={!isScenario}
                 >
                     <AccordionSummary
-                        expandIcon={<ArrowForwardIosSharp sx={AccordionIconSx} />}
+                        expandIcon={expandable ? <ArrowForwardIosSharp sx={AccordionIconSx} /> : null}
                         sx={AccordionSummarySx}
                     >
                         <Grid
@@ -501,14 +503,13 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                         >
                             <Grid item>
                                 {scLabel}
-                                {scPrimary && (
-                                    <Chip
+                                {scPrimary ? <Chip
                                         color="primary"
                                         label={<FlagOutlined sx={FlagSx} />}
                                         size="small"
                                         sx={ChipSx}
                                     />
-                                )}
+                                : null}
                             </Grid>
                             <Grid item>
                                 {showSubmit ? (
@@ -544,7 +545,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                         <Typography variant="subtitle2">Cycle / Frequency</Typography>
                                     </Grid>
                                     <Grid item xs={8}>
-                                        <Typography variant="subtitle2">{scDate}</Typography>
+                                        <Typography variant="subtitle2">{scCycle}</Typography>
                                     </Grid>
                                 </Grid>
                             ) : null}
@@ -667,9 +668,6 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                             </Grid>
                             {showProperties ? (
                                 <>
-                                    <Grid item xs={12} container>
-                                        <Typography variant="h6">Custom Properties</Typography>
-                                    </Grid>
                                     <Grid item xs={12} container rowSpacing={2}>
                                         {properties
                                             ? properties.map((property) => {
@@ -700,7 +698,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                                                           onChange={updatePropertyField}
                                                                       />
                                                                   </Grid>
-                                                                  <Grid item xs={6}>
+                                                                  <Grid item xs={5}>
                                                                       <TextField
                                                                           label="Value"
                                                                           variant="outlined"
@@ -714,7 +712,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                                                   </Grid>
                                                                   <Grid
                                                                       item
-                                                                      xs={1}
+                                                                      xs={2}
                                                                       container
                                                                       alignContent="center"
                                                                       alignItems="center"
@@ -766,12 +764,12 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                                                           {property.key}
                                                                       </Typography>
                                                                   </Grid>
-                                                                  <Grid item xs={6}>
+                                                                  <Grid item xs={5}>
                                                                       <Typography variant="subtitle2">
                                                                           {property.value}
                                                                       </Typography>
                                                                   </Grid>{" "}
-                                                                  <Grid item xs={2} />
+                                                                  <Grid item xs={3} />
                                                               </>
                                                           )}
                                                       </Grid>
@@ -801,7 +799,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                                             disabled={!isScenario}
                                                         />
                                                     </Grid>
-                                                    <Grid item xs={6}>
+                                                    <Grid item xs={5}>
                                                         <TextField
                                                             value={newProp.value}
                                                             data-name="value"
@@ -814,7 +812,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                                     </Grid>
                                                     <Grid
                                                         item
-                                                        xs={1}
+                                                        xs={2}
                                                         container
                                                         alignContent="center"
                                                         alignItems="center"
@@ -834,10 +832,10 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                                     <Grid item xs={4}>
                                                         <Typography variant="subtitle2">New Property Key</Typography>
                                                     </Grid>
-                                                    <Grid item xs={6}>
+                                                    <Grid item xs={5}>
                                                         <Typography variant="subtitle2">Value</Typography>
                                                     </Grid>
-                                                    <Grid item xs={2} />
+                                                    <Grid item xs={3} />
                                                 </>
                                             )}
                                         </Grid>

src/taipy/gui_core/GuiCoreLib.py

@@ -72,12 +72,12 @@ class _GuiCoreScenarioAdapter(_TaipyBase):
                     scenario.id,
                     scenario.is_primary,
                     scenario.config_id,
-                    scenario.creation_date,
+                    scenario.cycle.get_simple_label() if scenario.cycle else "",
                     scenario.get_simple_label(),
-                    list(scenario.tags),
-                    [(k, v) for k, v in scenario.properties.items() if k not in _GuiCoreScenarioAdapter.__INNER_PROPS],
-                    [(p.id, p.get_simple_label(), is_submittable(p)) for p in scenario.pipelines.values()],
-                    list(scenario.properties.get("authorized_tags", set())),
+                    list(scenario.tags) if scenario.tags else [],
+                    [(k, v) for k, v in scenario.properties.items() if k not in _GuiCoreScenarioAdapter.__INNER_PROPS] if scenario.properties else [],
+                    [(p.id, p.get_simple_label(), is_submittable(p)) for p in scenario.pipelines.values()] if scenario.pipelines else [],
+                    list(scenario.properties.get("authorized_tags", [])) if scenario.properties else [],
                     is_deletable(scenario),  # deletable
                     is_promotable(scenario),
                     is_submittable(scenario),
@@ -157,7 +157,8 @@ class _GuiCoreContext(CoreEventConsumerBase):
 
     def process_event(self, event: Event):
         if event.entity_type == EventEntityType.SCENARIO:
-            self.scenarios_base_level = None
+            with self.lock:
+                self.scenarios_base_level = None
             scenario = core_get(event.entity_id) if event.operation.value != 3 else None
             self.gui.broadcast(
                 _GuiCoreContext._CORE_CHANGED_NAME,
@@ -410,12 +411,12 @@ class _GuiCore(ElementLibrary):
                 "scenario": ElementProperty(_GuiCoreScenarioAdapter),
                 "active": ElementProperty(PropertyType.dynamic_boolean, True),
                 "expandable": ElementProperty(PropertyType.boolean, True),
-                "expanded": ElementProperty(PropertyType.dynamic_boolean, False),
+                "expanded": ElementProperty(PropertyType.boolean, True),
                 "show_submit": ElementProperty(PropertyType.boolean, True),
                 "show_delete": ElementProperty(PropertyType.boolean, True),
                 "show_config": ElementProperty(PropertyType.boolean, False),
                 "show_cycle": ElementProperty(PropertyType.boolean, False),
-                "show_tags": ElementProperty(PropertyType.boolean, False),
+                "show_tags": ElementProperty(PropertyType.boolean, True),
                 "show_properties": ElementProperty(PropertyType.boolean, True),
                 "show_pipelines": ElementProperty(PropertyType.boolean, True),
                 "show_submit_pipelines": ElementProperty(PropertyType.boolean, True),

src/taipy/gui_core/viselements.json

@@ -82,13 +82,13 @@
             "name": "expandable",
             "type": "bool",
             "default_value": "True",
-            "doc": "If True, the scenario visualizer can be expanded.<br/>If False, the scenario visualizer is always collapsed and only its name and the <i>submit</i> button are visible."
+            "doc": "If True, the scenario visualizer can be expanded.<br/>If False, the scenario visualizer is not expandable and it is shown depending on expanded value."
           },
           {
             "name": "expanded",
-            "type": "dynamic(bool)",
+            "type": "bool",
             "default_value": "True",
-            "doc": "If True, the scenario visualizer is expanded, and its content is displayed.<br/>If False, the scenario visualizer is collapsed and only its name a <i>submit</i> button are visible."
+            "doc": "If True, the scenario visualizer is expanded, and its content is displayed.<br/>If False, the scenario visualizer is collapsed and only its name and <i>submit</i> button are visible."
           },
           {
             "name": "show_submit",
@@ -117,7 +117,7 @@
           {
             "name": "show_tags",
             "type": "bool",
-            "default_value": "False",
+            "default_value": "True",
             "doc": "If False, the scenario tags are not visible."
           },
           {