Added Toggle to show/hide descriptions on nodes

oliviajanejohns · Jan 10, 2025 · ba9cb6c · ba9cb6c
1 parent 27e2b2a
commit ba9cb6c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 23 deletions.
diff --git a/calm-visualizer/src/App.tsx b/calm-visualizer/src/App.tsx
@@ -8,7 +8,8 @@ import React from 'react';
 function App() {
     const [title, setTitle] = useState<string | undefined>(undefined);
     const [instance, setCALMInstance] = useState<CALMInstantiation | undefined>(undefined);
-    const [isDescActive, setDescriptionsActive] = React.useState(false);
+    const [isConDescActive, setConDescActive] = React.useState(false);
+    const [isNodeDescActive, setNodeDescActive] = React.useState(false);
 
     async function handleFile(instanceFile: File) {
         const title = instanceFile.name;
@@ -23,10 +24,16 @@ function App() {
         <div className="h-screen flex flex-col">
             <Navbar
                 handleUpload={handleFile}
+                isGraphRendered={instance ? true : false}
+                toggleNodeDesc={() => setNodeDescActive((isNodeDescActive) => !isNodeDescActive)}
+                toggleConnectionDesc={() => setConDescActive((isConDescActive) => !isConDescActive)}
+            />
+            <Drawer
+                isNodeDescActive={isNodeDescActive}
+                isConDescActive={isConDescActive}
                 calmInstance={instance}
-                toggleDescriptions={() => setDescriptionsActive((isDescActive) => !isDescActive)}
+                title={title}
             />
-            <Drawer isDescActive={isDescActive} calmInstance={instance} title={title} />
         </div>
     );
 }

diff --git a/calm-visualizer/src/components/cytoscape-renderer/cytoscape.css b/calm-visualizer/src/components/cytoscape-renderer/cytoscape.css
@@ -2,12 +2,22 @@
     border: 1px solid;
     text-align: center;
     width: 200px;
-    height: 100px;
+    min-height: 100px;
     font-family: Arial;
     padding: 10px 30px 10px 30px;
     background-color: white;
 }
 
+:focus {
+    border: 1px solid;
+    border-color: blue;
+}
+
+.graph-title {
+    z-index: 1;
+    padding: var(--navbar-padding, 0.5rem);
+}
+
 .element {
     display: flex;
     flex-direction: column;

diff --git a/calm-visualizer/src/components/navbar/Navbar.tsx b/calm-visualizer/src/components/navbar/Navbar.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
-import { CALMInstantiation } from '../../../../shared/src';
 
 interface NavbarProps {
     handleUpload: (instanceFile: File) => void;
-    toggleDescriptions: () => void;
-    calmInstance?: CALMInstantiation;
+    isGraphRendered: boolean;
+    toggleConnectionDesc: () => void;
+    toggleNodeDesc: () => void;
 }
 
-function Navbar({ handleUpload, toggleDescriptions, calmInstance }: NavbarProps) {
+function Navbar({
+    handleUpload,
+    isGraphRendered,
+    toggleConnectionDesc,
+    toggleNodeDesc,
+}: NavbarProps) {
     const upload = (file: File) => {
         handleUpload(file);
     };
@@ -16,19 +21,22 @@ function Navbar({ handleUpload, toggleDescriptions, calmInstance }: NavbarProps)
         <div className="navbar bg-base-300">
             <div className="flex-1">
                 <a className="btn btn-ghost text-xl">CALM</a>
+                <div className="divider divider-horizontal"></div>
+                <span className="text-lg">Visualizer</span>
             </div>
             <div className="flex-none">
-                <ul className="menu menu-horizontal px-1">
+                <ul className="menu menu-horizontal px-1" aria-label="navbar-menu-items">
                     <li>
                         <details>
                             <summary>Upload</summary>
-                            <ul className="p-2 z-1">
+                            <ul className="p-2 z-1" aria-label="upload-dropdown-items">
                                 <li>
                                     <label>
                                         Architecture
                                         <input
                                             id="file"
                                             type="file"
+                                            aria-label="upload-architecture"
                                             className="hidden"
                                             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                 e.target.files && upload(e.target.files[0])
@@ -40,18 +48,33 @@ function Navbar({ handleUpload, toggleDescriptions, calmInstance }: NavbarProps)
                         </details>
                     </li>
                 </ul>
-                <div className="toggles">
-                    {calmInstance && (
-                        <label className="label cursor-pointer">
-                            <span className="label-text">Connection Descriptions</span>
-                            <input
-                                type="checkbox"
-                                className="toggle"
-                                onClick={toggleDescriptions}
-                            />
-                        </label>
-                    )}
-                </div>
+
+                {isGraphRendered && (
+                    <>
+                        <div className="divider divider-horizontal"></div>
+                        <div className="toggles menu-horizontal">
+                            <label className="label cursor-pointer">
+                                <span className="label label-text">Connection Descriptions</span>
+                                <input
+                                    type="checkbox"
+                                    className="toggle"
+                                    name="connection-description"
+                                    aria-label="connection-description"
+                                    onClick={toggleConnectionDesc}
+                                />
+                            </label>
+                            <label className="label cursor-pointer">
+                                <span className="label label-text">Node Descriptions</span>
+                                <input
+                                    type="checkbox"
+                                    className="toggle"
+                                    aria-label="node-description"
+                                    onClick={toggleNodeDesc}
+                                />
+                            </label>
+                        </div>
+                    </>
+                )}
             </div>
         </div>
     );

diff --git a/calm-visualizer/src/components/sidebar/Sidebar.tsx b/calm-visualizer/src/components/sidebar/Sidebar.tsx
@@ -18,13 +18,14 @@ function Sidebar({ selectedData, closeSidebar }: SidebarProps) {
     // Determine if we have selected a node or edge or something else
     const isCALMNode = isCALMNodeData(selectedData);
     const isCALMEdge = isCALMEdgeData(selectedData);
-    console.log('This is the selectedData => ', selectedData);
+
     return (
         <div className="fixed right-0 h-full w-80 bg-gray-100 shadow-lg">
             <label htmlFor="node-details" className="drawer-overlay" onClick={closeSidebar}></label>
             <div className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
                 <div className="flex justify-end">
                     <button
+                        aria-label="close-sidebar"
                         onClick={(e) => {
                             e.stopPropagation();
                             closeSidebar();