From e1ccef1c3e7139eef8335e7d79598dd0b3cfd540 Mon Sep 17 00:00:00 2001
From: YeonV <trusted.yeon@gmail.com>
Date: Tue, 18 Feb 2025 16:25:29 +0100
Subject: [PATCH] respect showGaps and showComplex feature toggles for
 pixelgraph websocket subscriptions

---
 src/pages/Devices/Devices.tsx | 14 +++++++++++++-
 src/pages/Home/DbDevices.tsx  | 16 ++++++++++++++--
 src/utils/Websocket.ts        | 16 +++++++++++++++-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/pages/Devices/Devices.tsx b/src/pages/Devices/Devices.tsx
index 67d386fb..f0da16ee 100644
--- a/src/pages/Devices/Devices.tsx
+++ b/src/pages/Devices/Devices.tsx
@@ -89,7 +89,19 @@ const Devices = () => {
 
   useEffect(() => {
     if (graphs && graphsMulti) {
-      setPixelGraphs(Object.keys(virtuals))
+      setPixelGraphs(
+        Object.keys(virtuals)
+          .filter((v) =>
+            showComplex
+              ? v
+              : !(
+                  v.endsWith('-mask') ||
+                  v.endsWith('-foreground') ||
+                  v.endsWith('-background')
+                )
+          )
+          .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
+      )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphs, graphsMulti, setPixelGraphs])
diff --git a/src/pages/Home/DbDevices.tsx b/src/pages/Home/DbDevices.tsx
index 02a7cd67..fb216c1c 100644
--- a/src/pages/Home/DbDevices.tsx
+++ b/src/pages/Home/DbDevices.tsx
@@ -239,9 +239,21 @@ const DbDevices = () => {
 
   useEffect(() => {
     if (graphs && graphsMulti) {
-      setPixelGraphs(Object.keys(virtuals))
+      setPixelGraphs(
+        Object.keys(virtuals)
+          .filter((v) =>
+            showComplex
+              ? v
+              : !(
+                  v.endsWith('-mask') ||
+                  v.endsWith('-foreground') ||
+                  v.endsWith('-background')
+                )
+          )
+          .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
+      )
     }
-  }, [graphs, graphsMulti, setPixelGraphs, virtuals])
+  }, [graphs, graphsMulti, setPixelGraphs, virtuals, showComplex, showGaps])
 
   const handleEvent: GridEventListener<'rowClick'> = (params) =>
     navigate(`/device/${params.row.id}`)
diff --git a/src/utils/Websocket.ts b/src/utils/Websocket.ts
index beb09197..08de83a8 100644
--- a/src/utils/Websocket.ts
+++ b/src/utils/Websocket.ts
@@ -203,6 +203,8 @@ export const HandleWs = () => {
   const setPixelGraphs = useStore((state) => state.setPixelGraphs)
   const graphs = useStore((state) => state.graphs)
   const graphsMulti = useStore((state) => state.graphsMulti)
+  const showComplex = useStore((state) => state.showComplex)
+  const showGaps = useStore((state) => state.showGaps)
   const [wsReady, setWsReady] = useState(false)
 
   useLayoutEffect(() => {
@@ -216,7 +218,19 @@ export const HandleWs = () => {
     if (!graphs || !graphsMulti) {
       setPixelGraphs([])
     } else {
-      setPixelGraphs(Object.keys(virtuals))
+      setPixelGraphs(
+        Object.keys(virtuals)
+          .filter((v) =>
+            showComplex
+              ? v
+              : !(
+                  v.endsWith('-mask') ||
+                  v.endsWith('-foreground') ||
+                  v.endsWith('-background')
+                )
+          )
+          .filter((v) => (showGaps ? v : !v.startsWith('gap-')))
+      )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphs, graphsMulti])