Merge branch 'main' into gaugup/AddPreBuiltInjectionIntoRAIWidgets

libs/core-ui/src/index.ts

@@ -71,3 +71,4 @@ export * from "./lib/Interfaces/IFilter";
 export * from "./lib/Interfaces/ICohort";
 export * from "./lib/Interfaces/IErrorAnalysisData";
 export * from "./lib/Highchart/BasicHighChart";
+export * from "./lib/Highchart/FeatureImportanceDependence";

libs/core-ui/src/lib/Highchart/FeatureImportanceDependence.styles.ts

@@ -0,0 +1,96 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+  IProcessedStyleSet,
+  mergeStyleSets,
+  IStyle
+} from "office-ui-fabric-react";
+
+export interface IDependencePlotStyles {
+  DependencePlot: IStyle;
+  chartWithAxes: IStyle;
+  chart: IStyle;
+  chartWithVertical: IStyle;
+  verticalAxis: IStyle;
+  rotatedVerticalBox: IStyle;
+  horizontalAxisWithPadding: IStyle;
+  paddingDiv: IStyle;
+  horizontalAxis: IStyle;
+  placeholderWrapper: IStyle;
+  placeholder: IStyle;
+  secondaryChartPlacolderBox: IStyle;
+  secondaryChartPlacolderSpacer: IStyle;
+  faintText: IStyle;
+}
+
+export const dependencePlotStyles: () => IProcessedStyleSet<IDependencePlotStyles> =
+  () => {
+    return mergeStyleSets<IDependencePlotStyles>({
+      chart: {
+        flex: 1,
+        height: "100%"
+      },
+      chartWithAxes: {
+        display: "flex",
+        flex: "1",
+        flexDirection: "column",
+        padding: "5px 20px 0 20px"
+      },
+      chartWithVertical: {
+        display: "flex",
+        flexDirection: "row",
+        height: "400px",
+        width: "100%"
+      },
+      DependencePlot: {
+        display: "flex",
+        flexDirection: "row",
+        flexGrow: "1"
+      },
+      faintText: {
+        fontWeight: "350" as any
+      },
+      horizontalAxis: {
+        flex: 1,
+        textAlign: "center"
+      },
+      horizontalAxisWithPadding: {
+        display: "flex",
+        flexDirection: "row"
+      },
+      paddingDiv: {
+        width: "50px"
+      },
+      placeholder: {
+        maxWidth: "70%"
+      },
+      placeholderWrapper: {
+        margin: "100px auto 0 auto"
+      },
+      rotatedVerticalBox: {
+        marginLeft: "15px",
+        position: "absolute",
+        textAlign: "center",
+        top: "50%",
+        transform: "translateX(-50%) translateY(-50%) rotate(270deg)",
+        width: "max-content"
+      },
+      secondaryChartPlacolderBox: {
+        flex: 1,
+        height: "400px"
+      },
+      secondaryChartPlacolderSpacer: {
+        boxShadow: "0px 0px 6px rgba(0, 0, 0, 0.2)",
+        margin: "25px auto 0 auto",
+        padding: "23px",
+        width: "fit-content"
+      },
+      verticalAxis: {
+        height: "auto",
+        position: "relative",
+        top: "0px",
+        width: "50px"
+      }
+    });
+  };

libs/interpret/src/lib/MLIDashboard/Controls/DependencePlot/DependencyHighChart.tsx → libs/core-ui/src/lib/Highchart/FeatureImportanceDependence.tsx

@@ -1,26 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {
-  Cohort,
-  JointDataset,
-  IExplanationModelMetadata,
-  ModelTypes,
-  WeightVectorOption,
-  IGenericChartProps,
-  BasicHighChart,
-  getDependencyChartOptions
-} from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
 import _ from "lodash";
 import { getTheme, Text } from "office-ui-fabric-react";
 import React from "react";
 
