code graph controls improvements, esp. for mobile

errorcorrectionzoo · Oct 26, 2023 · e7f1b9e · e7f1b9e
1 parent b7dcb13
commit e7f1b9e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 42 deletions.
diff --git a/_zoodb_citations_cache/cache_compiled_citations.json b/_zoodb_citations_cache/cache_compiled_citations.json
diff --git a/_zoodb_citations_cache/cache_downloaded_info.json b/_zoodb_citations_cache/cache_downloaded_info.json
diff --git a/jscomponents/codegraph/CodeGraphInformationPane_style.scss b/jscomponents/codegraph/CodeGraphInformationPane_style.scss
@@ -1,10 +1,13 @@
 
 .CodeGraphInformationPane {
-    padding: 5px;
     overflow: auto;
     border: solid .4pt rgba(120,120,120,0.5);
     border-radius: 2px;
 
+    box-sizing: border-box;
+    padding: 5px;
+    margin: 2px 0px;
+
     font-size: 0.92rem;
 
     .empty-info-pane {

diff --git a/jscomponents/codegraph/codegraph_style.scss b/jscomponents/codegraph/codegraph_style.scss
@@ -27,17 +27,20 @@ $page-link-color: var(--page-link-color); //rgba(50,50,200,1.0);
     overflow: hidden;
 }
 
+// collapse side panel onto bottom half of screen on small devices
 @media screen and (max-width: 500px) {
     .EczCodeGraphComponent {
         grid-template-columns: 100%;
         grid-template-rows: 50% 50%;
 
         .EczCodeGraphComponent_SidePanel {
-            > div {
-                // min-height: 200px;
-                // overflow: hidden;
+            .CodeGraphInformationPane {
+                // let the side panel container scroll with its
+                // own "overflow: auto" setting
+                overflow: visible;
             }
         }
+
     }
 }
 
@@ -88,17 +91,17 @@ $page-link-color: var(--page-link-color); //rgba(50,50,200,1.0);
 }
 
 .EczCodeGraphComponent_SidePanel {
-    //width: 330px;
     height: 100%;
 
     margin: 0px;
-    padding: 0px;
+    padding: 2px 0px;
+    box-sizing: border-box;
 
-    background-color: var(--main-background-color); //white;
+    background-color: var(--main-background-color);
     z-index: 100;
 
     display: grid;
-    grid-template-rows: 0fr 1fr;
+    grid-template-rows: minmax(auto, 0fr) 2fr;
     gap: 10px;
 
     // force ignoring current element size in parent element calculations
@@ -115,9 +118,11 @@ $page-link-color: var(--page-link-color); //rgba(50,50,200,1.0);
     padding: 0px;
     border: none 0px;
 
+    //overflow: auto;
+
     > fieldset {
         border: solid .4pt rgba(120,120,120,0.5);
-        margin: 2px 0px;
+        margin: 0px;
         padding: 2px;
         border-radius: 2px;
 
@@ -153,6 +158,10 @@ $page-link-color: var(--page-link-color); //rgba(50,50,200,1.0);
 
 }
 
-
+.EczCodeGraphControlsComponent.state-hide-controls {
+    > fieldset.controls-input-advanced-fieldset {
+        display: none; // hide advanced controls
+    }
+}
 
 
diff --git a/jscomponents/codegraph/ui.jsx b/jscomponents/codegraph/ui.jsx
@@ -31,7 +31,7 @@ function DownloadSnapshotControls(props)
     };
 
     return (
-        <fieldset>
+        <fieldset className="controls-input-advanced-fieldset">
             <legend>Snapshot</legend>
             <span className="controls-input-group">
                 <input type="checkbox" id={htmlIdFull} checked={isFull} onChange={(e) => setFull(e.target.checked)}></input>
@@ -153,6 +153,8 @@ export function EczCodeGraphControlsComponent(props)
         }
     }, [ eczCodeGraph ]); // run ONCE only for the given code graph!
 
+    const rootFieldsetRef = useRef(null);
+
     //
     // Callbacks
     //
@@ -268,8 +270,13 @@ export function EczCodeGraphControlsComponent(props)
         aNode.click();
     };
 
