add devMode (#197)

codepod-io · Jan 4, 2023 · 3df385a · 3df385a
1 parent 4a56947
commit 3df385a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
@@ -45,9 +45,31 @@ function SidebarSettings() {
     store,
     (state) => state.setShowAnnotations
   );
+  const devMode = useStore(store, (state) => state.devMode);
+  const setDevMode = useStore(store, (state) => state.setDevMode);
   return (
     <Box>
       <Box>
+        <Tooltip
+          title={"Enable DevMode, e.g., show pod IDs"}
+          disableInteractive
+        >
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={devMode}
+                  size="small"
+                  color="warning"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    setDevMode(event.target.checked);
+                  }}
+                />
+              }
+              label="Dev Mode"
+            />
+          </FormGroup>
+        </Tooltip>
         <Tooltip title={"Enable Scoped Variables"} disableInteractive>
           <FormGroup>
             <FormControlLabel

diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
@@ -233,6 +233,7 @@ export const CodeNode = memo<Props>(function ({
 }) {
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
+  const devMode = useStore(store, (state) => state.devMode);
   // const pod = useStore(store, (state) => state.pods[id]);
   const wsRun = useStore(store, (state) => state.wsRun);
   const clearResults = useStore(store, (s) => s.clearResults);
@@ -369,6 +370,20 @@ export const CodeNode = memo<Props>(function ({
       />
       {/* The header of code pods. */}
       <Box className="custom-drag-handle">
+        {devMode && (
+          <Box
+            sx={{
+              position: "absolute",
+              top: "-48px",
+              width: "50%",
+              userSelect: "text",
+              cursor: "auto",
+            }}
+            className="nodrag"
+          >
+            <pre>{id}</pre>
+          </Box>
+        )}
         <Box
           sx={{
             position: "absolute",

diff --git a/ui/src/lib/store/settingSlice.tsx b/ui/src/lib/store/settingSlice.tsx
@@ -6,6 +6,8 @@ export interface SettingSlice {
   setScopedVars: (b: boolean) => void;
   showAnnotations?: boolean;
   setShowAnnotations: (b: boolean) => void;
+  devMode?: boolean;
+  setDevMode: (b: boolean) => void;
 }
 
 export const createSettingSlice: StateCreator<MyState, [], [], SettingSlice> = (
@@ -30,4 +32,13 @@ export const createSettingSlice: StateCreator<MyState, [], [], SettingSlice> = (
     // also write to local storage
     localStorage.setItem("showAnnotations", JSON.stringify(b));
   },
+  devMode: localStorage.getItem("devMode")
+    ? JSON.parse(localStorage.getItem("devMode")!)
+    : false,
+  setDevMode: (b: boolean) => {
+    // set it
+    set({ devMode: b });
+    // also write to local storage
+    localStorage.setItem("devMode", JSON.stringify(b));
+  },
 });