Optimize UI CPU usage (#2168)

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" />

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 {

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,

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) =>

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">