Skip to content

Commit

Permalink
Merge branch 'main' into gaugup/CorrectTargetIndentifier
Browse files Browse the repository at this point in the history
  • Loading branch information
gaugup authored Mar 7, 2022
2 parents 198f866 + cf6f2f5 commit e7a5d9c
Show file tree
Hide file tree
Showing 28 changed files with 712 additions and 395 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,11 @@ import {
defaultModelAssessmentContext,
ModelAssessmentContext,
FabricStyles,
rowErrorSize
rowErrorSize,
BasicHighChart
} from "@responsible-ai/core-ui";
import { localization } from "@responsible-ai/localization";
import {
AccessibleChart,
IPlotlyProperty,
PlotlyMode,
IData
} from "@responsible-ai/mlchartlib";
import { IPlotlyProperty, PlotlyMode, IData } from "@responsible-ai/mlchartlib";
import _, { Dictionary } from "lodash";
import {
getTheme,
Expand All @@ -36,6 +32,7 @@ import React from "react";
import { causalIndividualChartStyles } from "./CausalIndividualChartStyles";
import { CausalIndividualConstants } from "./CausalIndividualConstants";
import { CausalWhatIf } from "./CausalWhatIf";
import { getIndividualChartOptions } from "./getIndividualChartOptions";

export interface ICausalIndividualChartProps {
onDataClick: (data: number | undefined) => void;
Expand Down Expand Up @@ -137,7 +134,7 @@ export class CausalIndividualChart extends React.PureComponent<
onCancel={this.setXOpen.bind(this, false)}
/>
)}
<div className={classNames.chartWithVertical}>
<Stack className={classNames.chartWithVertical}>
<div className={classNames.verticalAxis}>
<div className={classNames.rotatedVerticalBox}>
<DefaultButton
Expand All @@ -161,14 +158,19 @@ export class CausalIndividualChart extends React.PureComponent<
</MissingParametersPlaceholder>
)}
{canRenderChart && (
<AccessibleChart
plotlyProps={plotlyProps}
theme={getTheme()}
onClickHandler={this.selectPointFromChart}
/>
<div className={classNames.highchartContainer}>
<BasicHighChart
configOverride={getIndividualChartOptions(
plotlyProps,
this.selectPointFromChart
)}
theme={getTheme()}
id="CausalAggregateChart"
/>
</div>
)}
</div>
<div className={classNames.horizontalAxisWithPadding}>
</Stack>
<Stack className={classNames.horizontalAxisWithPadding}>
<div className={classNames.paddingDiv} />
<div className={classNames.horizontalAxis}>
<DefaultButton
Expand All @@ -185,7 +187,7 @@ export class CausalIndividualChart extends React.PureComponent<
}
/>
</div>
</div>
</Stack>
</div>
<Stack horizontal={false} gap={15} className={classNames.legendAndText}>
<ComboBox
Expand Down Expand Up @@ -249,8 +251,7 @@ export class CausalIndividualChart extends React.PureComponent<
};

private selectPointFromChart = (data: any): void => {
const trace = data.points[0];
const index = trace.customdata[JointDataset.IndexLabel];
const index = data.customdata[JointDataset.IndexLabel];
this.setTemporaryPointToCopyOfDatasetPoint(index);
this.toggleSelectionOfPoint(index);
};
Expand Down Expand Up @@ -378,7 +379,7 @@ export class CausalIndividualChart extends React.PureComponent<
const metaX =
this.context.jointDataset.metaDict[chartProps.xAxis.property];
const rawX = JointDataset.unwrap(dictionary, chartProps.xAxis.property);
hovertemplate += `${metaX.label}: %{customdata.X}<br>`;
hovertemplate += `${metaX.label}: {point.customdata.X}<br>`;

