Fix Big empty space for featureImportance chart

apps/widget-e2e/src/describer/modelAssessment/Constants.ts

@@ -26,8 +26,6 @@ export enum Locators {
   ICECalloutBody = "#subPlotContainer div.ms-Callout-container div[class^='calloutInner']",
   SortByDropdown = "#featureImportanceChartContainer div.ms-Dropdown-container",
   SortByDropdownOptions = "div[class^='dropdownItemsWrapper'] button:contains('CohortCreateE2E')",
-  CohortOnOffSelectionContainer = "#iterative-container",
-  CohortOnOffCohortCreateE2E = "#iterative-container div:contains(CohortCreateE2E) [role='checkbox']",
   CreateNewCohortButton = "button:contains('New cohort')",
   CohortNameInput = "#cohortEditPanel input:eq(0)",
   CohortDatasetValueInput = "#cohortEditPanel input[class^='ms-spinButton-input']",

apps/widget-e2e/src/describer/modelAssessment/featureImportances/aggregateFeatureImportance/describeCohortFunctionality.ts

@@ -5,7 +5,6 @@ import { createCohort } from "../../../../util/createCohort";
 import { getMenu } from "../../../../util/getMenu";
 import { Locators } from "../../Constants";
 
-const cohortName = "CohortCreateE2E";
 export function describeCohortFunctionality(): void {
   describe("Cohort functionality", () => {
     before(() => {
@@ -17,23 +16,5 @@ export function describeCohortFunctionality(): void {
       cy.get(Locators.SortByDropdown).eq(0).click(); // Dropdown to select cohort
       cy.get(Locators.SortByDropdownOptions).should("exist");
     });
-
-    it("Should disable cohort in on-off items on selection", () => {
-      cy.get(Locators.CohortOnOffSelectionContainer).should(
-        "contain",
-        cohortName
-      );
-      cy.get(Locators.CohortOnOffCohortCreateE2E).should(
-        "have.attr",
-        "aria-checked",
-        "true"
-      );
-      cy.get(Locators.CohortOnOffCohortCreateE2E).click({ force: true });
-      cy.get(Locators.CohortOnOffCohortCreateE2E).should(
-        "have.attr",
-        "aria-checked",
-        "false"
-      );
-    });
   });
 }

libs/core-ui/src/lib/Highchart/BasicHighChart.tsx

@@ -13,7 +13,7 @@ export class BasicHighChart extends React.Component<ICommonChartProps> {
   public render(): React.ReactNode {
     const defaultOptions = getDefaultHighchartOptions(getTheme());
     const { className, id, fallback, configOverride = {}, theme } = this.props;
-    const chartOptions = _.merge({}, configOverride, defaultOptions);
+    const chartOptions = _.merge({}, defaultOptions, configOverride);
 
     return (
       <HighchartWrapper

libs/core-ui/src/lib/Highchart/FeatureImportanceBar.tsx

@@ -112,7 +112,6 @@ export class FeatureImportanceBar extends React.Component<
           this.props.unsortedX,
           this.props.unsortedSeries,
           this.props.topK,
-          getTheme(),
           this.props.onFeatureSelection
         );
   }

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

@@ -75,6 +75,9 @@ export function getFeatureImportanceBarOptions(
     chart: {
       type: "column"
     },
+    legend: {
+      enabled: true
+    },
     plotOptions: {
       series: {
         cursor: "pointer",

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

@@ -1,8 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ITheme } from "@fluentui/react";
-
 import { IGlobalSeries } from "../Highchart/FeatureImportanceBar";
 import { IHighchartsConfig } from "../Highchart/IHighchartsConfig";
 
@@ -14,15 +12,8 @@ export function getFeatureImportanceBoxOptions(
   unsortedX: string[],
   unsortedSeries: IGlobalSeries[],
   topK: number,
-  theme?: ITheme,
   onFeatureSelection?: (seriesIndex: number, featureIndex: number) => void
 ): IHighchartsConfig {
-  const colorTheme = {
-    axisColor: theme?.palette.neutralPrimary,
-    axisGridColor: theme?.palette.neutralLight,
-    backgroundColor: theme?.palette.white,
-    fontColor: theme?.semanticColors.bodyText
-  };
   const xText = sortArray.map((i) => unsortedX[i]);
   const boxTempData: any = [];
   let yAxisMin = Infinity;
@@ -64,9 +55,11 @@ export function getFeatureImportanceBoxOptions(
   });
   return {
     chart: {
-      backgroundColor: colorTheme.fontColor,
       type: "boxplot"
     },
+    legend: {
+      enabled: true
+    },
     plotOptions: {
       boxplot: {
         point: {

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

@@ -7,8 +7,6 @@ import {
   ModelTypes,
   WeightVectorOption,
   ChartTypes,
-  FabricStyles,
-  InteractiveLegend,
   LabelWithCallout
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
@@ -18,7 +16,6 @@ import {
   Dropdown,
   IChoiceGroupOption,
   IDropdownOption,
-  Label,
   Stack,
   Text
 } from "office-ui-fabric-react";
@@ -69,20 +66,6 @@ export class SidePanel extends React.Component<
     const classNames = globalTabStyles();
     return (
       <Stack className={classNames.legendAndSort}>
-        <Label>{localization.Interpret.GlobalTab.datasetCohorts}</Label>
-        <Text variant={"small"}>
-          {localization.Interpret.GlobalTab.legendHelpText}
-        </Text>
-        <InteractiveLegend
-          items={this.props.cohortSeries.map((row, rowIndex) => {
-            return {
-              activated: this.props.seriesIsActive[rowIndex],
-              color: FabricStyles.fabricColorPalette[row.colorIndex],
-              name: row.name,
-              onClick: (): void => this.props.toggleActivation(rowIndex)
-            };
-          })}
-        />
         <Dropdown
           label={localization.Interpret.GlobalTab.sortBy}
           selectedKey={this.props.sortingSeriesIndex}