From 85d845215f0f057e7334e9573161e3fb054f5e7a Mon Sep 17 00:00:00 2001
From: Advitya Gemawat <agemawat@microsoft.com>
Date: Wed, 24 Jan 2024 09:56:34 -0500
Subject: [PATCH] new file component refactor

---
 .../Controls/DetectionDetails.tsx             | 51 +++++++++++++++++++
 .../Controls/FlyoutObjectDetection.tsx        |  3 +-
 .../Controls/FlyoutObjectDetectionUtils.tsx   | 43 ----------------
 3 files changed, 53 insertions(+), 44 deletions(-)
 create mode 100644 libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx
new file mode 100644
index 0000000000..13e095c479
--- /dev/null
+++ 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>
+      );
+    }
+  }
\ No newline at end of file
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx
index 35a950b7e2..4ac826c0ed 100644
--- 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/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx
index 8598334ecb..6de3e33643 100644
--- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx
+++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx
@@ -28,12 +28,6 @@ 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" }
@@ -41,43 +35,6 @@ export const stackTokens = {
 
 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 (