rawX.forEach((val, index) => {
if (metaX.treatAsCategorical) {
Expand All @@ -405,7 +406,7 @@ export class CausalIndividualChart extends React.PureComponent<
const metaY =
this.context.jointDataset.metaDict[chartProps.yAxis.property];
const rawY = JointDataset.unwrap(dictionary, chartProps.yAxis.property);
hovertemplate += `${metaY.label}: %{customdata.Y}<br>`;
hovertemplate += `${metaY.label}: {point.customdata.Y}<br>`;
rawY.forEach((val, index) => {
if (metaY.treatAsCategorical) {
customdata[index].Y = metaY.sortedCategoricalValues?.[val];
Expand All @@ -427,7 +428,7 @@ export class CausalIndividualChart extends React.PureComponent<
trace.y = rawY;
}
}
hovertemplate += `${localization.Interpret.Charts.rowIndex}: %{customdata.Index}<br>`;
hovertemplate += `${localization.Interpret.Charts.rowIndex}: {point.customdata.Index}<br>`;
hovertemplate += "<extra></extra>";
trace.customdata = customdata as any;
trace.hovertemplate = hovertemplate;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export interface ICausalIndividualChartStyles {
infoButton: IStyle;
rightJustifiedContainer: IStyle;
notAvailable: IStyle;
highchartContainer: IStyle;
}

export const causalIndividualChartStyles: () => IProcessedStyleSet<ICausalIndividualChartStyles> =
Expand Down Expand Up @@ -199,6 +200,9 @@ export const causalIndividualChartStyles: () => IProcessedStyleSet<ICausalIndivi
paddingLeft: "15px",
paddingRight: "120px"
},
highchartContainer: {
width: "1100px"
},
horizontalAxis: {
flex: 1,
textAlign: "center"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export const CausalIndividualStyles: () => IProcessedStyleSet<ICausalIndividualS
},
header: {
fontSize: 14,
fontWeight: "600"
fontWeight: "600",
paddingTop: "70px"
},
individualTable: {
width: "70%"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ export class CausalIndividualView extends React.PureComponent<
<Stack.Item>
<CausalIndividualChart onDataClick={this.handleOnClick} />
</Stack.Item>
<Stack.Item>
<Stack.Item className={styles.header}>
<Stack horizontal={false}>
<Stack.Item>
<Text variant={"medium"} className={styles.header}>
<Text variant={"medium"}>
{localization.CausalAnalysis.IndividualView.directIndividual}
</Text>
</Stack.Item>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { IPlotlyProperty } from "@responsible-ai/mlchartlib";

export function getIndividualChartOptions(
plotlyProperty: IPlotlyProperty,
onClickHandler?: (data: any) => void
): any {
let template = "";
const data = plotlyProperty.data.map((series, seriesIndex) => {
const data: any = [];
series.x?.forEach((p, index) => {
const temp = {
customdata: series?.customdata?.[index],
marker: {
fillColor:
seriesIndex === 0 ? series?.marker?.color?.[index] : undefined,
lineColor:
seriesIndex === 0 ? undefined : series?.marker?.line?.color,
lineWidth: seriesIndex === 0 ? undefined : 3,
radius: seriesIndex === 0 ? 4 : 6,
symbol:
seriesIndex === 0 ? series?.marker?.symbol?.[index] : "diamond"
},
x: p,
y: series?.y?.[index]
};
template = series.hovertemplate as string;
data.push(temp);
});
return data;
});

const series = data.map((d) => {
return {
data: d,
showInLegend: false
};
});
return {
chart: {
type: "scatter",
zoomType: "xy"
},
plotOptions: {
scatter: {
tooltip: {
pointFormat: template
}
},
series: {
cursor: "pointer",
point: {
events: {
click() {
if (onClickHandler === undefined) {
return;
}
onClickHandler(this);
}
}
}
}
},
series
};
}
1 change: 1 addition & 0 deletions libs/core-ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,4 @@ export * from "./lib/Interfaces/IErrorAnalysisData";
export * from "./lib/Highchart/BasicHighChart";
export * from "./lib/Highchart/FeatureImportanceDependence";
export * from "./lib/Highchart/FeatureImportanceBar";
export * from "./lib/Highchart/IHighchartsConfig";
60 changes: 0 additions & 60 deletions libs/core-ui/src/lib/Highchart/HighchartTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,66 +8,6 @@ export type {
ChartSelectionContextObject as HighchartSelectionContext
} from "highcharts";

export interface IHighchartsCustomConfig {
/**
* Max color name for color axis. Min is white.
*/
colorAxisMaxColor?: keyof IChartColorNames;

/**
* Disables chart update and rerenders chart when parent component
* of the chart is rerendered
*/
disableUpdate?: boolean;

/**
* Disables zooming for chart. Default zooming behavior is "xy".
* To keep zooming enabled but specify a different value then default,
* use "chartOptions.chart.zoomType"
*/
disableZoom?: boolean;

/**
* If set true, makes chart background transparent. Default behavior is making
* chart background color same as theme background color
*/
transparentBackground?: boolean;

/**
* Gets called when parent component is rerendered and chart is updated
*
* @param chart Chart reference
*/
onUpdate?(chart: Highcharts.Chart): void;

/**
* Delegate which enables to change the order of the colors.
* This is the current order:
* primary
* blueMid
* teal
* purple
* purpleLight
* magentaDark
* magentaLight
* black
* orangeLighter
* redDark
* red
* neutral
*
* @param colors Currently sorted colors
* @returns New sorted colors
*/
onSortColors?(
colors: Array<keyof IChartColorNames>
): Array<keyof IChartColorNames>;
}

export interface IHighchartsConfig extends Highcharts.Options {
custom?: IHighchartsCustomConfig;
}

export type HighchartsModuleNames = "heatmap";

export type { IChartColorNames };
3 changes: 2 additions & 1 deletion libs/core-ui/src/lib/Highchart/HighchartWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import * as React from "react";
import { getDefaultHighchartOptions } from "./getDefaultHighchartOptions";
import { getHighchartsTheme } from "./getHighchartsTheme";
import { HighchartReact } from "./HighchartReact";
import { HighchartsModuleNames, IHighchartsConfig } from "./HighchartTypes";
import { HighchartsModuleNames } from "./HighchartTypes";
import { IHighchartsConfig } from "./IHighchartsConfig";

export interface IHighchartWrapperProps {
chartOptions?: IHighchartsConfig;
Expand Down
2 changes: 1 addition & 1 deletion libs/core-ui/src/lib/Highchart/ICommonChartProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { ITheme } from "@fluentui/react";

import { IHighchartsConfig } from "./HighchartTypes";
import { IHighchartsConfig } from "./IHighchartsConfig";

export interface ICommonChartProps {
id?: string;
Expand Down
64 changes: 64 additions & 0 deletions libs/core-ui/src/lib/Highchart/IHighchartsConfig.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { IChartColorNames } from "./getHighchartsTheme";

export interface IHighchartsCustomConfig {
/**
* Max color name for color axis. Min is white.
*/
colorAxisMaxColor?: keyof IChartColorNames;

/**
* Disables chart update and rerenders chart when parent component
* of the chart is rerendered
*/
disableUpdate?: boolean;

/**
* Disables zooming for chart. Default zooming behavior is "xy".
* To keep zooming enabled but specify a different value then default,
* use "chartOptions.chart.zoomType"
*/
disableZoom?: boolean;

/**
* If set true, makes chart background transparent. Default behavior is making
* chart background color same as theme background color
*/
transparentBackground?: boolean;

/**
* Gets called when parent component is rerendered and chart is updated
*
* @param chart Chart reference
*/
onUpdate?(chart: Highcharts.Chart): void;

/**
* Delegate which enables to change the order of the colors.
* This is the current order:
* primary
* blueMid
* teal
* purple
* purpleLight
* magentaDark
* magentaLight
* black
* orangeLighter
* redDark
* red
* neutral
*
* @param colors Currently sorted colors
* @returns New sorted colors
*/
onSortColors?(
colors: Array<keyof IChartColorNames>
): Array<keyof IChartColorNames>;
}

export interface IHighchartsConfig extends Highcharts.Options {
custom?: IHighchartsCustomConfig;
}
2 changes: 1 addition & 1 deletion libs/core-ui/src/lib/Highchart/getHighchartsTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { ITheme } from "@fluentui/react";

import { IHighchartsConfig } from "./HighchartTypes";
import { IHighchartsConfig } from "./IHighchartsConfig";

export interface IChartColorNames {
black: string;
Expand Down
2 changes: 1 addition & 1 deletion libs/core-ui/src/lib/util/getDependencyChartOptions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { ITheme } from "@fluentui/react";

import { IHighchartsConfig } from "../Highchart/HighchartTypes";
import { IHighchartsConfig } from "../Highchart/IHighchartsConfig";

export interface IDependenceData {
x: number;
Expand Down
Loading

0 comments on commit e7a5d9c

Please sign in to comment.