fix performance and display issue related to thread size

Author: Chenglong-MS

src/app/dfSlice.tsx

@@ -62,7 +62,6 @@ export interface DataFormulatorState {
     focusedTableId: string | undefined;
     focusedChartId: string | undefined;
     activeThreadChartId: string | undefined; // specifying which chartThread is actively viewed
-    threadDrawerOpen: boolean; // decides whether the thread drawer is open
 
     chartSynthesisInProgress: string[];
 
@@ -96,7 +95,6 @@ const initialState: DataFormulatorState = {
     focusedTableId: undefined,
     focusedChartId: undefined,
     activeThreadChartId: undefined,
-    threadDrawerOpen: false,
 
     chartSynthesisInProgress: [],
 
@@ -246,7 +244,6 @@ export const dataFormulatorSlice = createSlice({
             state.focusedTableId = undefined;
             state.focusedChartId = undefined;
             state.activeThreadChartId = undefined;
-            state.threadDrawerOpen = false;
 
             state.chartSynthesisInProgress = [];
 
@@ -274,7 +271,6 @@ export const dataFormulatorSlice = createSlice({
             state.focusedTableId = savedState.focusedTableId || undefined;
             state.focusedChartId = savedState.focusedChartId || undefined;
             state.activeThreadChartId = savedState.activeThreadChartId || undefined;
-            state.threadDrawerOpen = false;
 
             state.chartSynthesisInProgress = [];
 
@@ -573,9 +569,6 @@ export const dataFormulatorSlice = createSlice({
         setVisPaneSize: (state, action: PayloadAction<number>) => {
             state.visPaneSize = action.payload;
         },
-        setThreadDrawerOpen: (state, action: PayloadAction<boolean>) => {
-            state.threadDrawerOpen = action.payload;
-        },
         setDisplayPanelSize: (state, action: PayloadAction<number>) => {
             state.displayPanelSize = action.payload;
         },

src/views/DataThread.tsx

@@ -299,22 +299,20 @@ export const DataThread: FC<{}> = function ({ }) {
     let tables = useSelector((state: DataFormulatorState) => state.tables);
     let charts = useSelector((state: DataFormulatorState) => state.charts);
     let focusedChartId = useSelector((state: DataFormulatorState) => state.focusedChartId);
-    let threadDrawerOpen = useSelector((state: DataFormulatorState) => state.threadDrawerOpen);
 
     let chartSynthesisInProgress = useSelector((state: DataFormulatorState) => state.chartSynthesisInProgress);
 
     const conceptShelfItems = useSelector((state: DataFormulatorState) => state.conceptShelfItems);
 
+    let [threadDrawerOpen, setThreadDrawerOpen] = useState<boolean>(false);
+
     const scrollRef = useRef<null | HTMLDivElement>(null)
 
     const executeScroll = () => { if (scrollRef.current != null) scrollRef.current.scrollIntoView() }
     // run this function from an event handler or an effect to execute scroll 
 
-
     const dispatch = useDispatch();
 
-    let setThreadDrawerOpen = (flag: boolean) => { dispatch(dfActions.setThreadDrawerOpen(flag)); }
-
     useEffect(() => {
         executeScroll();
     }, [threadDrawerOpen])
@@ -467,7 +465,7 @@ export const DataThread: FC<{}> = function ({ }) {
 
     let drawerOpen = leafTables.length > 1 && threadDrawerOpen;
 
-    let view = <Box sx={{ margin: "0px 0px 8px 0px", display: 'flex', flexDirection: drawerOpen ? 'row-reverse' : 'column', paddingBottom: 2 }}>
+    let view = <Box sx={{ width: '100%', margin: "0px 0px 8px 0px", display: 'flex', flexDirection: drawerOpen ? 'row-reverse' : 'column', paddingBottom: 2 }}>
         {leafTables.map((lt, i) => {
             let usedTableIds = leafTables.slice(0, i)
                 .map(x => [x.id, ...getTriggers(x, tables).map(y => y.tableId) || []]).flat();

src/views/VisualizationView.tsx

@@ -242,7 +242,6 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
     let charts = useSelector((state: DataFormulatorState) => state.charts);
     let focusedChartId = useSelector((state: DataFormulatorState) => state.focusedChartId);
     let chartSynthesisInProgress = useSelector((state: DataFormulatorState) => state.chartSynthesisInProgress);
-    let threadDrawerOpen = useSelector((state: DataFormulatorState) => state.threadDrawerOpen);
 
     let synthesisRunning = focusedChartId ? chartSynthesisInProgress.includes(focusedChartId) : false;
     let handleDeleteChart = () => { focusedChartId && dispatch(dfActions.deleteChartById(focusedChartId)) }
@@ -271,13 +270,6 @@ export const ChartEditorFC: FC<{  cachedCandidates: DictTable[],
         setFocusUpdated(true);
     }, [focusedChartId])
 
-    useEffect(() => {
-        let width = componentRef.current ? componentRef.current.offsetWidth : 0
-        if (width < 640 && threadDrawerOpen == true) {
-            setCollapseEditor(threadDrawerOpen);
-        }
-    }, [threadDrawerOpen])
-
     let chartUnavailable = true;
 
     let table = getDataTable(focusedChart, tables, charts, conceptShelfItems);