From a8f00019ea735f90724dc629da91cc9cb6894e67 Mon Sep 17 00:00:00 2001
From: kleinwave <brandon.klein@quantum-machines.co>
Date: Mon, 30 Jun 2025 18:37:53 +0300
Subject: [PATCH 1/4] Adding the toggleSwitch to the topbarmenu

---
 .../ToggleSwitch/ToggleSwitch.module.scss     | 37 ++++++++++++-------
 .../common/ToggleSwitch/ToggleSwitch.tsx      | 23 ++++++------
 .../modules/Data/components/JSONEditor.tsx    | 14 ++++++-
 .../GraphLibrary/GraphLibrary.module.scss     |  8 ++++
 .../components/GraphElement/GraphElement.tsx  |  3 +-
 frontend/src/modules/GraphLibrary/index.tsx   |  4 +-
 .../src/modules/Nodes/NodesPage.module.scss   |  8 ++++
 frontend/src/modules/Nodes/index.tsx          |  4 +-
 .../src/modules/SidebarMenu/SidebarMenu.tsx   | 16 ++++++--
 .../src/modules/TopbarMenu/TitleBarMenu.tsx   | 23 +++++++++++-
 .../styles/TitleBarMenu.module.scss           | 23 ++++++++++++
 frontend/src/routing/ModulesRegistry.ts       |  6 ++-
 .../routing/flexLayout/FlexLayoutContext.tsx  |  7 ++++
 .../src/ui-lib/Icons/GraphLibraryIcon.tsx     |  4 --
 frontend/src/ui-lib/Icons/RefreshIcon.tsx     | 34 +++++++++++++++++
 15 files changed, 172 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/ui-lib/Icons/RefreshIcon.tsx

diff --git a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
index 51c92f45..4739a0d3 100644
--- a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
+++ b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
@@ -1,26 +1,35 @@
-.firstRowWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .switchWrapper {
-  display: flex;
-  gap: 8px;
-  padding: 4px;
+  display: inline-flex;
+  border: 1px solid #444;
   border-radius: 31px;
-  border: 1px solid var(--border, #42424C);
+  overflow: hidden;
 }
 
 .switchOption {
-  padding: 6px 12px;
-  border-radius: 16px;
+  position: relative;
+  flex: 1;
+  text-align: center;
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  border-radius: 31px;
   transition: background 0.3s ease;
-  color: #b0b0b0;
+}
+
+.optionLabel {
+  position: relative;
+  display: inline-block;
+  padding: 4px 12px;
+}
+
+.switchIndicator {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #2ccbe599;
 }
 
 .active {
-  background: rgb(44 203 229 / 60%);
   color: white;
 }
diff --git a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx
index e06e19c7..24eaf491 100644
--- a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx
+++ b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx
@@ -1,23 +1,24 @@
 import styles from "./ToggleSwitch.module.scss";
 
 interface IToggleSwitchProps {
-  title: string;
   activeTab: string;
   setActiveTab: (a: string) => void;
+  options: { label: string; value: string }[];
 }
 
-const ToggleSwitch = ({ title, activeTab, setActiveTab }: IToggleSwitchProps) => {
+const ToggleSwitch = ({ activeTab, setActiveTab, options }: IToggleSwitchProps) => {
   return (
-    <div className={styles.firstRowWrapper}>
-      <h1>{title}</h1>
-      <div className={styles.switchWrapper}>
-        <div className={`${styles.switchOption} ${activeTab === "live" ? styles.active : ""}`} onClick={() => setActiveTab("live")}>
-          Live
+    <div className={styles.switchWrapper}>
+      {options.map((option) => (
+        <div
+          key={option.value}
+          className={`${styles.switchOption} ${activeTab === option.value ? styles.active : ""}`}
+          onClick={() => setActiveTab(option.value)}
+        >
+          {activeTab === option.value && <span className={styles.switchIndicator}></span>}
+          <span className={styles.optionLabel}>{option.label}</span>
         </div>
-        <div className={`${styles.switchOption} ${activeTab === "final" ? styles.active : ""}`} onClick={() => setActiveTab("final")}>
-          Final
-        </div>
-      </div>
+      ))}
     </div>
   );
 };
diff --git a/frontend/src/modules/Data/components/JSONEditor.tsx b/frontend/src/modules/Data/components/JSONEditor.tsx
index 251140d6..06ebf270 100644
--- a/frontend/src/modules/Data/components/JSONEditor.tsx
+++ b/frontend/src/modules/Data/components/JSONEditor.tsx
@@ -125,7 +125,19 @@ export const JSONEditor = ({ title, jsonDataProp, height, showSearch = true, tog
       }}
     >
       {!toggleSwitch && <h1 style={{ paddingTop: "10px", paddingBottom: "5px" }}>{title}</h1>}
-      {toggleSwitch && <ToggleSwitch title={title} activeTab={activeTab} setActiveTab={setActiveTab} />}
+      {toggleSwitch && (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "10px", paddingBottom: "5px" }}>
+          <h1 style={{ margin: 0 }}>{title}</h1>
+          <ToggleSwitch
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            options={[
+              { label: "Live", value: "live" },
+              { label: "Final", value: "final" },
+            ]}
+          />
+        </div>
+      )}
       {showSearch && (
         <InputField value={searchTerm} title={"Search"} onChange={(_e, event) => handleSearch(event.target.value, event)}></InputField>
       )}
