new file component refactor

microsoft · Jan 24, 2024 · 85d8452 · 85d8452
1 parent cd5a501
commit 85d8452
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 44 deletions.
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Stack, Text } from "@fluentui/react";
+import { IVisionListItem } from "@responsible-ai/core-ui";
+import { localization } from "@responsible-ai/localization";
+import React from "react";
+
+import { stackTokens } from "./FlyoutObjectDetectionUtils";
+
+interface IDetectionDetailsProps {
+    item: IVisionListItem; // replace with actual type
+    correctDetections: string;
+    incorrectDetections: string;
+  }
+  export class DetectionDetails extends React.Component<IDetectionDetailsProps> {
+    public render(): React.ReactNode {
+      return (
+        <Stack
+          tokens={stackTokens.large}
+          horizontalAlign="start"
+          verticalAlign="start"
+        >
+          <Stack
+            horizontal
+            tokens={stackTokens.medium}
+            horizontalAlign="center"
+            verticalAlign="center"
+          />
+          <Stack.Item>
+            <Text variant="large">
+              {localization.InterpretVision.Dashboard.indexLabel}
+              {this.props.item?.index}
+            </Text>
+          </Stack.Item>
+          <Stack.Item>
+            <Text variant="large">
+              {localization.InterpretVision.Dashboard.correctDetections}
+              {this.props.correctDetections}
+            </Text>
+          </Stack.Item>
+          <Stack.Item>
+            <Text variant="large">
+              {localization.InterpretVision.Dashboard.incorrectDetections}
+              {this.props.incorrectDetections}
+            </Text>
+          </Stack.Item>
+        </Stack>
+      );
+    }
+  }
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx
@@ -20,6 +20,7 @@ import { FluentUIStyles } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
 import * as React from "react";
 import { CanvasTools } from "vott-ct";
+import { DetectionDetails } from "./DetectionDetails";
 
 import * as FlyoutStyles from "../utils/FlyoutUtils";
 import { getObjectDetectionImageAltText } from "../utils/getAltTextUtils";
@@ -123,7 +124,7 @@ export class FlyoutObjectDetection extends React.Component<
                   verticalAlign="center"
                 >
                   <Stack.Item>
-                    <FlyoutODUtils.DetectionDetails
+                    <DetectionDetails
                       item={item}
                       correctDetections={correctDetections}
                       incorrectDetections={incorrectDetections}

diff --git a/...terpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/...terpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx
@@ -28,56 +28,13 @@ export interface IFlyoutState {
   editorCallback?: HTMLDivElement;
 }
 
-interface IDetectionDetailsProps {
-  item: IVisionListItem; // replace with actual type
-  correctDetections: string;
-  incorrectDetections: string;
-}
-
 export const stackTokens = {
   large: { childrenGap: "l2" },
   medium: { childrenGap: "l1" }
 };
 
 const theme = getTheme();
 
-export class DetectionDetails extends React.Component<IDetectionDetailsProps> {
-  public render(): React.ReactNode {
-    return (
-      <Stack
-        tokens={stackTokens.large}
-        horizontalAlign="start"
-        verticalAlign="start"
-      >
-        <Stack
-          horizontal
-          tokens={stackTokens.medium}
-          horizontalAlign="center"
-          verticalAlign="center"
-        />
-        <Stack.Item>
-          <Text variant="large">
-            {localization.InterpretVision.Dashboard.indexLabel}
-            {this.props.item?.index}
-          </Text>
-        </Stack.Item>
-        <Stack.Item>
-          <Text variant="large">
-            {localization.InterpretVision.Dashboard.correctDetections}
-            {this.props.correctDetections}
-          </Text>
-        </Stack.Item>
-        <Stack.Item>
-          <Text variant="large">
-            {localization.InterpretVision.Dashboard.incorrectDetections}
-            {this.props.incorrectDetections}
-          </Text>
-        </Stack.Item>
-      </Stack>
-    );
-  }
-}
-
 export class ColorLegend extends React.Component {
   public render(): React.ReactNode {
     return (