config setup for live editor

src/components/Sidebar/index.tsx

@@ -6,13 +6,20 @@ import {
   AiOutlineClear,
   AiFillGithub,
   AiOutlineTwitter,
+  AiFillControl,
 } from "react-icons/ai";
-import { FaFileImport } from "react-icons/fa";
+import { FaFileImport, FaMap } from "react-icons/fa";
 import { MdAutoGraph } from "react-icons/md";
 import { useLocalStorage } from "usehooks-ts";
 import { defaultValue } from "src/containers/JsonEditor";
 import { getNextLayout } from "src/containers/LiveEditor/helpers";
 
+interface Config {
+  layout: "TB" | "BT" | "LR" | "RL";
+  minimap: boolean;
+  controls: boolean;
+}
+
 const StyledSidebar = styled.div`
   display: flex;
   justify-content: space-between;
@@ -85,30 +92,23 @@ const StyledImportFile = styled.label`
   }
 `;
 
-const fileToJson = (file: File, setJson: (val: string) => void) => {
-  const reader = new FileReader();
-
-  reader.readAsText(file, "UTF-8");
-  reader.onload = function (data) {
-    setJson(data.target?.result as string);
-  };
-};
-
 export const Sidebar = () => {
   const [jsonFile, setJsonFile] = React.useState<File | any>(null);
   const [_, setJson] = useLocalStorage("json", JSON.stringify(defaultValue));
-  const [layout, setLayout] = useLocalStorage<"TB" | "BT" | "RL" | "LR">(
-    "layout",
-    "RL"
-  );
-
-  const handleClear = () => {
-    setJson("[]");
-  };
+  const [config, setConfig] = useLocalStorage<Config>("config", {
+    layout: "RL",
+    minimap: true,
+    controls: true,
+  });
 
   React.useEffect(() => {
     if (jsonFile) {
-      fileToJson(jsonFile, setJson);
+      const reader = new FileReader();
+
+      reader.readAsText(jsonFile, "UTF-8");
+      reader.onload = function (data) {
+        setJson(data.target?.result as string);
+      };
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -134,9 +134,45 @@ export const Sidebar = () => {
             </a>
           </Link>
         </StyledElement>
-        <StyledElement as="a" onClick={handleClear} title="Clear JSON">
+        <StyledElement as="a" onClick={() => setJson("[]")} title="Clear JSON">
           <AiOutlineClear />
         </StyledElement>
+        <StyledElement
+          as="a"
+          onClick={() =>
+            setConfig((c) => ({
+              ...c,
+              layout: getNextLayout(c.layout),
+            }))
+          }
+          title="Change Layout"
+        >
+          <MdAutoGraph />
+        </StyledElement>
+        <StyledElement
+          title="Toggle Minimap"
+          as="a"
+          onClick={() =>
+            setConfig((c) => ({
+              ...c,
+              minimap: !c.minimap,
+            }))
+          }
+        >
+          <FaMap />
+        </StyledElement>
+        <StyledElement
+          title="Toggle Controls"
+          as="a"
+          onClick={() =>
+            setConfig((c) => ({
+              ...c,
+              controls: !c.controls,
+            }))
+          }
+        >
+          <AiFillControl />
+        </StyledElement>
         <StyledElement title="Import JSON File">
           <a>
             <StyledImportFile>
@@ -150,13 +186,6 @@ export const Sidebar = () => {
             </StyledImportFile>
           </a>
         </StyledElement>
-        <StyledElement
-          as="a"
-          onClick={() => setLayout(getNextLayout(layout))}
-          title="Change Layout"
-        >
-          <MdAutoGraph />
-        </StyledElement>
       </StyledTopWrapper>
       <StyledBottomWrapper>
         <StyledElement>

src/containers/LiveEditor/FlowWrapper.tsx

@@ -3,6 +3,7 @@ import ReactFlow, {
   ControlButton,
   Controls,
   Elements,
+  MiniMap,
   NodeExtent,
 } from "react-flow-renderer";
 import { useLocalStorage } from "usehooks-ts";
@@ -21,7 +22,11 @@ const nodeTypes = {
 
 export const FlowWrapper: React.FC = () => {
   const [json] = useLocalStorage("json", JSON.stringify(defaultValue));
-  const [layout] = useLocalStorage("layout", "RL");
+  const [config] = useLocalStorage("config", {
+    layout: "RL",
+    minimap: true,
+    controls: true,
+  });
 
   const [elements, setElements] = React.useState<Elements>([]);
   const [rfInstance, setRfInstance] = React.useState<any>(null);
@@ -33,13 +38,13 @@ export const FlowWrapper: React.FC = () => {
 
   React.useEffect(() => {
     try {
-      const layoutedElements = getLayout(layout, json);
+      const layoutedElements = getLayout(config.layout, json);
       setElements(layoutedElements);
       setValid(true);
     } catch (error) {
       setValid(false);
     }
-  }, [rfInstance, json, layout]);
+  }, [rfInstance, json, config]);
 
   if (!valid) return null;
 
@@ -50,14 +55,19 @@ export const FlowWrapper: React.FC = () => {
       nodeTypes={nodeTypes}
       onLoad={(rf: any) => setRfInstance(rf)}
     >
-      <Controls>
-        <ControlButton
-          onClick={() => setElements(getLayoutPosition(layout, elements))}
-          style={{ gridColumn: "1 / 3", width: "auto" }}
-        >
-          Format
-        </ControlButton>
-      </Controls>
+      {config.minimap && <MiniMap />}
+      {config.controls && (
+        <Controls>
+          <ControlButton
+            onClick={() =>
+              setElements(getLayoutPosition(config.layout, elements))
+            }
+            style={{ gridColumn: "1 / 3", width: "auto" }}
+          >
+            Format
+          </ControlButton>
+        </Controls>
+      )}
     </ReactFlow>
   );
 };