fix issue with table choice in creating new charts

Author: Chenglong-MS

src/app/App.tsx

@@ -311,7 +311,7 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
     useEffect(() => {
         const subscription: ActionSubscription = {
             loadData: (table: DictTable) => {
-                dispatch(dfActions.addTable(table));
+                dispatch(dfActions.loadTable(table));
                 dispatch(fetchFieldSemanticType(table));
             },
             setAppConfig: (config) => {
@@ -346,8 +346,6 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
             });
     }, [])
 
-    const [resetDialogOpen, setResetDialogOpen] = useState<boolean>(false);
-
     useEffect(() => {
         document.title = toolName;
         dispatch(fetchAvailableModels());

src/app/dfSlice.tsx

@@ -301,10 +301,14 @@ export const dataFormulatorSlice = createSlice({
                 {id: id, status, message}
             ];
         },
-        addTable: (state, action: PayloadAction<DictTable>) => {
+        loadTable: (state, action: PayloadAction<DictTable>) => {
             let table = action.payload;
             state.tables = [...state.tables, table];
             state.conceptShelfItems = [...state.conceptShelfItems, ...getDataFieldItems(table)];
+
+            state.focusedTableId = table.id;
+            state.focusedChartId = undefined;
+            state.activeThreadChartId = undefined;  
         },
         deleteTable: (state, action: PayloadAction<string>) => {
             let tableId = action.payload;

src/views/DataThread.tsx

@@ -479,6 +479,7 @@ export const DataThread: FC<{}> = function ({ }) {
         display: 'flex', 
         flexDirection: drawerOpen ? 'row-reverse' : 'column',
         minHeight: '100%',
+        transition: 'all 0.3s ease',
     }}>
         {leafTables.map((lt, i) => {
             let usedTableIds = leafTables.slice(0, i)
@@ -493,10 +494,12 @@ export const DataThread: FC<{}> = function ({ }) {
                 sx={{
                     backgroundColor: (i % 2 == 1 ? "rgba(0, 0, 0, 0.03)" : 'white'), 
                     padding: '8px 8px',
-                    flex: 1,
+                    flex: drawerOpen ? 1 : 'none',
                     display: 'flex',
                     flexDirection: 'column',
-                    height: 'calc(100% - 16px)'
+                    height: 'calc(100% - 16px)',
+                    width: '208px', 
+                    transition: 'all 0.3s ease',
                 }} />
         })}
     </Box>

src/views/TableSelectionView.tsx

@@ -223,7 +223,7 @@ export const TableSelectionDialog: React.FC<{ buttonElement: any }> = function T
                             .then((text) => {         
                                 let fullTable = createTableFromFromObjectArray(tableChallenges.table.id, JSON.parse(text));
                                 if (fullTable) {
-                                    dispatch(dfActions.addTable(fullTable));
+                                    dispatch(dfActions.loadTable(fullTable));
                                     dispatch(fetchFieldSemanticType(fullTable));
                                     dispatch(dfActions.addChallenges({
                                         tableId: tableChallenges.table.id,
@@ -279,7 +279,7 @@ export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElem
                     const uniqueName = getUniqueTableName(file.name, existingNames);
                     let table = loadDataWrapper(uniqueName, text, file.type);
                     if (table) {
-                        dispatch(dfActions.addTable(table));
+                        dispatch(dfActions.loadTable(table));
                         dispatch(fetchFieldSemanticType(table));
                     }
                 });
@@ -353,7 +353,7 @@ export const TableURLDialog: React.FC<TableURLDialogProps> = ({ buttonElement, d
             }
 
             if (table) {
-                dispatch(dfActions.addTable(table));
+                dispatch(dfActions.loadTable(table));
                 dispatch(fetchFieldSemanticType(table));
             }        
         })
@@ -449,7 +449,7 @@ export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ buttonElemen
             table = createTableFromText(uniqueName, tableStr);
         }
         if (table) {
-            dispatch(dfActions.addTable(table));
+            dispatch(dfActions.loadTable(table));
             dispatch(fetchFieldSemanticType(table));
         }        
     };
@@ -585,7 +585,8 @@ export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ buttonElemen
                                 flexDirection: "column", 
                                 "& .MuiOutlinedInput-root.Mui-disabled": {backgroundColor: 'rgba(0,0,0,0.05)'}}} dividers>
                 <Box sx={{width: '100%', marginBottom: 1, display:'flex'}}>
-                    <TextField sx={{flex: 1}} disabled={loadFromURL} size="small" value={tableName} onChange={(event) => { setTableName(event.target.value); }} 
+                    <TextField sx={{flex: 1}} disabled={loadFromURL} size="small" 
+                            value={tableName} onChange={(event) => { setTableName(event.target.value); }} 
                            autoComplete='off' id="outlined-basic" label="dataset name" variant="outlined" />
                     <Divider sx={{margin: 1}} flexItem orientation='vertical'/>
                     <Button sx={{marginLeft: 0, textTransform: 'none'}} onClick={() => {setLoadFromURL(!loadFromURL)}} 
@@ -611,16 +612,6 @@ export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ buttonElemen
                     {cleaningInProgress && tableContentType == "text" ? <LinearProgress sx={{ width: '100%', height: "calc(100% - 8px)", marginTop: 1, minHeight: 200, opacity: 0.1, position: 'absolute', zIndex: 1 }} /> : ""}
                     {viewTable  ? 
                     <>
-                        {/* <ReactDiffViewer
-                            leftTitle={'source'}
-                            rightTitle={'cleaning suggestions'}
-                            styles={newStyles}
-                            oldValue={tableContent}
-                            showDiffOnly={false}
-                            newValue={cleanTableContent.content}
-                            splitView={true}
-                            renderContent={renderLines}
-                        /> */}
                         <CustomReactTable
                             rows={viewTable.rows} 
                             rowsPerPageNum={-1} compact={false}

src/views/VisualizationView.tsx

@@ -711,6 +711,7 @@ export const VisualizationViewFC: FC<VisPanelProps> = function VisualizationView
     let tables = useSelector((state: DataFormulatorState) => state.tables);
     let charts = useSelector((state: DataFormulatorState) => state.charts);
     let focusedChartId = useSelector((state: DataFormulatorState) => state.focusedChartId);
+    let focusedTableId = useSelector((state: DataFormulatorState) => state.focusedTableId);
 
     let visViewMode = useSelector((state: DataFormulatorState) => state.visViewMode);
 
@@ -736,7 +737,7 @@ export const VisualizationViewFC: FC<VisPanelProps> = function VisualizationView
                         if (focusedChart?.chartType == "?") { 
                             dispatch(dfActions.updateChartType({chartType: t.chart, chartId: focusedChartId as string}));
                         } else {
-                            dispatch(dfActions.createNewChart({chartType: t.chart, tableId: tables[0].id}));
+                            dispatch(dfActions.createNewChart({chartType: t.chart, tableId: focusedTableId}));
                         }
                     }}
                 >
@@ -758,12 +759,6 @@ export const VisualizationViewFC: FC<VisPanelProps> = function VisualizationView
                         cachedCandidates={cachedCandidates.find(l => l.chartId == focusedChartId)?.tables || []}
                         handleUpdateCandidates={handleUpdateCandidates} />
 
-    //console.log(tables);
-
-    //let vegaSpec: any = createVegaObj(markType, encodingMap, conceptShelfItems)[0];
-    // if (tables.length > 0) {
-    //     vegaSpec = createVegaObj(markType, encodingMap, conceptShelfItems)[0];
-    // }
     let derivedFields = conceptShelfItems.filter(f => f.source == "derived");
 
     let finalView = <Box></Box>;