From 9d7222a19e43e439a67dae6822f943fb56d1c3cb Mon Sep 17 00:00:00 2001
From: Gold856 <117957790+Gold856@users.noreply.github.com>
Date: Sun, 7 Dec 2025 01:35:49 -0500
Subject: [PATCH] Optimize UI CPU usage (#2168)

---
 photon-client/src/components/app/photon-sidebar.vue |  3 +--
 .../src/stores/settings/CameraSettingsStore.ts      |  5 +----
 photon-client/src/types/SettingTypes.ts             |  4 ++--
 photon-client/src/views/CameraMatchingView.vue      |  2 +-
 photon-client/src/views/DashboardView.vue           | 13 +++----------
 5 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index 2ff34f0fd..7655d32d8 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -25,8 +25,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 <template>
   <v-navigation-drawer permanent :rail="renderCompact" color="sidebar">
     <v-list nav color="primary">
-      <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
-      <v-list-item :class="renderCompact ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
+      <v-list-item class="pr-0 pl-0" style="display: flex; justify-content: center">
         <template #prepend>
           <img v-if="!renderCompact" class="logo" src="@/assets/images/logoLarge.svg" alt="large logo" />
           <img v-else class="logo" src="@/assets/images/logoSmallTransparent.svg" alt="small logo" />
diff --git a/photon-client/src/stores/settings/CameraSettingsStore.ts b/photon-client/src/stores/settings/CameraSettingsStore.ts
index 3e33f1af6..5f82331e9 100644
--- a/photon-client/src/stores/settings/CameraSettingsStore.ts
+++ b/photon-client/src/stores/settings/CameraSettingsStore.ts
@@ -27,10 +27,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
   }),
   getters: {
     needsCameraConfiguration(): boolean {
-      return (
-        JSON.stringify(useCameraSettingsStore().cameras[PlaceholderCameraSettings.uniqueName]) ===
-        JSON.stringify(PlaceholderCameraSettings)
-      );
+      return useCameraSettingsStore().cameras["Placeholder Name"] === PlaceholderCameraSettings;
     },
     // TODO update types to update this value being undefined. This would be a decently large change.
     currentCameraSettings(): UiCameraConfiguration {
diff --git a/photon-client/src/types/SettingTypes.ts b/photon-client/src/types/SettingTypes.ts
index 59fa0d39a..a16f52d32 100644
--- a/photon-client/src/types/SettingTypes.ts
+++ b/photon-client/src/types/SettingTypes.ts
@@ -274,7 +274,7 @@ export interface CameraSettingsChangeRequest {
   quirksToChange: Record<ValidQuirks, boolean>;
 }
 
-export const PlaceholderCameraSettings: UiCameraConfiguration = {
+export const PlaceholderCameraSettings: UiCameraConfiguration = Object.freeze({
   cameraPath: "/dev/null",
 
   nickname: "Placeholder Camera",
@@ -391,7 +391,7 @@ export const PlaceholderCameraSettings: UiCameraConfiguration = {
   isConnected: true,
   hasConnected: true,
   mismatch: false
-};
+});
 
 export enum CalibrationBoardTypes {
   Chessboard = 0,
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index fbba51889..04eca8bc9 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -87,7 +87,7 @@ const unmatchedCameras = computed(() => {
 const activeVisionModules = computed(() =>
   Object.values(useCameraSettingsStore().cameras)
     // Ignore placeholder camera
-    .filter((camera) => JSON.stringify(camera) !== JSON.stringify(PlaceholderCameraSettings))
+    .filter((camera) => camera !== PlaceholderCameraSettings)
     // Display connected cameras first
     .sort(
       (first, second) =>
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index 1ec723667..808a3ffef 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -64,10 +64,8 @@ const cameraMismatchWarningShown = computed<boolean>(() => {
   return (
     Object.values(useCameraSettingsStore().cameras)
       // Ignore placeholder camera
-      .filter((camera) => JSON.stringify(camera) !== JSON.stringify(PlaceholderCameraSettings))
-      .some((camera) => {
-        return camera.mismatch;
-      })
+      .filter((camera) => camera !== PlaceholderCameraSettings)
+      .some((camera) => camera.mismatch)
   );
 });
 
@@ -148,12 +146,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
     <PipelineConfigCard />
 
     <!-- TODO - not sure this belongs here -->
-    <v-dialog
-      v-if="useCameraSettingsStore().needsCameraConfiguration"
-      v-model="showCameraSetupDialog"
-      max-width="800"
-      dark
-    >
+    <v-dialog v-model="showCameraSetupDialog" max-width="800" dark>
       <v-card flat color="surface">
         <v-card-title>Set up some cameras to get started!</v-card-title>
         <v-card-text class="pt-0">