Vision Dashboard Table View and initial explanation flyout

apps/dashboard/src/interpret-vision/__mock_data__/visionData.ts

@@ -3,39 +3,42 @@
 
 import { IVisionExplanationDashboardData } from "@responsible-ai/core-ui";
 
+import { explanation } from "./explanation";
+
 export const visionData: IVisionExplanationDashboardData = {
-  classNames: ["duck", "not duck"],
+  classNames: ["Water Tower", "not Water Tower"],
   images: [
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/R.ee6c3b5dda7aba5c34b372bd8409ac49?rik=K%2bmc9gcjVhhYbQ&riu=http%3a%2f%2fclipart-library.com%2fimages%2fBigAn7qMT.jpg&ehk=SNzySL548vPVf1a8PSz5Gv%2bJXdUyh%2bf2VAPT5oVuLtg%3d&risl=&pid=ImgRaw&r=0",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1",
-    "https://th.bing.com/th/id/OIP.5hk5_K6MD4JmD0Aqvv0P-wHaHa?pid=ImgDet&rs=1"
-  ],
-  localExplanations: [
-    0, 0.5, 0, 0, -0.6, 0, 0.4, -0.9, 0, -0.3, 0, 0, 0.3, 0, 0, 0.4, 0, 0, -0.2,
-    0, 0, 0.5, 0, 0, -0.6, 0, 0, 0, 0, -0.2, 0, 0, 0, -0.3, 0, 0, 0, 0, 0, 0
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg",
+    "https://raw.githubusercontent.com/slundberg/shap/master/data/imagenet50/sim_n03029197_6381.jpg"
   ],
+  localExplanations: [explanation],
   prediction: [0, 1]
 };

libs/core-ui/src/lib/Interfaces/VisionExplanationInterfaces.ts

@@ -3,7 +3,7 @@
 
 export interface IVisionExplanationDashboardData {
   classNames: string[];
-  localExplanations: number[];
+  localExplanations: string[];
   prediction: number[];
   images: string[];
 }

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.styles.ts

@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+  IStyle,
+  mergeStyleSets,
+  IProcessedStyleSet,
+  getTheme
+} from "@fluentui/react";
+
+export interface IFlyoutStyles {
+  cell: IStyle;
+  errorIcon: IStyle;
+  explanation: IStyle;
+  featureListContainer: IStyle;
+  iconContainer: IStyle;
+  image: IStyle;
+  imageContainer: IStyle;
+  label: IStyle;
+  mainContainer: IStyle;
+  separator: IStyle;
+  successIcon: IStyle;
+  title: IStyle;
+}
+
+export const flyoutStyles: () => IProcessedStyleSet<IFlyoutStyles> = () => {
+  const theme = getTheme();
+  return mergeStyleSets<IFlyoutStyles>({
+    cell: {
+      marginBottom: "20px"
+    },
+    errorIcon: {
+      color: theme.semanticColors.errorIcon,
+      fontSize: "large",
+      fontWeight: "600"
+    },
+    explanation: {
+      position: "relative",
+      right: 85
+    },
+    featureListContainer: {
+      height: 300,
+      overflow: "auto"
+    },
+    iconContainer: {
+      position: "relative",
+      top: "2px"
+    },
+    image: {
+      marginBottom: "20px"
+    },
+    imageContainer: {
+      maxHeight: "250px",
+      maxWidth: "250px"
+    },
+    label: {
+      bottom: 20,
+      position: "relative",
+      textAlign: "start"
+    },
+    mainContainer: {
+      height: "100%",
+      overflow: "hidden"
+    },
+    separator: {
+      root: {
+        width: "100&"
+      }
+    },
+    successIcon: {
+      color: theme.semanticColors.successIcon,
+      fontSize: "large",
+      fontWeight: "600"
+    },
+    title: {
+      fontWeight: "600"
+    }
+  });
+};

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.tsx