diff --git a/frontend/src/modules/GraphLibrary/GraphLibrary.module.scss b/frontend/src/modules/GraphLibrary/GraphLibrary.module.scss
index cd169d52..28fb9271 100644
--- a/frontend/src/modules/GraphLibrary/GraphLibrary.module.scss
+++ b/frontend/src/modules/GraphLibrary/GraphLibrary.module.scss
@@ -30,6 +30,14 @@
 
 .buttonWrapper {
   align-content: center;
+
+    &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
 }
 
 .listWrapper {
diff --git a/frontend/src/modules/GraphLibrary/components/GraphElement/GraphElement.tsx b/frontend/src/modules/GraphLibrary/components/GraphElement/GraphElement.tsx
index 46af5c2e..6bd2b3da 100644
--- a/frontend/src/modules/GraphLibrary/components/GraphElement/GraphElement.tsx
+++ b/frontend/src/modules/GraphLibrary/components/GraphElement/GraphElement.tsx
@@ -39,7 +39,7 @@ export const GraphElement: React.FC<ICalibrationGraphElementProps> = ({ calibrat
     setLastRunInfo,
     fetchWorkflowGraph,
   } = useGraphContext();
-  const { openTab } = useFlexLayoutContext();
+  const { openTab, setGraphTab } = useFlexLayoutContext();
 
   const updateParameter = (paramKey: string, newValue: boolean | number | string, workflow?: NodeDTO | GraphWorkflow) => {
     const updatedParameters = {
@@ -121,6 +121,7 @@ export const GraphElement: React.FC<ICalibrationGraphElementProps> = ({ calibrat
       const response = await GraphLibraryApi.submitWorkflow(selectedWorkflowName, transformDataForSubmit());
       if (response.isOk) {
         openTab("graph-status");
+        setGraphTab("active");
       } else {
         setErrorObject(response.error);
       }
diff --git a/frontend/src/modules/GraphLibrary/index.tsx b/frontend/src/modules/GraphLibrary/index.tsx
index 0eb620c9..736cc75b 100644
--- a/frontend/src/modules/GraphLibrary/index.tsx
+++ b/frontend/src/modules/GraphLibrary/index.tsx
@@ -5,7 +5,7 @@ import { GraphContextProvider, useGraphContext } from "./context/GraphContext";
 import { GraphList } from "./components/GraphList";
 import { SelectionContextProvider } from "../common/context/SelectionContext";
 import { useFlexLayoutContext } from "../../routing/flexLayout/FlexLayoutContext";
-import BlueButton from "../../ui-lib/components/Button/BlueButton";
+import RefreshIcon from "../../ui-lib/Icons/RefreshIcon";
 
 export const GraphLibrary = () => {
   const { fetchAllCalibrationGraphs } = useGraphContext();
@@ -13,7 +13,7 @@ export const GraphLibrary = () => {
   const GraphLibraryTopBarRefreshButton = () => {
     return (
       <div className={styles.buttonWrapper}>
-        <BlueButton onClick={() => fetchAllCalibrationGraphs(true)}>Refresh</BlueButton>
+        <button onClick={() => fetchAllCalibrationGraphs(true)} title="Refresh graph parameters"> <RefreshIcon /> </button>
       </div>
     );
   };
diff --git a/frontend/src/modules/Nodes/NodesPage.module.scss b/frontend/src/modules/Nodes/NodesPage.module.scss
index c33e63ed..b0f2760b 100644
--- a/frontend/src/modules/Nodes/NodesPage.module.scss
+++ b/frontend/src/modules/Nodes/NodesPage.module.scss
@@ -57,6 +57,14 @@
   display: flex;
   background-color: #28292F;
   align-self: center;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
 }
 
 .nodeElementListWrapper {
diff --git a/frontend/src/modules/Nodes/index.tsx b/frontend/src/modules/Nodes/index.tsx
index 23e038a9..f1fb5fe6 100644
--- a/frontend/src/modules/Nodes/index.tsx
+++ b/frontend/src/modules/Nodes/index.tsx
@@ -6,8 +6,8 @@ import { NodeElementList } from "./components/NodeElement/NodeElementList";
 import { RunningJob } from "./components/RunningJob/RunningJob";
 import { Results } from "./components/Results/Results";
 import { SelectionContextProvider } from "../common/context/SelectionContext";
-import BlueButton from "../../ui-lib/components/Button/BlueButton";
 import { useFlexLayoutContext } from "../../routing/flexLayout/FlexLayoutContext";
+import RefreshIcon from "../../ui-lib/Icons/RefreshIcon";
 
 export const NodesPage = () => {
   const { allNodes, runningNodeInfo, fetchAllNodes } = useNodesContext();
@@ -15,7 +15,7 @@ export const NodesPage = () => {
   const NodeTopBarRefreshButton = () => {
     return (
       <div className={styles.refreshButtonWrapper} data-testid="refresh-button">
-        <BlueButton onClick={() => fetchAllNodes()}>Refresh</BlueButton>
+        <button onClick={() => fetchAllNodes()} title="Refresh node parameters"> <RefreshIcon /> </button>
       </div>
     );
   };
diff --git a/frontend/src/modules/SidebarMenu/SidebarMenu.tsx b/frontend/src/modules/SidebarMenu/SidebarMenu.tsx
index c9504fe8..2ab4e699 100644
--- a/frontend/src/modules/SidebarMenu/SidebarMenu.tsx
+++ b/frontend/src/modules/SidebarMenu/SidebarMenu.tsx
@@ -12,11 +12,12 @@ import QUAlibrateLogoSmallIcon from "../../ui-lib/Icons/QualibrateLogoSmall";
 import { HelpIcon } from "../../ui-lib/Icons/HelpIcon";
 import ExpandSideMenuIcon from "../../ui-lib/Icons/ExpandSideMenuIcon";
 import CollapseSideMenuIcon from "../../ui-lib/Icons/CollapseSideMenuIcon";
+import { useFlexLayoutContext } from "../../routing/flexLayout/FlexLayoutContext";
 
 const SidebarMenu: React.FunctionComponent = () => {
   const { pinSideMenu } = useContext(GlobalThemeContext) as GlobalThemeContextState;
   const [minify, setMinify] = useState(true);
-
+  const { openTab, graphTab } = useFlexLayoutContext();
   const containerClassName = classNames(styles.sidebarMenu, minify ? styles.collapsed : styles.expanded);
 
   useEffect(() => {
@@ -38,9 +39,16 @@ const SidebarMenu: React.FunctionComponent = () => {
 
       <div className={styles.menuContent}>
         <div className={styles.menuUpperContent}>
-          {menuItems.map((item, index) => (
-            <MenuItem {...item} key={index} hideText={minify} data-testid={`menu-item-${index}`} />
-          ))}
+          {menuItems.filter((item) => !item.hidden).map((item, index) => {
+            const isGraphMenu = item.keyId === "graph-library";
+
+            const handleClick = () => {
+              if (isGraphMenu) { openTab(graphTab === "run" ? "graph-library" : "graph-status"); }
+            };
+            return (
+              <MenuItem {...item} key={index} hideText={minify} data-testid={`menu-item-${index}`} onClick={isGraphMenu ? handleClick : undefined} />
+            );
+          })}
         </div>
 
         <div className={styles.menuBottomContent}>
diff --git a/frontend/src/modules/TopbarMenu/TitleBarMenu.tsx b/frontend/src/modules/TopbarMenu/TitleBarMenu.tsx
index a3393ee7..108b3727 100644
--- a/frontend/src/modules/TopbarMenu/TitleBarMenu.tsx
+++ b/frontend/src/modules/TopbarMenu/TitleBarMenu.tsx
@@ -5,6 +5,7 @@ import modulesMap from "../../routing/ModulesRegistry";
 import PageName from "../../common/ui-components/common/Page/PageName";
 import TitleBarMenuCard from "./TitleBarMenuCard";
 import { NodesApi } from "../Nodes/api/NodesAPI";
+import ToggleSwitch from "../../common/ui-components/common/ToggleSwitch/ToggleSwitch";
 
 export interface LastRunStatusNodeResponseDTO {
   status: string;
@@ -18,9 +19,15 @@ export interface LastRunStatusNodeResponseDTO {
 }
 
 const TitleBarMenu: React.FC = () => {
-  const { activeTab, topBarAdditionalComponents } = useFlexLayoutContext();
+  const { activeTab, topBarAdditionalComponents, openTab, graphTab, setGraphTab } = useFlexLayoutContext();
   const [node, setNode] = useState<LastRunStatusNodeResponseDTO | null>(null);
 
+  const handleTabChange = (value: string) => {
+    setGraphTab(value);
+    if (value === "run") openTab("graph-library");
+    else openTab("graph-status");
+  };
+
   const fetchStatus = async () => {
     const res = await NodesApi.fetchLastRunStatusInfo();
     if (res.isOk && res.result?.node) {
@@ -36,7 +43,21 @@ const TitleBarMenu: React.FC = () => {
   return (
     <div className={styles.wrapper}>
       <PageName>{modulesMap[activeTab ?? ""]?.menuItem?.title ?? ""}</PageName>
+      
+    <div className={styles.ToggleSwitchAndRefreshWrapper}>
+      {(activeTab === "graph-library" || activeTab === "graph-status") && (
+        <ToggleSwitch
+          activeTab={graphTab}
+          setActiveTab={handleTabChange}
+          options={[
+            { label: "Run graph", value: "run" },
+            { label: "Active graph", value: "active" },
+          ]}
+        />
+      )}
+
       {topBarAdditionalComponents && topBarAdditionalComponents[activeTab ?? ""]}
+    </div>
 
       <div className={styles.menuCardsWrapper}>
         <TitleBarMenuCard
diff --git a/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss b/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss
index 1c8cf838..a0a82e48 100644
--- a/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss
+++ b/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss
@@ -22,3 +22,26 @@
   margin-right: 25px;
 }
 
+.refreshButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.ToggleSwitchAndRefreshWrapper {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  gap: 10px;
+}
diff --git a/frontend/src/routing/ModulesRegistry.ts b/frontend/src/routing/ModulesRegistry.ts
index 8f2ba88b..2d6025e9 100644
--- a/frontend/src/routing/ModulesRegistry.ts
+++ b/frontend/src/routing/ModulesRegistry.ts
@@ -49,6 +49,7 @@ export type Module = {
     path?: string;
     dataCy?: string;
   };
+  hidden?: boolean;
   // onClick?: () => void;
 };
 
@@ -83,7 +84,7 @@ export const ModulesRegistry: Array<Module> = [
     Component: CalibrationGraph,
     menuItem: {
       sideBarTitle: "Graph Library",
-      title: "Run calibration graph",
+      title: "Calibration graph",
       icon: GraphLibraryIcon,
       dataCy: cyKeys.CALIBRATION_TAB,
     },
@@ -94,10 +95,11 @@ export const ModulesRegistry: Array<Module> = [
     Component: GraphStatus,
     menuItem: {
       sideBarTitle: "Graph Status",
-      title: "Graph Status",
+      title: "Calibration graph",
       icon: GraphStatusIcon,
       dataCy: cyKeys.NODES_TAB,
     },
+    hidden: true,
   },
   {
     keyId: DATA_KEY,
diff --git a/frontend/src/routing/flexLayout/FlexLayoutContext.tsx b/frontend/src/routing/flexLayout/FlexLayoutContext.tsx
index 1cfda1ab..d6681515 100644
--- a/frontend/src/routing/flexLayout/FlexLayoutContext.tsx
+++ b/frontend/src/routing/flexLayout/FlexLayoutContext.tsx
@@ -18,6 +18,8 @@ interface IFlexLayoutContext {
   setTopBarAdditionalComponents: (a: { [id: string]: React.JSX.Element } | undefined) => void;
   selectedPageName: ModuleKey | null;
   setSelectedPageName: (a: ModuleKey | null) => void;
+  graphTab: string;
+  setGraphTab: (tab: string) => void;
 }
 
 const FlexLayoutContext = React.createContext<IFlexLayoutContext | null>(null);
@@ -38,6 +40,7 @@ export function FlexLayoutContextProvider(props: PropsWithChildren<ReactNode | R
     | undefined
   >(undefined);
   const [selectedPageName, setSelectedPageName] = useState<ModuleKey | null>(null);
+  const [graphTab, setGraphTab] = useState<string>("run");
 
   useEffect(() => {
     // openTab("nodes");
@@ -47,6 +50,8 @@ export function FlexLayoutContextProvider(props: PropsWithChildren<ReactNode | R
   const handleIframeUrlSetup = (tab: ModuleKey) => {
     if (tab === "graph-status") {
       setSelectedPageName("graph-status");
+    } else if (tab === "graph-library") {
+      setSelectedPageName("graph-library");
     } else if (tab === "nodes") {
       setSelectedPageName("nodes");
     } else if (tab === "data") {
@@ -106,6 +111,8 @@ export function FlexLayoutContextProvider(props: PropsWithChildren<ReactNode | R
         setTopBarAdditionalComponents,
         selectedPageName,
         setSelectedPageName,
+        graphTab,
+        setGraphTab,
       }}
     >
       {children}
diff --git a/frontend/src/ui-lib/Icons/GraphLibraryIcon.tsx b/frontend/src/ui-lib/Icons/GraphLibraryIcon.tsx
index faab6479..ec0817ef 100644
--- a/frontend/src/ui-lib/Icons/GraphLibraryIcon.tsx
+++ b/frontend/src/ui-lib/Icons/GraphLibraryIcon.tsx
@@ -20,10 +20,6 @@ const GraphLibraryIcon: React.FC<{ width?: number; height?: number; className?:
         <circle cx="4.5" cy="4.5" r="3.5" stroke="#ffffff" strokeWidth="1.2" />
         <path d="M7 7L10.5 10" stroke="#ffffff" strokeWidth="1.5" />
         <path d="M15.5 14L18.5 17" stroke="#ffffff" strokeWidth="1.5" />
-        <path
-          d="M24.5 2.63398C25.1667 3.01888 25.1667 3.98113 24.5 4.36603L20.75 6.53109C20.0833 6.91599 19.25 6.43486 19.25 5.66506L19.25 1.33493C19.25 0.565134 20.0833 0.0840107 20.75 0.468911L24.5 2.63398Z"
-          fill="#18DAA4"
-        />
       </g>
       <defs>
         <clipPath id="clip0">
diff --git a/frontend/src/ui-lib/Icons/RefreshIcon.tsx b/frontend/src/ui-lib/Icons/RefreshIcon.tsx
new file mode 100644
index 00000000..b0cbc896
--- /dev/null
+++ b/frontend/src/ui-lib/Icons/RefreshIcon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+const RefreshButton: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: "flex",
+        width: "26px",
+        height: "26px",
+        padding: "4px 0px",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "1px",
+        flexShrink: 0,
+        borderRadius: "31px",
+        border: "1px solid var(--border, #42424C)",
+        background: "none",
+        cursor: "pointer",
+      }}
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <mask id="mask0_4399_8326" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+          <rect width="20" height="20" fill="#C4C4C4"/>
+        </mask>
+        <g mask="url(#mask0_4399_8326)">
+          <path d="M16.1767 10.1134C16.1761 9.12124 15.945 8.1846 15.5335 7.35099L14.2004 8.68414C14.3509 9.1331 14.4408 9.61141 14.4402 10.1103C14.4395 12.5999 12.4152 14.6243 9.92619 14.6243C7.4391 14.6224 5.41596 12.5993 5.41222 10.1103C5.41471 7.62136 7.43785 5.59822 9.92619 5.59635C9.93306 5.59572 9.9493 5.59947 9.95929 5.59822L9.96054 5.59947L9.96179 8.12104L13.6558 4.75564L9.96183 1.39028L9.96179 3.85982C9.94992 3.86294 9.93556 3.86357 9.92557 3.86232C6.47561 3.86169 3.67756 6.65975 3.67818 10.1097C3.67943 13.564 6.47561 16.3602 9.92932 16.3608C13.378 16.3602 16.178 13.564 16.1767 10.1134Z" fill="#A5ACB6"/>
+        </g>
+      </svg>
+    </button>
+  );
+};
+
+export default RefreshButton;

From cbf3f75bf120e8389d259fc9fac10b1c1d887063 Mon Sep 17 00:00:00 2001
From: kleinwave <brandon.klein@quantum-machines.co>
Date: Thu, 3 Jul 2025 15:57:38 +0300
Subject: [PATCH 2/4] addressing (some) review comments

---
 frontend/src/assets/styles/index.scss                |  2 ++
 .../common/ToggleSwitch/ToggleSwitch.module.scss     |  4 ++--
 .../modules/Data/components/JSONEditor.module.scss   | 12 ++++++++++++
 frontend/src/modules/Data/components/JSONEditor.tsx  |  5 +++--
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss
index 5de74c43..18eaabff 100644
--- a/frontend/src/assets/styles/index.scss
+++ b/frontend/src/assets/styles/index.scss
@@ -270,6 +270,8 @@ button {
   --action-button-hover-border: #2f7988;
   --color-splitter: #212125;
   --color-splitter-hover: #2b444d;
+  --switchwrapper-border-color: #444;
+  --switchindicator-background-color: #2ccbe599;
 }
 
 ::-webkit-scrollbar {
diff --git a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
index 4739a0d3..94d554d1 100644
--- a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
+++ b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
@@ -1,6 +1,6 @@
 .switchWrapper {
   display: inline-flex;
-  border: 1px solid #444;
+  border: 1px solid var(--switchwrapper-border-color);
   border-radius: 31px;
   overflow: hidden;
 }
@@ -27,7 +27,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #2ccbe599;
+  background-color: var(--switchindicator-background-color);
 }
 
 .active {
diff --git a/frontend/src/modules/Data/components/JSONEditor.module.scss b/frontend/src/modules/Data/components/JSONEditor.module.scss
index d71d8196..cc422265 100644
--- a/frontend/src/modules/Data/components/JSONEditor.module.scss
+++ b/frontend/src/modules/Data/components/JSONEditor.module.scss
@@ -14,6 +14,18 @@
   line-height: normal;
 }
 
+.titleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-bottom: 5px;
+}
+
+.titleNoMargin {
+  margin: 0;
+}
+
 .switchWrapper {
   display: flex;
   vertical-align: middle;
diff --git a/frontend/src/modules/Data/components/JSONEditor.tsx b/frontend/src/modules/Data/components/JSONEditor.tsx
index 06ebf270..1448c633 100644
--- a/frontend/src/modules/Data/components/JSONEditor.tsx
+++ b/frontend/src/modules/Data/components/JSONEditor.tsx
@@ -1,4 +1,5 @@
 import React, { ChangeEvent, useEffect, useState } from "react";
+import styles from "./JSONEditor.module.scss";
 import jp from "jsonpath";
 import { defineDataType, JsonViewer, Path } from "@textea/json-viewer";
 import InputField from "../../../common/ui-components/common/Input/InputField";
@@ -126,8 +127,8 @@ export const JSONEditor = ({ title, jsonDataProp, height, showSearch = true, tog
     >
       {!toggleSwitch && <h1 style={{ paddingTop: "10px", paddingBottom: "5px" }}>{title}</h1>}
       {toggleSwitch && (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "10px", paddingBottom: "5px" }}>
-          <h1 style={{ margin: 0 }}>{title}</h1>
+      <div className={styles.titleRow}>
+        <h1 className={styles.titleNoMargin}>{title}</h1>
           <ToggleSwitch
             activeTab={activeTab}
             setActiveTab={setActiveTab}

From 45c03d9fac1fe16f90cf305300907897c24a3e68 Mon Sep 17 00:00:00 2001
From: kleinwave <brandon.klein@quantum-machines.co>
Date: Wed, 23 Jul 2025 16:00:59 +0300
Subject: [PATCH 3/4] fixing linter warning

---
 .../TopbarMenu/styles/TitleBarMenu.module.scss | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss b/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss
index d139ce20..76ea19ee 100644
--- a/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss
+++ b/frontend/src/modules/TopbarMenu/styles/TitleBarMenu.module.scss
@@ -14,21 +14,14 @@
 
 .menuCardsWrapper {
   display: flex;
+  align-items: center;
+  justify-content: flex-end;
   flex-wrap: wrap;
   gap: 12px;
-  margin-left: auto;
-  justify-content: flex-end;
   padding-right: 25px;
   margin-right: 25px;
 }
 
-.ToggleSwitchAndRefreshWrapper {
-  display: flex;
-  align-items: center;
-  margin-left: 10px;
-  gap: 10px;
-}
-
 .topBarRow {
   display: flex;
   flex-direction: column;
@@ -40,10 +33,3 @@
   align-items: center;
   gap: 12px;
 }
-
-.menuCardsWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-}

From 4c334fb44ee520dfff467bec368c6db93f299e24 Mon Sep 17 00:00:00 2001
From: kleinwave <brandon.klein@quantum-machines.co>
Date: Wed, 23 Jul 2025 16:18:00 +0300
Subject: [PATCH 4/4] clicking graph menu card now also toggles the toggle
 switch

---
 .../TopbarMenu/TitleBarGraphCard/TitleBarGraphCard.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/modules/TopbarMenu/TitleBarGraphCard/TitleBarGraphCard.tsx b/frontend/src/modules/TopbarMenu/TitleBarGraphCard/TitleBarGraphCard.tsx
index d5aa7f2b..c32f6fc1 100644
--- a/frontend/src/modules/TopbarMenu/TitleBarGraphCard/TitleBarGraphCard.tsx
+++ b/frontend/src/modules/TopbarMenu/TitleBarGraphCard/TitleBarGraphCard.tsx
@@ -13,6 +13,7 @@ import { SnapshotsApi } from "../../Snapshots/api/SnapshotsApi";
 import { GraphItem, useWebSocketData } from "../../../contexts/WebSocketContext";
 
 const TitleBarGraphCard: React.FC = () => {
+  const { openTab, setGraphTab } = useFlexLayoutContext();
   const { runStatus } = useWebSocketData();
   const [node, setNode] = useState<LastRunStatusNodeResponseDTO>(fallbackNode);
   const [graph, setGraph] = useState<GraphItem>(fallbackGraph);
@@ -28,9 +29,12 @@ const TitleBarGraphCard: React.FC = () => {
     }
   }, [runStatus]);
 
-  const { openTab } = useFlexLayoutContext();
-  const handleClick = () => openTab(graph.status === "pending" ? "graph-library" : "graph-status");
-
+  const handleClick = () => {
+    const isPending = graph.status === "pending";
+    setGraphTab(isPending ? "run" : "active");
+    openTab(isPending ? "graph-library" : "graph-status");
+  };
+  
   const renderElapsedTime = (time: number) => (
     <div className={styles.stopAndTimeWrapper}>
       <div className={styles.timeRemaining}>