+    const toggleControls = (/*event*/) => {
+        const el = rootFieldsetRef.current;
+        el.classList.toggle('state-hide-controls');
+    };
+
     return (
-        <fieldset className="EczCodeGraphControlsComponent">
+        <fieldset ref={rootFieldsetRef} className="EczCodeGraphControlsComponent state-hide-controls">
             <fieldset>
                 <legend>View</legend>
                 <input type="range"
@@ -280,36 +287,44 @@ export function EczCodeGraphControlsComponent(props)
                        onChange={ (ev) =>
                            doSetZoomLevel(Math.exp(parseFloat(ev.target.value))) }
                 />
-                <button onClick={doZoomIn}>+</button>
-                <button onClick={doZoomOut}>-</button>
-                <button
-                    onClick={doCenter}
-                >center</button>
-                <button onClick={doZoomFit}>fit</button>
+                <span className="controls-input-group">
+                    <button onClick={doZoomIn}>+</button>
+                    <button onClick={doZoomOut}>-</button>
+                    <button onClick={doCenter}>center</button>
+                    <button onClick={doZoomFit}>fit</button>
+                </span>
+                <span className="controls-input-sep"></span>
+                <button onClick={toggleControls}>controls</button>
             </fieldset>
-            <fieldset>
+            <fieldset className="controls-input-advanced-fieldset">
                 <legend>Display</legend>
-                <input type="checkbox"
-                       id="input_domainColoring"
-                       checked={domainColoring}
-                       onChange={ (ev) => onChangeDomainColoring(!! ev.target.checked) }
-                />
-                <label htmlFor="input_domainColoring">domain colors</label>
-                <input type="checkbox"
-                       id="input_cousinEdgesShown"
-                       checked={cousinEdgesShown}
-                       onChange={ (ev) => onChangeCousinEdgesShown(!! ev.target.checked) }
-                />
-                <label htmlFor="input_cousinEdgesShown">cousins</label>
-                <input type="checkbox"
-                       id="input_secondaryParentEdgesShown"
-                       checked={secondaryParentEdgesShown}
-                       onChange={ (ev) =>
-                           onChangeSecondaryParentEdgesShown(!! ev.target.checked) }
-                />
-                <label htmlFor="input_secondaryParentEdgesShown">secondary parents</label>
+                <span className="controls-input-group">
+                    <input type="checkbox"
+                        id="input_domainColoring"
+                        checked={domainColoring}
+                        onChange={ (ev) => onChangeDomainColoring(!! ev.target.checked) }
+                    />
+                    <label htmlFor="input_domainColoring">domain colors</label>
+                </span>
+                <span className="controls-input-group">
+                    <input type="checkbox"
+                        id="input_cousinEdgesShown"
+                        checked={cousinEdgesShown}
+                        onChange={ (ev) => onChangeCousinEdgesShown(!! ev.target.checked) }
+                    />
+                    <label htmlFor="input_cousinEdgesShown">cousins</label>
+                </span>
+                <span className="controls-input-group">
+                    <input type="checkbox"
+                        id="input_secondaryParentEdgesShown"
+                        checked={secondaryParentEdgesShown}
+                        onChange={ (ev) =>
+                            onChangeSecondaryParentEdgesShown(!! ev.target.checked) }
+                    />
+                    <label htmlFor="input_secondaryParentEdgesShown">secondary parents</label>
+                </span>
             </fieldset>
-            <fieldset>
+            <fieldset className="controls-input-advanced-fieldset">
                 <legend>Isolation</legend>
                 <button
                     disabled={displayModeWithOptions.displayMode !== 'isolate-nodes'}
@@ -348,7 +363,7 @@ export function EczCodeGraphControlsComponent(props)
                     <label htmlFor="input_modeIsolateNodesAddSecondary">expand with secondary step</label>
                 </span>
             </fieldset>
-            <fieldset>
+            <fieldset className="controls-input-advanced-fieldset">
                 <legend>Search</legend>
                 <input type="text"
                        id="input_searchGraphNodes"

diff --git a/site/package.json b/site/package.json
@@ -40,6 +40,7 @@
     "build-simple": "rm -rf _site ../.parcel-cache && ECZOO_DEVELOPMENT_MODE=1 DEBUG=\"*Error*,*zoo*,Eleventy:Logger,Eleventy:Benchmark\" eleventy  && yarn private_add_use_strict_to_site_js_files",
     "build-simple-noparcel": "rm -rf _site ../.parcel-cache && ECZOO_RUN_11TY_PARCEL=0 ECZOO_DEVELOPMENT_MODE=1 DEBUG=\"*Error*,*zoo*,Eleventy:Logger,Eleventy:Benchmark\" eleventy",
     "build-test": "rm -rf _site ../.parcel-cache && ECZOO_USE_TEST_DATA=1 DEBUG=\"*Error*,*zoo*,Eleventy*\" eleventy   && yarn private_add_use_strict_to_site_js_files",
+    "build-test-noparcel": "rm -rf _site ../.parcel-cache && ECZOO_RUN_11TY_PARCEL=0 ECZOO_USE_TEST_DATA=1 DEBUG=\"*Error*,*zoo*,Eleventy*\" eleventy   && yarn private_add_use_strict_to_site_js_files",
     "dev": "rm -rf _site ../.parcel-cache && ECZOO_DEVELOPMENT_MODE=1 DEBUG=\"*Error*,*zoo*,Eleventy:Logger,Eleventy:Benchmark\" eleventy --serve",
     "dev-test": "rm -rf _site ../.parcel-cache && ECZOO_USE_TEST_DATA=1 ECZOO_DEVELOPMENT_MODE=1 DEBUG=\"*Error*,*zoo*,Eleventy*\" eleventy --serve",
     "private_add_use_strict_to_site_js_files": "bash -c 'for i in _site/vv/*.js; do grep -e \"^\\\"use strict\\\";\" -q -v \"$i\" && (mv \"$i\" \"$i\".COPY; echo \"\\\"use strict\\\";\" >\"$i\"; cat \"$i\".COPY >>\"$i\"; rm \"$i\".COPY; echo \"added “use strict” to $i\";) done'",