@@ -0,0 +1,168 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+  Icon,
+  Image,
+  ImageFit,
+  List,
+  Panel,
+  PanelType,
+  FocusZone,
+  Stack,
+  Text,
+  Separator
+} from "@fluentui/react";
+import { localization } from "@responsible-ai/localization";
+import React from "react";
+
+import { IDatasetSummary } from "../Interfaces/IExplanationDashboardProps";
+
+import { flyoutStyles } from "./Flyout.styles";
+import { IListItem } from "./ImageList";
+
+export interface IFlyoutProps {
+  data: IDatasetSummary;
+  isOpen: boolean;
+  item: IListItem | undefined;
+  callback: () => void;
+}
+
+const stackTokens = {
+  childrenGap: "l1"
+};
+
+export class Flyout extends React.Component<IFlyoutProps> {
+  public render(): React.ReactNode {
+    const { data, isOpen, item, callback } = this.props;
+
+    const classNames = flyoutStyles();
+
+    const list = [];
+
+    for (let i = 0; i < 30; i++) {
+      list.push({ title: "Feature 1", value: "value" });
+    }
+
+    return (
+      <FocusZone>
+        <Panel
+          headerText={localization.InterpretVision.Dashboard.panelTitle}
+          isOpen={isOpen}
+          closeButtonAriaLabel="Close"
+          onDismiss={callback}
+          isLightDismiss
+          type={PanelType.custom}
+          customWidth="700px"
+          className={classNames.mainContainer}
+        >
+          <Stack tokens={stackTokens}>
+            <Stack.Item>
+              <Separator styles={{ root: { width: "100%" } }} />
+            </Stack.Item>
+            <Stack.Item>
+              <Stack
+                horizontal
+                tokens={stackTokens}
+                horizontalAlign="space-around"
+                verticalAlign="center"
+              >
+                <Stack.Item>
+                  <Stack
+                    horizontal
+                    tokens={{ childrenGap: "s1" }}
+                    horizontalAlign="center"
+                    verticalAlign="center"
+                  >
+                    <Stack.Item className={classNames.iconContainer}>
+                      <Icon
+                        iconName={
+                          item?.predictedY !== item?.trueY
+                            ? "Cancel"
+                            : "Checkmark"
+                        }
+                        className={
+                          item?.predictedY !== item?.trueY
+                            ? classNames.errorIcon
+                            : classNames.successIcon
+                        }
+                      />
+                    </Stack.Item>
+                    <Stack.Item>
+                      <Text variant="large" className={classNames.title}>
+                        {item?.predictedY !== item?.trueY
+                          ? localization.InterpretVision.Dashboard.titleBarError
+                          : localization.InterpretVision.Dashboard
+                              .titleBarSuccess}
+                      </Text>
+                    </Stack.Item>
+                  </Stack>
+                </Stack.Item>
+                <Stack.Item className={classNames.imageContainer}>
+                  <Image
+                    src={item?.image}
+                    className={classNames.image}
+                    imageFit={ImageFit.contain}
+                  />
+                  <Text variant="large" className={classNames.label}>
+                    {item?.title}
+                  </Text>
+                </Stack.Item>
+              </Stack>
+            </Stack.Item>
+            <Stack.Item>
+              <Separator className={classNames.separator} />
+            </Stack.Item>
+            <Stack.Item>
+              <Text variant="large" className={classNames.title}>
+                {localization.InterpretVision.Dashboard.panelExplanation}
+              </Text>
+            </Stack.Item>
+            <Stack.Item>
+              <Image
+                src={`data:image/jpg;base64,${data.localExplanations[0]}`}
+                width="800px"
+                className={classNames.explanation}
+              />
+            </Stack.Item>
+            <Stack.Item>
+              <Separator className={classNames.separator} />
+            </Stack.Item>
+            <Stack.Item>
+              <Text variant="large" className={classNames.title}>
+                {localization.InterpretVision.Dashboard.panelInformation}
+              </Text>
+            </Stack.Item>
+            <Stack.Item className={classNames.featureListContainer}>
+              <List items={list} onRenderCell={this.onRenderCell} />
+            </Stack.Item>
+          </Stack>
+        </Panel>
+      </FocusZone>
+    );
+  }
+
+  private onRenderCell = (
+    item?: { title: string; value: string } | undefined
+  ) => {
+    const classNames = flyoutStyles();
+
+    return (
+      <Stack.Item>
+        <Stack
+          horizontal
+          tokens={{ childrenGap: "l2" }}
+          verticalAlign="center"
+          className={classNames.cell}
+        >
+          <Stack.Item>
+            <Text variant="large">{item?.title}</Text>
+          </Stack.Item>
+          <Stack.Item>
+            <Text variant="large">{item?.value}</Text>
+          </Stack.Item>
+        </Stack>
+      </Stack.Item>
+    );
+  };
+}

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/ImageList.styles.ts

@@ -28,7 +28,7 @@ export const imageListStyles: () => IProcessedStyleSet<IDatasetExplorerTabStyles
         color: "black",
         fontSize: FontSizes.small,
         justifySelf: "center",
-        paddingBottom: "100%",
+        paddingBottom: 10,
         width: "100%"
       },
       list: {
@@ -37,9 +37,9 @@ export const imageListStyles: () => IProcessedStyleSet<IDatasetExplorerTabStyles
       },
       tile: {
         float: "left",
-        marginTop: "0.5%",
-        paddingLeft: "1%",
-        paddingRight: "1%",
+        marginTop: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
         position: "relative",
         textAlign: "center"
       }