ensure <li> elements are in <ul>

microsoft · Jan 8, 2025 · 4425129 · 4425129
1 parent 49992b5
commit 4425129
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/src/scss/EncodingShelf.scss b/src/scss/EncodingShelf.scss
@@ -44,6 +44,10 @@
         flex-direction: column;
         justify-content: center
     }
+
+    .table-list-item {
+        display: flex;
+    }
 }
 
 .auto-sort-option-label {

diff --git a/src/views/EncodingShelfCard.tsx b/src/views/EncodingShelfCard.tsx
@@ -21,6 +21,7 @@ import {
     Stack,
     Card,
     Chip,
+    List,
 } from '@mui/material';
 
 import React from 'react';
@@ -559,19 +560,21 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
                             )
                         }}
                         onChange={(event) => { handleUpdateChartType(event.target.value) }}>
-                        {Object.entries(CHART_TEMPLATES).map(([group, templates]) => {
-                            return [
-                                <ListSubheader sx={{ color: "darkgray", lineHeight: 2, fontSize: 12 }} key={group}>{group}</ListSubheader>,
-                                ...templates.map((t, i) => (
-                                    <MenuItem sx={{ fontSize: 12, paddingLeft: 3, paddingRight: 3 }} value={t.chart} key={`${group}-${i}`}>
-                                        <ListItemIcon>
-                                            {typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
-                                        </ListItemIcon>
-                                        <ListItemText primaryTypographyProps={{fontSize: '12px'}}>{t.chart}</ListItemText>
-                                    </MenuItem>
-                                ))
-                            ]
-                        })}
+                        <List>
+                            {Object.entries(CHART_TEMPLATES).map(([group, templates]) => {
+                                return [
+                                    <ListSubheader sx={{ color: "darkgray", lineHeight: 2, fontSize: 12 }} key={group}>{group}</ListSubheader>,
+                                    ...templates.map((t, i) => (
+                                        <MenuItem sx={{ fontSize: 12, paddingLeft: 3, paddingRight: 3 }} value={t.chart} key={`${group}-${i}`}>
+                                            <ListItemIcon>
+                                                {typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
+                                            </ListItemIcon>
+                                            <ListItemText primaryTypographyProps={{fontSize: '12px'}}>{t.chart}</ListItemText>
+                                        </MenuItem>
+                                    ))
+                                ]
+                            })}
+                        </List>
                     </Select>
                 </FormControl>
             </Box>

diff --git a/src/views/EncodingShelfThread.tsx b/src/views/EncodingShelfThread.tsx
@@ -197,7 +197,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
 
     const dispatch = useDispatch<AppDispatch>();
 
-    const w: any = (a: any[], b: any[], spaceElement?: any) => a.length ? [a[0], spaceElement || '',...w(b, a.slice(1), spaceElement)] : b;
+    const interleaveArrays: any = (a: any[], b: any[], spaceElement?: any) => a.length ? [a[0], spaceElement || '',...interleaveArrays(b, a.slice(1), spaceElement)] : b;
 
     let previousInstructions : any = ""
 
@@ -405,7 +405,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     }
 
     //let triggers = currentTable.derive.triggers;
-    let tableList = activeTableThread.map((tableId) => <ListItem sx={{padding: 0}}>
+    let tableList = activeTableThread.map((tableId) => <div className="table-list-item">
         <Button variant="text" sx={{textTransform: 'none', padding: 0, minWidth: 0}} onClick={() => { dispatch(dfActions.setFocusedTable(tableId)) }}>
             <Stack direction="row" sx={{fontSize: '12px'}} alignItems="center" gap={"2px"}>
                 <TableRowsIcon fontSize="inherit" />
@@ -414,7 +414,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
                 </Typography>
             </Stack>
         </Button>
-    </ListItem>);
+    </div>);
 
     let tableCards = activeTableThread.map((tableId) => 
         <Card variant='outlined' sx={{padding: '2px 0 2px 0'}}>
@@ -478,7 +478,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     previousInstructions = 
         <Collapse orientation="vertical" in={true} sx={{width: "100%" }}>
             <Box  sx={{padding: '4px 0px', display: 'flex', flexDirection: "column" }}>
-                {w(tableCardsSublist, instructionCardsSublist, spaceElement)}
+                {interleaveArrays(tableCardsSublist, instructionCardsSublist, spaceElement)}
                 {/* {w(tableList.slice(0, tableList.length - 1), instructionList.slice(0, instructionList.length - 1))}  */}
                 {/* <Button sx={{minWidth: '24px'}}><RestartAlt /></Button> */}
             </Box>
@@ -504,7 +504,7 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
         let postInstructEndPoint = activeTableThread.findIndex(s => s == activeThreadChart.tableRef);
         postInstruction = <Collapse orientation="vertical" in={true} sx={{width: "100%"}}>
                 <Box  sx={{padding: '4px 0px', display: 'flex', flexDirection: "column" }}>
-                    {w([<Box sx={{width: '17px', height: '12px'}}>
+                    {interleaveArrays([<Box sx={{width: '17px', height: '12px'}}>
                             <Box sx={{padding:0, width: '1px', margin:'auto', height: '100%',
                                                     backgroundImage: 'linear-gradient(180deg, darkgray, darkgray 75%, transparent 75%, transparent 100%)',
                                                     backgroundSize: '1px 6px, 3px 100%'}}></Box>