Enhance scenario bundle functionality

factsheet/frontend/src/components/comparisonBoardMain.js

@@ -25,7 +25,7 @@ const ComparisonBoardMain = (props) => {
   const [scenarios, setScenarios] = useState([]);
   const scenarios_uid = params.split('#');
   const scenarios_uid_json = JSON.stringify(scenarios_uid);
-  const [selectedCriteria, setselectedCriteria] = useState(['Descriptors']);
+  const [selectedCriteria, setselectedCriteria] = useState(['Descriptors', 'Study name']);
 
   const getScenarios = async () => {
     const { data } = await axios.get(conf.toep + `scenario-bundles/get_scenarios/`, { params: { scenarios_uid: scenarios_uid_json } });
@@ -35,7 +35,7 @@ const ComparisonBoardMain = (props) => {
   useEffect(() => {
     getScenarios().then((data) => {
       setScenarios(data);
-      });
+    });
   }, []);
 
 
@@ -63,7 +63,7 @@ const ComparisonBoardMain = (props) => {
   }
 
   return (
-    scenarios.length !== 0 && 
+    scenarios.length !== 0 &&
     <Grid container
       direction="row"
       justifyContent="space-between"
@@ -80,20 +80,20 @@ const ComparisonBoardMain = (props) => {
                   <Button variant="outlined" size="small" sx={{ mr: 1 }}>
                     <ArrowBackIcon />
                   </Button>
-                </Link>  
+                </Link>
               </Tooltip>
             </Grid>
             <Grid item xs={6} md={4}>
             </Grid>
             <Grid item xs={6} md={4}>
-              <Button color="primary" 
-                variant="text" 
-                size="small" 
+              <Button color="primary"
+                variant="text"
+                size="small"
                 startIcon={<ArrowRightIcon />}>
-                How it works? 
+                How it works?
               </Button>
             </Grid>
-          </Grid>   
+          </Grid>
         </Toolbar>
         {/* <ComparisonControl /> */}
         <OptionBox>
@@ -106,11 +106,11 @@ const ComparisonBoardMain = (props) => {
             </div>
           </FormGroup>
           <MultipleSelectChip
-            sx={{ mt: 2, width : "100%" }}
+            sx={{ mt: 2, width: "100%" }}
             options={['Scenario 1', 'Scenario 2', 'Scenario 3']}
             label="Scenarios to be compared"
             disabled={true}
-            />
+          />
         </OptionBox>
         <ComparisonBoardItems elements={scenarios} c_aspects={selectedCriteria} />
       </Container>

factsheet/frontend/src/components/customAutocompleteWithoutAddNew.js

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function CustomAutocompleteWithoutAddNew(parameters) {
-  const { manyItems, idx, name, type, showSelectedElements, handler, width, noTooltip=false } = parameters;
+  const { manyItems, idx, name, type, showSelectedElements, handler, width, noTooltip = false } = parameters;
   const [value, setValue] = useState(parameters.selectedElements !== undefined ? parameters.selectedElements : []);
   const classes = useStyles();
 
@@ -33,34 +33,34 @@ export default function CustomAutocompleteWithoutAddNew(parameters) {
   return (
     <Box style={{ width: width }}>
       <Autocomplete
-        size="small" 
+        size="small"
         multiple
         id="checkboxes-tags-demo"
         options={parameters.optionsSet}
         disableCloseOnSelect
         getOptionLabel={(option) => option.name}
         renderOption={(props, option, { selected }) => (
           <li {...props}>
-             {!option.inputValue &&<Checkbox
+            {!option.inputValue && <Checkbox
               icon={icon}
               checkedIcon={checkedIcon}
               style={{ marginRight: 8 }}
-              checked={ selected }
+              checked={selected}
             />}
             {!noTooltip && !option.inputValue && <HtmlTooltip
-            style={{ marginRight: '5px' }}
-            placement="top"
-            title={
-              <React.Fragment>
-              <Typography color="inherit" variant="caption">
-                Description of <b>{option.name}</b> : TDB ...
-              <br />
-              <a href={2}>More info from Open Enrgy Knowledge Graph (OEKG)...</a>
-              </Typography>
-              </React.Fragment>
-            }
+              style={{ marginRight: '5px' }}
+              placement="top"
+              title={
+                <React.Fragment>
+                  <Typography color="inherit" variant="caption">
+                    Description of <b>{option.name}</b> : TDB ...
+                    <br />
+                    <a href={2}>More info from Open Enrgy Knowledge Graph (OEKG)...</a>
+                  </Typography>
+                </React.Fragment>
+              }
             >
-            <HelpOutlineIcon sx={{ color: '#bdbdbd' }}/>
+              <HelpOutlineIcon sx={{ color: '#bdbdbd' }} />
             </HtmlTooltip>}
             {option.name}
           </li>
@@ -75,7 +75,7 @@ export default function CustomAutocompleteWithoutAddNew(parameters) {
             classes: {
               root: classes.inputRoot, // Apply the custom CSS class
             },
-          }}/>
+          }} />
         )}
       />
       {showSelectedElements && <Box
@@ -90,11 +90,11 @@ export default function CustomAutocompleteWithoutAddNew(parameters) {
           // 'backgroundColor':'#FCFCFC'
         }}
       >
-        {value.map((v) => (
-          <Chip size='small' key={v.id}  label={v.name} variant="outlined" sx={{ 'marginBottom': '5px', 'marginTop': '5px', 'marginLeft': '5px' }}/>
+        {value.sort((a, b) => a.name.localeCompare(b.name)).map((v) => (
+          <Chip size='small' key={v.id} label={v.name} variant="outlined" sx={{ 'marginBottom': '5px', 'marginTop': '5px', 'marginLeft': '5px' }} />
         ))}
       </Box>}
     </Box>
   );
-  
+
 }