[Big data] Few bug fixes and changes (#2056)

* fix button overflow Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * no bubble call on revert Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * counter Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * dataexp Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * causal Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * loading agg fp Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * add Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * counterf Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * FI Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * DE Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * updates Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * lintfix Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * lintf Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> * DE loading Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com> --------- Signed-off-by: vinutha karanth <vinutha.karanth@gmail.com>
microsoft · May 11, 2023 · 6d75178 · 6d75178
1 parent 91853c2
commit 6d75178
Show file tree

Hide file tree

Showing 18 changed files with 261 additions and 96 deletions.
diff --git a/...sisView/CausalIndividualView/LargeCausalIndividualView/ILargeCausalIndividualChartSpec.ts b/...sisView/CausalIndividualView/LargeCausalIndividualView/ILargeCausalIndividualChartSpec.ts
@@ -34,6 +34,7 @@ export interface ILargeCausalIndividualChartState {
   isLocalCausalDataLoading: boolean;
   localCausalErrorMessage?: string;
   localCausalData?: ICausalAnalysisData;
+  bubblePlotData?: IHighchartsConfig;
 }
 
 export function getInitialSpec(): ILargeCausalIndividualChartState {

diff --git a/...nalysisView/CausalIndividualView/LargeCausalIndividualView/LargeCausalIndividualChart.tsx b/...nalysisView/CausalIndividualView/LargeCausalIndividualView/LargeCausalIndividualChart.tsx
@@ -153,8 +153,36 @@ export class LargeCausalIndividualChart extends React.PureComponent<
   };
 
   private updateBubblePlotData = async (
-    chartProps: IGenericChartProps
+    chartProps: IGenericChartProps,
+    hasRevertToBubbleChartUpdated: boolean
   ): Promise<void> => {
+    if (hasRevertToBubbleChartUpdated) {
+      this.setState(
+        {
+          chartProps,
+          clusterData: getInitialClusterState(),
+          isBubbleChartDataLoading: true,
+          isBubbleChartRendered: true,
+          isLocalCausalDataLoading: false,
+          isRevertButtonClicked: false,
+          localCausalData: undefined,
+          localCausalErrorMessage: undefined,
+          selectedPointsIndexes: []
+        },
+        () => {
+          this.setState({
+            chartProps,
+            isBubbleChartDataLoading: false,
+            isBubbleChartRendered: true,
+            isRevertButtonClicked: false,
+            plotData: this.state.bubblePlotData
+          });
+          this.props.onDataClick(false, undefined);
+        }
+      );
+      return;
+    }
+
     this.setState({
       clusterData: getInitialClusterState(),
       isBubbleChartDataLoading: true,
@@ -164,7 +192,7 @@ export class LargeCausalIndividualChart extends React.PureComponent<
       selectedPointsIndexes: []
     });
     this.props.onDataClick(false, undefined);
-    const datasetBarConfigOverride = await getBubblePlotData(
+    const datasetBubbleConfigOverride = await getBubblePlotData(
       chartProps,
       this.props.cohort,
       this.context.jointDataset,
@@ -175,22 +203,23 @@ export class LargeCausalIndividualChart extends React.PureComponent<
       this.onBubbleClick
     );
     if (
-      datasetBarConfigOverride &&
-      !instanceOfHighChart(datasetBarConfigOverride)
+      datasetBubbleConfigOverride &&
+      !instanceOfHighChart(datasetBubbleConfigOverride)
     ) {
       this.setState({
-        bubbleChartErrorMessage: getErrorMessage(datasetBarConfigOverride),
+        bubbleChartErrorMessage: getErrorMessage(datasetBubbleConfigOverride),
         isBubbleChartDataLoading: false,
         plotData: undefined
       });
       return;
     }
     this.setState({
+      bubblePlotData: datasetBubbleConfigOverride,
       chartProps,
       isBubbleChartDataLoading: false,
       isBubbleChartRendered: true,
       isRevertButtonClicked: false,
-      plotData: datasetBarConfigOverride
+      plotData: datasetBubbleConfigOverride
     });
   };
 

diff --git a/...sisView/CausalIndividualView/LargeCausalIndividualView/largeCausalIndividualChartUtils.ts b/...sisView/CausalIndividualView/LargeCausalIndividualView/largeCausalIndividualChartUtils.ts
@@ -132,16 +132,19 @@ export async function generateHighChartConfigOverride(
   hasChartPropsUpdated: boolean,
   hasCohortUpdated: boolean,
   hasAxisTypeChanged: boolean,
-  updateBubblePlotData: (chartProps: IGenericChartProps) => void,
+  updateBubblePlotData: (
+    chartProps: IGenericChartProps,
+    hasRevertToBubbleChartUpdated: boolean
+  ) => void,
   updateScatterPlotData: (chartProps: IGenericChartProps) => void
 ): Promise<void> {
   if (chartProps) {
     if (hasCohortUpdated || hasRevertToBubbleChartUpdated) {
-      updateBubblePlotData(chartProps);
+      updateBubblePlotData(chartProps, hasRevertToBubbleChartUpdated);
     } else if (hasAxisTypeChanged) {
       updateScatterPlotData(chartProps);
     } else if (hasChartPropsUpdated) {
-      updateBubblePlotData(chartProps);
+      updateBubblePlotData(chartProps, false);
     } else if (
       hasSelectedPointIndexesUpdated ||
       hasIsLocalExplanationsDataLoadingUpdated

diff --git a/libs/core-ui/src/lib/Highchart/FeatureImportanceBar.tsx b/libs/core-ui/src/lib/Highchart/FeatureImportanceBar.tsx
@@ -2,8 +2,10 @@
 // Licensed under the MIT License.
 
 import { getTheme, Stack, Text } from "@fluentui/react";
+import { localization } from "@responsible-ai/localization";
 import React from "react";
 
+import { LoadingSpinner } from "../components/LoadingSpinner";
 import { getFeatureImportanceBarOptions } from "../util/getFeatureImportanceBarOptions";
 import { getFeatureImportanceBoxOptions } from "../util/getFeatureImportanceBoxOptions";
 import { ChartTypes } from "../util/IGenericChartProps";
@@ -34,6 +36,7 @@ export interface IFeatureBarProps {
   unsortedSeries: IGlobalSeries[];
   originX?: string[];
   xMapping?: string[];
+  loading?: boolean;
   onFeatureSelection?: (seriesIndex: number, featureIndex: number) => void;
 }
 
@@ -72,24 +75,31 @@ export class FeatureImportanceBar extends React.Component<
         id="FeatureImportanceBar"
         className={featureImportanceBarStyles.chartWithVertical}
       >
-        <Stack.Item className={featureImportanceBarStyles.verticalAxis}>
-          <div className={featureImportanceBarStyles.rotatedVerticalBox}>
-            <div>
-              {this.props.yAxisLabels.map((label, i) => (
-                <Text
-                  block
-                  variant="medium"
-                  className={featureImportanceBarStyles.boldText}
-                  key={i}
-                >
-                  {label}
-                </Text>
-              ))}
+        {!this.props.loading && (
+          <Stack.Item className={featureImportanceBarStyles.verticalAxis}>
+            <div className={featureImportanceBarStyles.rotatedVerticalBox}>
+              <div>
+                {this.props.yAxisLabels.map((label, i) => (
+                  <Text
+                    block
+                    variant="medium"
+                    className={featureImportanceBarStyles.boldText}
+                    key={i}
+                  >
+                    {label}
+                  </Text>
+                ))}
+              </div>
             </div>
-          </div>
-        </Stack.Item>
+          </Stack.Item>
+        )}
+
         <Stack.Item className={featureImportanceBarStyles.chart}>
-          <BasicHighChart configOverride={this.state.highchartOption} />
+          {this.props.loading ? (
+            <LoadingSpinner label={localization.Counterfactuals.loading} />
+          ) : (
+            <BasicHighChart configOverride={this.state.highchartOption} />
+          )}
         </Stack.Item>
       </Stack>
     );

diff --git a/libs/counterfactuals/src/lib/largeCounterfactualsView/LargeCounterfactualChart.tsx b/libs/counterfactuals/src/lib/largeCounterfactualsView/LargeCounterfactualChart.tsx
@@ -56,6 +56,7 @@ export interface ICounterfactualChartState {
   isBubbleChartDataLoading: boolean;
   bubbleChartErrorMessage?: string;
   isBubbleChartRendered: boolean;
+  bubblePlotData?: IHighchartsConfig;
 }
 
 export class LargeCounterfactualChart extends React.PureComponent<
@@ -81,20 +82,22 @@ export class LargeCounterfactualChart extends React.PureComponent<
   }
 
   public componentDidMount(): void {
-    this.updateBubblePlot();
+    this.updateBubblePlot(false);
   }
 
   public componentDidUpdate(prevProps: ILargeCounterfactualChartProps): void {
-    if (this.shouldUpdateBubbleChartPlot(prevProps)) {
-      this.updateBubblePlot();
+    const hasRevertToBubbleChartUpdated =
+      this.hasRevertToBubbleChartUpdated(prevProps);
+    if (hasRevertToBubbleChartUpdated || this.hasCohortUpdated(prevProps)) {
+      this.updateBubblePlot(hasRevertToBubbleChartUpdated);
       return;
     }
     if (this.hasAxisTypeChanged(prevProps.chartProps)) {
       this.updateScatterPlot();
       return;
     }
     if (!_.isEqual(prevProps.chartProps, this.props.chartProps)) {
-      this.updateBubblePlot();
+      this.updateBubblePlot(false);
       return;
     }
     if (this.shouldUpdateScatterPlot(prevProps)) {
@@ -244,16 +247,21 @@ export class LargeCounterfactualChart extends React.PureComponent<
     );
   };
 
-  private readonly shouldUpdateBubbleChartPlot = (
+  private readonly hasRevertToBubbleChartUpdated = (
     prevProps: ILargeCounterfactualChartProps
   ): boolean => {
     return (
-      this.props.cohort.name !== prevProps.cohort.name ||
-      (this.props.isRevertButtonClicked &&
-        prevProps.isRevertButtonClicked !== this.props.isRevertButtonClicked)
+      this.props.isRevertButtonClicked &&
+      prevProps.isRevertButtonClicked !== this.props.isRevertButtonClicked
     );
   };
 
+  private readonly hasCohortUpdated = (
+    prevProps: ILargeCounterfactualChartProps
+  ): boolean => {
+    return this.props.cohort.name !== prevProps.cohort.name;
+  };
+
   private readonly hasAxisTypeChanged = (
     prevChartProps: IGenericChartProps
   ): boolean => {
@@ -270,7 +278,25 @@ export class LargeCounterfactualChart extends React.PureComponent<
     this.setState({ yDialogOpen: !this.state.yDialogOpen });
   };
 
-  private async updateBubblePlot(): Promise<void> {
+  private async updateBubblePlot(
+    hasRevertToBubbleChartUpdated: boolean
+  ): Promise<void> {
+    if (hasRevertToBubbleChartUpdated) {
+      this.setState(
+        {
+          isBubbleChartDataLoading: true
+        },
+        () => {
+          this.setState({
+            bubbleChartErrorMessage: undefined,
+            isBubbleChartDataLoading: false,
+            isBubbleChartRendered: true,
+            plotData: this.state.bubblePlotData
+          });
+        }
+      );
+      return;
+    }
     this.setState({
       isBubbleChartDataLoading: true
     });
@@ -288,6 +314,7 @@ export class LargeCounterfactualChart extends React.PureComponent<
     }
     this.setState({
       bubbleChartErrorMessage: undefined,
+      bubblePlotData: plotData,
       isBubbleChartDataLoading: false,
       isBubbleChartRendered: true,
       plotData

diff --git a/libs/dataset-explorer/src/lib/ChartView/DataAnalysisView/SidePanel.tsx b/libs/dataset-explorer/src/lib/ChartView/DataAnalysisView/SidePanel.tsx
@@ -41,6 +41,7 @@ export interface ISidePanelProps {
   dataset: IDataset;
   disabled?: boolean;
   isBubbleChartRendered?: boolean;
+  loading?: boolean;
   onChartPropChange: (p: IGenericChartProps) => void;
   setIsRevertButtonClicked?: (status: boolean) => void;
 }
@@ -86,7 +87,7 @@ export class SidePanel extends React.Component<
           selectedKey={this.props.chartProps.chartType}
           options={this.chartOptions}
           onChange={this.onChartTypeChange}
-          disabled={this.props.disabled}
+          disabled={this.props.disabled || this.props.loading}
         />
         {this.displayAxisConfigDialog() && this.props.chartProps.colorAxis && (
           <AxisConfigDialog

diff --git a/libs/dataset-explorer/src/lib/ChartView/LargeDataView/ILargeDatasetExplorerTabSpec.ts b/libs/dataset-explorer/src/lib/ChartView/LargeDataView/ILargeDatasetExplorerTabSpec.ts
@@ -5,6 +5,7 @@ import {
   getInitialClusterState,
   IClusterData,
   IGenericChartProps,
+  IHighchartsConfig,
   ITelemetryEvent
 } from "@responsible-ai/core-ui";
 
@@ -21,6 +22,8 @@ export interface IDatasetExplorerTabState {
   isBubbleChartDataLoading: boolean;
   bubbleChartErrorMessage?: string;
   isRevertButtonClicked?: boolean;
+  bubblePlotData?: IHighchartsConfig;
+  isAggregatePlotLoading?: boolean;
 }
 
 export function getInitialState(): IDatasetExplorerTabState {

diff --git a/libs/dataset-explorer/src/lib/ChartView/LargeDataView/LargeDatasetExplorerChartArea.tsx b/libs/dataset-explorer/src/lib/ChartView/LargeDataView/LargeDatasetExplorerChartArea.tsx
@@ -27,6 +27,7 @@ export interface ILargeDatasetExplorerChartAreaProps {
   highChartConfigOverride?: any;
   isBubbleChartDataLoading?: boolean;
   bubbleChartErrorMessage?: string;
+  isAggregatePlotLoading?: boolean;
   onXSet: (value: ISelectorConfig) => void;
   onYSet: (value: ISelectorConfig) => void;
 }
@@ -43,6 +44,7 @@ export class LargeDatasetExplorerChartArea extends React.PureComponent<ILargeDat
       selectedCohortIndex,
       isBubbleChartRendered,
       isBubbleChartDataLoading,
+      isAggregatePlotLoading,
       highChartConfigOverride,
       bubbleChartErrorMessage,
       onXSet,
@@ -96,7 +98,7 @@ export class LargeDatasetExplorerChartArea extends React.PureComponent<ILargeDat
                       chartProps.yAxis.property
                     ].label
                   }
-                  disabled={isBubbleChartDataLoading}
+                  disabled={isBubbleChartDataLoading || isAggregatePlotLoading}
                   removeCount={!isHistogramOrBoxChart}
                 />
               </Stack.Item>
@@ -112,7 +114,9 @@ export class LargeDatasetExplorerChartArea extends React.PureComponent<ILargeDat
                       )}
                 </MissingParametersPlaceholder>
               )}
-              {!isBubbleChartDataLoading && canRenderChart ? (
+              {!isAggregatePlotLoading &&
+              !isBubbleChartDataLoading &&
+              canRenderChart ? (
                 <BasicHighChart
                   configOverride={highChartConfigOverride}
                   theme={getTheme()}
@@ -147,7 +151,7 @@ export class LargeDatasetExplorerChartArea extends React.PureComponent<ILargeDat
               this.context.jointDataset.metaDict[chartProps.xAxis.property]
                 .label
             }
-            disabled={isBubbleChartDataLoading}
+            disabled={isBubbleChartDataLoading || isAggregatePlotLoading}
             removeCount={!isHistogramOrBoxChart}
           />
         </Stack.Item>