Apply "Show Line Numbers" as toggle switch in sidebar (#341)

Author: senwang86

ui/src/components/CanvasContextMenu.tsx

@@ -78,14 +78,6 @@ export function CanvasContextMenu(props) {
             <ListItemText>New Scope</ListItemText>
           </MenuItem>
         )}
-        <MenuItem onClick={flipShowLineNumbers} sx={ItemStyle}>
-          <ListItemIcon sx={{ color: "inherit" }}>
-            <FormatListNumberedIcon />
-          </ListItemIcon>
-          <ListItemText>
-            {showLineNumbers ? "Hide " : "Show "} Line Numbers
-          </ListItemText>
-        </MenuItem>
         <MenuItem onClick={() => flipAutoCompletion(client)} sx={ItemStyle}>
           <ListItemIcon sx={{ color: "inherit" }}>
             <AutoFixHighIcon />

ui/src/components/Sidebar.tsx

@@ -49,6 +49,11 @@ function SidebarSettings() {
   );
   const devMode = useStore(store, (state) => state.devMode);
   const setDevMode = useStore(store, (state) => state.setDevMode);
+  const showLineNumbers = useStore(store, (state) => state.showLineNumbers);
+  const setShowLineNumbers = useStore(
+    store,
+    (state) => state.setShowLineNumbers
+  );
   const autoRunLayout = useStore(store, (state) => state.autoRunLayout);
   const setAutoRunLayout = useStore(store, (state) => state.setAutoRunLayout);
   const contextualZoom = useStore(store, (state) => state.contextualZoom);
@@ -62,6 +67,23 @@ function SidebarSettings() {
   return (
     <Box>
       <Box>
+        <Tooltip title={"Show Line Numbers"} disableInteractive>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={showLineNumbers}
+                  size="small"
+                  color="warning"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    setShowLineNumbers(event.target.checked);
+                  }}
+                />
+              }
+              label="Show Line Numbers"
+            />
+          </FormGroup>
+        </Tooltip>
         <Tooltip
           title={"Enable Debug Mode, e.g., show pod IDs"}
           disableInteractive

ui/src/lib/store/settingSlice.tsx

@@ -10,11 +10,12 @@ export interface SettingSlice {
   setDevMode: (b: boolean) => void;
   autoRunLayout?: boolean;
   setAutoRunLayout: (b: boolean) => void;
-
   contextualZoomParams: Record<any, number>;
   contextualZoom: boolean;
   setContextualZoom: (b: boolean) => void;
   level2fontsize: (level: number) => number;
+  showLineNumbers?: boolean;
+  setShowLineNumbers: (b: boolean) => void;
 }
 
 export const createSettingSlice: StateCreator<MyState, [], [], SettingSlice> = (
@@ -65,6 +66,15 @@ export const createSettingSlice: StateCreator<MyState, [], [], SettingSlice> = (
     // also write to local storage
     localStorage.setItem("contextualZoom", JSON.stringify(b));
   },
+  showLineNumbers: localStorage.getItem("showLineNumbers")
+    ? JSON.parse(localStorage.getItem("showLineNumbers")!)
+    : false,
+  setShowLineNumbers: (b: boolean) => {
+    // set it
+    set({ showLineNumbers: b });
+    // also write to local storage
+    localStorage.setItem("showLineNumbers", JSON.stringify(b));
+  },
   // TODO Make it configurable.
   contextualZoomParams: {
     prev: 56,