lint: react/jsx-key

Author: danmarshall

eslint.config.js

@@ -32,7 +32,6 @@ export default [
       "no-empty": "off",
       "no-unsafe-optional-chaining": "off",
       "no-useless-escape": "off",
-      "react/jsx-key": "off",
       "react/no-unescaped-entities": "off",
     }
   }

src/views/ConceptCard.tsx

@@ -622,6 +622,7 @@ export const DerivedConceptForm: FC<ConceptFormProps> = function DerivedConceptF
                             console.log(conceptShelfItems.find(f => f.id == conceptID)?.source)
                             const chipColor = conceptShelfItems.find(f => f.id == conceptID)?.source == "original" ? theme.palette.primary.light : theme.palette.custom.main;
                             return <Chip 
+                                key={conceptID}
                                 variant="outlined" size="small" 
                                 // color={}
                                 sx={{ 

src/views/ConceptShelf.tsx

@@ -142,7 +142,9 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                         <OperatorCard operator="bin" />
                     </Box>
                     {groupNames.map(gp => [
-                        <Box sx={{display: "block", width: "100%"}}>
+                        <Box 
+                            key={`concept-group-${gp}`}
+                            sx={{display: "block", width: "100%"}}>
                             <Divider orientation="horizontal" textAlign="left"><Typography component="h2" sx={{fontSize: "10px"}} color="text.secondary">
                                 {gp}
                             </Typography></Divider>

src/views/DataThread.tsx

@@ -217,7 +217,9 @@ const SingleThreadView: FC<{
 
         return [
             regularTableBox,
-            <Box sx={{display: 'flex', flexDirection: 'row'}}>
+            <Box 
+                key={`table-${tableId}`}
+                sx={{display: 'flex', flexDirection: 'row'}}>
                 <div style={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex'
                             //borderLeft: '1px dashed darkgray',
                             }}>
@@ -457,7 +459,9 @@ export const DataThread: FC<{}> = function ({ }) {
         {leafTables.map((lt, i) => {
             const usedTableIds = leafTables.slice(0, i)
                 .map(x => [x.id, ...getTriggers(x, tables).map(y => y.tableId) || []]).flat();
-            return <SingleThreadView  scrollRef={scrollRef} threadIdx={i} leafTable={lt} chartElements={chartElements} usedTableIds={usedTableIds} />
+            return <SingleThreadView
+                key={`thread-${lt.id}`}
+                scrollRef={scrollRef} threadIdx={i} leafTable={lt} chartElements={chartElements} usedTableIds={usedTableIds} />
         })}
     </Box>
 

src/views/EncodingShelfCard.tsx

@@ -99,7 +99,9 @@ export const TriggerCard: FC<{className?: string, trigger: Trigger, hideFields?:
             .map(([channel, encoding], index) => {
                 const field = fieldItems.find(f => f.id == encoding.fieldID) as FieldItem;
                 return [index > 0 ? '⨉' : '', 
-                        <Chip sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 18, fontSize: 12, borderRadius: '4px', 
+                        <Chip 
+                            key={`trigger-${channel}-${field.id}`}
+                            sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 18, fontSize: 12, borderRadius: '4px', 
                                    border: '1px solid rgb(250 235 215)', background: 'rgb(250 235 215 / 70%)',
                                    '& .MuiChip-label': { paddingLeft: '6px', paddingRight: '6px' }}} 
                               label={`${field.name}`} />]
@@ -157,7 +159,9 @@ export const MiniTriggerCard: FC<{className?: string, trigger: Trigger, hideFiel
             .map(([channel, encoding], index) => {
                 const field = fieldItems.find(f => f.id == encoding.fieldID) as FieldItem;
                 return [index > 0 ? '⨉' : '', 
-                        <Chip sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 16, fontSize: 'inherit', borderRadius: '4px', 
+                        <Chip 
+                            key={`trigger-${channel}-${field.id}`}
+                            sx={{color:'inherit', maxWidth: '110px', marginLeft: "2px", height: 16, fontSize: 'inherit', borderRadius: '4px', 
                                    border: '1px solid rgb(250 235 215)', background: 'rgb(250 235 215 / 70%)',
                                    '& .MuiChip-label': { paddingLeft: '6px', paddingRight: '6px' }}} 
                               label={`${field.name}`} />]

src/views/EncodingShelfThread.tsx

@@ -405,7 +405,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     }
 
     //let triggers = currentTable.derive.triggers;
-    const tableList = activeTableThread.map((tableId) => <div className="table-list-item">
+    const tableList = activeTableThread.map((tableId) => <div
+        key={tableId}
+        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" />
@@ -417,7 +419,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
     </div>);
 
     const tableCards = activeTableThread.map((tableId) => 
-        <Card variant='outlined' sx={{padding: '2px 0 2px 0'}}>
+        <Card 
+            key={tableId}
+            variant='outlined' sx={{padding: '2px 0 2px 0'}}>
             <Button variant="text" sx={{textTransform: 'none', padding: 0, marginLeft: 1, minWidth: 0}} onClick={() => { dispatch(dfActions.setFocusedTable(tableId)) }}>
                 <Stack direction="row" sx={{fontSize: '12px'}} alignItems="center" gap={"2px"}>
                     <TableRowsIcon fontSize="inherit" />
@@ -440,7 +444,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
         const currentActiveFields = new Set(extractActiveFields(trigger))
         const fieldsIdentical = _.isEqual(previousActiveFields, currentActiveFields)
 
-        return  <Box sx={{padding: 0, display: 'flex'}}>
+        return  <Box 
+                    key={trigger.tableId}
+                    sx={{padding: 0, display: 'flex'}}>
                     {/* <SouthIcon sx={{fontSize: "inherit", margin: 'auto 4px'}} /> */}
                     <Box sx={{minWidth: '1px', padding: '0px', width: '17px',  flex: 'none', display: 'flex', flexDirection: 'column'
                               //borderLeft: '1px dashed darkgray',
@@ -502,7 +508,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
         const 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" }}>
-                    {interleaveArrays([<Box sx={{width: '17px', height: '12px'}}>
+                    {interleaveArrays([<Box
+                        key="post-instruction"
+                        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>
@@ -532,7 +540,9 @@ export const EncodingShelfThread: FC<EncodingShelfThreadProps> = function ({ cha
                 </Typography>
             </Box> */}
              {[   
-                <Box sx={{display: 'flex'}}> 
+                <Box
+                    key="encoding-shelf" 
+                    sx={{display: 'flex'}}> 
                     {previousInstructions}
                 </Box>,
                 // <Box sx={{padding: '4px 0px', background: 'aliceblue', margin: 'auto', width: '200px', height: '6px', paddingBottom: 0.5}}></Box>

src/views/InfoPanel.tsx

@@ -73,7 +73,6 @@ export const InfoPanelFC: FC<{ $tableRef: React.RefObject<AgGridReact | Selectab
         return {
             id: `simple-tab-${index}`,
             'aria-controls': `simple-tabpanel-${index}`,
-            key: `simple-tab-${index}`
         };
     }
 
@@ -89,7 +88,9 @@ export const InfoPanelFC: FC<{ $tableRef: React.RefObject<AgGridReact | Selectab
                 <IconButton color="primary" sx={{ borderRadius: 0 }} onClick={() => { setHidePanel(!hidePanel) }}>{hidePanel ? <UnfoldMoreIcon /> : <UnfoldLessIcon />}</IconButton>
                 <Tabs value={Math.abs(tabValue)} >
                     {tabEntries.map((entry, index) => (
-                        <Tab  className={entry.highlight && index != tabValue ? "background-highlight" : ''} 
+                        <Tab
+                            key={`simple-tab-${index}`}
+                            className={entry.highlight && index != tabValue ? "background-highlight" : ''} 
                             onClick={(event) => { handleTabSwitch(event, index) }} label={entry.label} {...a11yProps(index)} 
                             sx={{ "&.MuiTab-root": { "textTransform": "none" } }} />))}
                 </Tabs>

src/views/SelectableDataGrid.tsx

@@ -87,7 +87,9 @@ const SelectableCell = createSelectable<SelectableCellProps>((props: TSelectable
                 match.length > 0 && matchIndex > -1 ? (
                     [
                         `${value}`.substring(0, matchIndex),
-                        <span className="bold">{match}</span>,
+                        <span 
+                            key={`match-${indices[0]}-${indices[1]}`}
+                            className="bold">{match}</span>,
                         `${value}`.substring(matchIndex + match.length)
                     ]
                 ) : (value)

src/views/TableSelectionView.tsx

@@ -136,7 +136,9 @@ export const TableSelectionView: React.FC<TableSelectionViewProps> = function Ta
                 {challengeView}
             </Paper>
 
-            return  <TabPanel value={value} index={i} >
+            return  <TabPanel 
+                        key={i}
+                        value={value} index={i} >
                         {content}
                         <Box width="100%" sx={{display: "flex"}}>
                             <Typography sx={{fontSize: 10, color: "text.secondary"}}>{Object.keys(t.rows[0]).length} columns{hideRowNum ? "" : ` ⨉ ${t.rows.length} rows`}</Typography>

src/views/VisualizationView.tsx

@@ -663,7 +663,9 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
         </Box>,
         // <EncodingShelf key='encoding-shelf' synthesisRunning={synthesisRunning} chartId={chart.id} 
         //                handleUpdateCandidates={handleUpdateCandidates} handleSetSynthesisStatus={handleSetSynthesisStatus} />
-        <Collapse collapsedSize={48} in={!collapseEditor} orientation='horizontal' 
+        <Collapse 
+            key='encoding-shelf'
+            collapsedSize={48} in={!collapseEditor} orientation='horizontal' 
             sx={{position: 'relative'}}>
             <Box sx={{display: 'flex', flexDirection: 'row', height: '100%'}}>
                 <Tooltip placement="left" title={collapseEditor ? "open editor" : "hide editor"}>
@@ -675,7 +677,6 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
                 <EncodingShelfThread key='encoding-shelf' chartId={focusedChart.id} />
             </Box>
         </Collapse>,
-        
     ]
 
     const [scaleMin, scaleMax] = [0.2, 2.4]