hide config panel initially

Author: yilinxia

src/lib/context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "react";
+import { Dispatch, SetStateAction, createContext } from "react";
 import Sigma from "sigma";
 
 import { ModalName } from "../views/modals";
@@ -25,6 +25,9 @@ type GraphContextType = {
   isPanelExpanded: boolean;
   setIsPanelExpanded: (isPanelExpanded: boolean) => void;
 
+  showEditionPanel: boolean;
+  setShowEditionPanel: Dispatch<SetStateAction<boolean>>;
+
   navState: NavState;
   computedData: ComputedData;
   hovered: string | Set<string> | undefined;
@@ -45,5 +48,5 @@ type GraphContextType = {
 };
 export const GraphContext = createContext<GraphContextType>(
   // "Fake" initial value (proper value will be given by Provider)
-  null as unknown as GraphContextType,
+  null as unknown as GraphContextType
 );

src/views/EditionPanel.tsx

@@ -56,7 +56,7 @@ interface Option {
 }
 
 const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
-  const { navState, data, setNavState, openModal, setPanel } = useContext(GraphContext);
+  const { navState, data, setNavState, openModal, setPanel, setShowEditionPanel } = useContext(GraphContext);
   const { fields, fieldsIndex } = data;
   const { filterable, colorable, sizeable, subtitleFields } = navState;
 
@@ -106,6 +106,7 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
               style={{ top: 15, right: 15 }}
               onClick={() => {
                 setNavState({ ...navState, role: "x" });
+                setShowEditionPanel(false); // Add this line to hide the panel
               }}
             >
               <FaTimes />

src/views/GraphView.tsx

@@ -75,8 +75,8 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
     (newNavState: NavState) => {
       navigate(
         location.hash.replace(/^#/, "").replace(/\?.*/, "") +
-          "?" +
-          navStateToQueryURL(data ? cleanNavState(newNavState, data) : newNavState),
+        "?" +
+        navStateToQueryURL(data ? cleanNavState(newNavState, data) : newNavState),
       );
     },
     [data, location.hash, navigate],
@@ -88,6 +88,7 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
 
   const [computedData, setComputedData] = useState<ComputedData | null>(null);
 
+  const [showEditionPanel, setShowEditionPanel] = useState(false); // Add this state
   // Refresh aggregations and filtered items lists:
   useEffect(() => {
     if (data) {
@@ -165,10 +166,10 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
 
     let promise:
       | Promise<{
-          name: string;
-          extension: string;
-          textContent: string;
-        }>
+        name: string;
+        extension: string;
+        textContent: string;
+      }>
       | undefined;
 
     if (!url && !local) {
@@ -267,6 +268,9 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
         isPanelExpanded,
         setIsPanelExpanded,
 
+        showEditionPanel,
+        setShowEditionPanel,
+
         modal: modalName,
         openModal: (modal: ModalName) => setModalName(modal),
         closeModal: () => setModalName(undefined),
@@ -280,7 +284,7 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
       }}
     >
       {navState.local && <LocalWarningBanner />}
-      <EditionPanel isExpanded={(navState.role || DEFAULT_ROLE) === "d"} />
+      {showEditionPanel && <EditionPanel isExpanded={true} />}
       <main className={cx("graph-view", isPanelExpanded ? "panel-expanded" : "panel-collapsed")} ref={domRoot}>
         <div className="wrapper">
           <ContextPanel />

src/views/ReadabilityBlock.tsx

@@ -27,8 +27,8 @@ import { GraphContext } from "../lib/context";
 import { NavState } from "../lib/navState";
 
 const ReadabilityBlock: FC = () => {
-  const { navState, setNavState } = useContext(GraphContext);
-
+  // const { navState, setNavState } = useContext(GraphContext);
+  const { navState, setNavState, showEditionPanel, setShowEditionPanel } = useContext(GraphContext);
   const [initialNavState] = useState<NavState>(navState);
 
   const minLabelSize = typeof navState.minLabelSize === "number" ? navState.minLabelSize : DEFAULT_LABEL_SIZE;
@@ -63,14 +63,17 @@ const ReadabilityBlock: FC = () => {
             type="button"
             className="btn btn-outline-dark flex-grow-1"
             disabled={navState.role === "d"}
-            onClick={() =>
+            onClick={() => {
+              // Toggle the edition panel
+              setShowEditionPanel(!showEditionPanel);
+              // Also set the role if needed
               setNavState({
                 ...navState,
                 role: "d",
-              })
-            }
+              });
+            }}
           >
-            <FaGear /> Configure this graph for Retina
+            <FaGear /> Configure this graph for DeepGit
           </button>
         )}
       </div>

src/views/modals/PublishModal.tsx

@@ -72,7 +72,7 @@ const PublishModal: FC<{ close: () => void }> = ({ close }) => {
         }}
       >
         <p>
-          To be able to <strong>share</strong> your visualizations online, Retina needs to be able to access your graph
+          To be able to <strong>share</strong> your visualizations online, DeepGit needs to be able to access your graph
           file <strong>online</strong>, through HTTP. You can publish it on a server or your own, a cloud provider...
         </p>
 
@@ -81,7 +81,7 @@ const PublishModal: FC<{ close: () => void }> = ({ close }) => {
           <a href="https://gist.github.com/" target="_blank" rel="noreferrer">
             GitHub Gist
           </a>
-          , a site where you can freely upload your graph for Retina:
+          , a site where you can freely upload your graph for DeepGit:
         </p>
 
         <ol>