-import { getDependenceData } from "../../utils/getDependenceData";
+import { Cohort } from "../Cohort/Cohort";
+import {
+  IExplanationModelMetadata,
+  ModelTypes
+} from "../Interfaces/IExplanationContext";
+import { WeightVectorOption } from "../Interfaces/IWeightedDropdownContext";
+import { FabricStyles } from "../util/FabricStyles";
+import { getDependenceData } from "../util/getDependenceData";
+import { getDependencyChartOptions } from "../util/getDependencyChartOptions";
+import { IGenericChartProps } from "../util/IGenericChartProps";
+import { JointDataset } from "../util/JointDataset";
 
-import { dependencePlotStyles } from "./DependencePlot.styles";
+import { BasicHighChart } from "./BasicHighChart";
+import { dependencePlotStyles } from "./FeatureImportanceDependence.styles";
 
-export interface IDependencyHighChartProps {
+export interface IFeatureImportanceDependenceProps {
   chartProps: IGenericChartProps | undefined;
   jointDataset: JointDataset;
   cohort: Cohort;
@@ -31,7 +32,7 @@ export interface IDependencyHighChartProps {
   onChange: (props: IGenericChartProps) => void;
 }
 
-export class DependencyHighChart extends React.PureComponent<IDependencyHighChartProps> {
+export class FeatureImportanceDependence extends React.PureComponent<IFeatureImportanceDependenceProps> {
   public render(): React.ReactNode {
     const classNames = dependencePlotStyles();
     if (this.props.chartProps === undefined) {
@@ -77,6 +78,7 @@ export class DependencyHighChart extends React.PureComponent<IDependencyHighChar
                   this.props.jointDataset.metaDict[
                     this.props.chartProps.xAxis.property
                   ].sortedCategoricalValues,
+                  FabricStyles.fabricColorPalette[this.props.cohortIndex],
                   getTheme()
                 )}
               />

libs/interpret/src/lib/MLIDashboard/utils/getDependenceData.ts → libs/core-ui/src/lib/util/getDependenceData.ts

@@ -1,15 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {
-  Cohort,
-  IDependenceData,
-  IGenericChartProps,
-  JointDataset
-} from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
 import _, { Dictionary } from "lodash";
 
+import { Cohort } from "../Cohort/Cohort";
+
+import { IDependenceData } from "./getDependencyChartOptions";
+import { IGenericChartProps } from "./IGenericChartProps";
+import { JointDataset } from "./JointDataset";
+
 export function getDependenceData(
   chartProps: IGenericChartProps | undefined,
   jointData: JointDataset,

libs/core-ui/src/lib/util/getDependencyChartOptions.ts

@@ -14,6 +14,7 @@ export interface IDependenceData {
 export function getDependencyChartOptions(
   data: IDependenceData[],
   xLabels: string[] | undefined,
+  pointColor: string,
   theme?: ITheme
 ): IHighchartsConfig {
   const colorTheme = {
@@ -45,7 +46,7 @@ export function getDependencyChartOptions(
     },
     series: [
       {
-        color: colorTheme.fontColor,
+        color: pointColor,
         data,
         name: "",
         type: "scatter"

libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.tsx

@@ -12,7 +12,8 @@ import {
   defaultModelAssessmentContext,
   ModelAssessmentContext,
   FabricStyles,
-  LabelWithCallout
+  LabelWithCallout,
+  FeatureImportanceDependence
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
 import { Dictionary } from "lodash";
@@ -28,7 +29,6 @@ import {
 } from "office-ui-fabric-react";
 import React from "react";
 
-import { DependencyHighChart } from "../DependencePlot/DependencyHighChart";
 import { explainerCalloutDictionary } from "../ExplainerCallouts/explainerCalloutDictionary";
 import { FeatureImportanceBar } from "../FeatureImportanceBar/FeatureImportanceBar";
 import { GlobalOnlyChart } from "../GlobalOnlyChart/GlobalOnlyChart";
@@ -255,7 +255,7 @@ export class GlobalExplanationTab extends React.PureComponent<
               className={classNames.secondaryChartAndLegend}
               ref={this.depPlot}
             >
-              <DependencyHighChart
+              <FeatureImportanceDependence
                 chartProps={this.state.dependenceProps}
                 cohortIndex={this.state.selectedCohortIndex}
                 cohort={this.props.cohorts[this.state.selectedCohortIndex]}