refactor

microsoft · Jan 23, 2024 · cd5a501 · cd5a501
1 parent b712aac
commit cd5a501
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx
@@ -14,8 +14,7 @@ import {
   Separator,
   Spinner,
   Stack,
-  Text,
-  getTheme
+  Text
 } from "@fluentui/react";
 import { FluentUIStyles } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
@@ -101,7 +100,6 @@ export class FlyoutObjectDetection extends React.Component<
       odIncorrect,
       item.index
     );
-    const theme = getTheme();
     return (
       <FocusZone>
         <Panel
@@ -155,32 +153,7 @@ export class FlyoutObjectDetection extends React.Component<
                   />
                 </Stack.Item>
               </Stack>
-              <Stack horizontal tokens={FlyoutODUtils.stackTokens.large}>
-                <Stack horizontal tokens={FlyoutODUtils.stackTokens.medium}>
-                  <Text variant="medium">
-                    {localization.InterpretVision.Dashboard.trueY}
-                  </Text>
-                  <div
-                    style={{
-                      backgroundColor: theme.palette.green,
-                      height: 20,
-                      width: 20
-                    }}
-                  />
-                </Stack>
-                <Stack horizontal tokens={FlyoutODUtils.stackTokens.medium}>
-                  <Text variant="medium">
-                    {localization.InterpretVision.Dashboard.predictedY}
-                  </Text>
-                  <div
-                    style={{
-                      backgroundColor: theme.palette.magenta,
-                      height: 20,
-                      width: 20
-                    }}
-                  />
-                </Stack>
-              </Stack>
+              <FlyoutODUtils.ColorLegend />
               <Stack>
                 <Stack.Item className={classNames.imageContainer}>
                   <Stack.Item id="canvasToolsDiv">

diff --git a/...terpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/...terpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx
@@ -39,6 +39,8 @@ export const stackTokens = {
   medium: { childrenGap: "l1" }
 };
 
+const theme = getTheme();
+
 export class DetectionDetails extends React.Component<IDetectionDetailsProps> {
   public render(): React.ReactNode {
     return (
@@ -76,6 +78,39 @@ export class DetectionDetails extends React.Component<IDetectionDetailsProps> {
   }
 }
 
+export class ColorLegend extends React.Component {
+  public render(): React.ReactNode {
+    return (
+      <Stack horizontal tokens={stackTokens.large}>
+        <Stack horizontal tokens={stackTokens.medium}>
+          <Text variant="medium">
+            {localization.InterpretVision.Dashboard.trueY}
+          </Text>
+          <div
+            style={{
+              backgroundColor: theme.palette.green,
+              height: 20,
+              width: 20
+            }}
+          />
+        </Stack>
+        <Stack horizontal tokens={stackTokens.medium}>
+          <Text variant="medium">
+            {localization.InterpretVision.Dashboard.predictedY}
+          </Text>
+          <div
+            style={{
+              backgroundColor: theme.palette.magenta,
+              height: 20,
+              width: 20
+            }}
+          />
+        </Stack>
+      </Stack>
+    );
+  }
+}
+
 export const ExcessLabelLen =
   localization.InterpretVision.Dashboard.prefix.length;
 
@@ -154,8 +189,6 @@ export function drawBoundingBoxes(
     return;
   }
 
-  const theme = getTheme();
-
   // Ensuring object detection labels are populated
   if (
     !dataset.object_detection_predicted_y ||