performance improvement and fixes, also able to rename tables for better reference

Author: Chenglong-MS

src/app/dfSlice.tsx

@@ -142,9 +142,11 @@ let deleteChartsRoutine = (state: DataFormulatorState, chartIds: string[]) => {
     state.activeThreadChartId = activeThreadChartId;
 
     let unrefedDerivedTableIds = getUnrefedDerivedTableIds(state);
-    state.tables = state.tables.filter(t => !unrefedDerivedTableIds.includes(t.id));
+    let tableIdsToDelete = state.tables.filter(t => !t.anchored && unrefedDerivedTableIds.includes(t.id)).map(t => t.id);
+    
+    state.tables = state.tables.filter(t => !tableIdsToDelete.includes(t.id));
     // remove intermediate charts that lead to this table
-    state.charts = state.charts.filter(c => !(c.intermediate && unrefedDerivedTableIds.includes(c.intermediate.resultTableId)));
+    state.charts = state.charts.filter(c => !(c.intermediate && tableIdsToDelete.includes(c.intermediate.resultTableId)));
 }
 
 export const fetchFieldSemanticType = createAsyncThunk(
@@ -381,18 +383,6 @@ export const dataFormulatorSlice = createSlice({
                 }
             })
         },
-        updateChartScaleFactor: (state, action: PayloadAction<{chartId: string, scaleFactor: number}>) => {
-            let chartId = action.payload.chartId;
-            let scaleFactor = action.payload.scaleFactor;
-
-            state.charts = state.charts.map(chart => {
-                if (chart.id == chartId) {
-                    return { ...chart, scaleFactor: scaleFactor };
-                } else {
-                    return chart;
-                }
-            })
-        },
         deleteChartById: (state, action: PayloadAction<string>) => {
             let chartId = action.payload;
             deleteChartsRoutine(state, [chartId]);

src/components/ComponentType.tsx

@@ -100,7 +100,6 @@ export type Chart = {
     encodingMap: EncodingMap, 
     tableRef: string, 
     saved: boolean,
-    scaleFactor?: number,
     intermediate?: Trigger // whether this chart is only an intermediate chart (e.g., only used as a spec for transforming tables)
 }
 

src/scss/VisualizationView.scss

@@ -152,12 +152,6 @@ $accelerate-ease: cubic-bezier(0.4, 0.0, 1, 1);
         animation: appear 0.5s ease-out;
     }
 
-    .focused-vega-thumbnail {
-        //background-color: blue;
-        box-shadow: 0 0 5px rgba(33,33,33,.3);
-        z-index: 1;
-    }
-
     .vega-thumbnail:hover {
         transform: translateY(1px);
         box-shadow: 0 0 3px rgba(33,33,33,.2);

src/views/ConceptShelf.tsx

@@ -46,10 +46,12 @@ export interface ConceptShelfProps {
 export const ConceptGroup: FC<{groupName: string, fields: FieldItem[]}> = function ConceptGroup({groupName, fields}) {
 
     const focusedTableId = useSelector((state: DataFormulatorState) => state.focusedTableId);
+    const tables = useSelector((state: DataFormulatorState) => state.tables);
     const [expanded, setExpanded] = useState(false);
 
     useEffect(() => {
-        if (focusedTableId == groupName) {
+        let focusedTable = tables.find(t => t.id == focusedTableId);
+        if (focusedTableId == groupName || focusedTable?.derive?.source.includes(groupName)) {
             setExpanded(true);
         } else if (focusedTableId != groupName && groupName != "new fields") {
             setExpanded(false);