Limit each component description width up to 750px for readability (#…

…1336)

* limit description width up to 750px

* export maxWidth from a common place

libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalAggregateView/CausalAggregateStyles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IProcessedStyleSet,
   IStyle,
@@ -42,6 +43,7 @@ export const CausalAggregateStyles: () => IProcessedStyleSet<ICausalAggregateSty
         display: "inline-block",
         flex: "1",
         fontSize: 14,
+        maxWidth: descriptionMaxWidth,
         paddingBottom: "5px",
         textAlign: "left"
       },

libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualStyles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IProcessedStyleSet,
   IStyle,
@@ -37,6 +38,7 @@ export const CausalIndividualStyles: () => IProcessedStyleSet<ICausalIndividualS
         display: "inline-block",
         flex: "1",
         fontSize: 14,
+        maxWidth: descriptionMaxWidth,
         paddingBottom: "15px",
         textAlign: "left"
       },

libs/causality/src/lib/CausalAnalysisDashboard/Controls/CausalAnalysisView/TreatmentView/TreatmentStyles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IProcessedStyleSet,
   IStyle,
@@ -41,6 +42,7 @@ export const TreatmentStyles: () => IProcessedStyleSet<ITreatmentStyles> =
       header: {
         fontSize: 14,
         margin: "20px",
+        maxWidth: descriptionMaxWidth,
         textAlign: "left"
       },
       label: {

libs/core-ui/src/index.ts

@@ -40,6 +40,7 @@ export * from "./lib/util/rowErrorSize";
 export * from "./lib/util/getBoxData";
 export * from "./lib/util/getBasicFilterString";
 export * from "./lib/util/getCausalDisplayFeatureName";
+export * from "./lib/util/getCommonStyles";
 export * from "./lib/util/getCompositeFilterString";
 export * from "./lib/util/getErrorBarChartOptions";
 export * from "./lib/util/getFeatureOptions";

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

@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+export const descriptionMaxWidth = "750px";

libs/counterfactuals/src/lib/CounterfactualsTab.styles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IStyle,
   mergeStyleSets,
@@ -10,6 +11,7 @@ import {
 
 export interface ICounterfactualsTabStyles {
   container: IStyle;
+  infoWithText: IStyle;
 }
 
 export const counterfactualsTabStyles: () => IProcessedStyleSet<ICounterfactualsTabStyles> =
@@ -19,6 +21,7 @@ export const counterfactualsTabStyles: () => IProcessedStyleSet<ICounterfactuals
       container: {
         color: theme.semanticColors.bodyText,
         padding: "0 40px 10px 40px"
-      }
+      },
+      infoWithText: { maxWidth: descriptionMaxWidth }
     });
   };

libs/counterfactuals/src/lib/CounterfactualsTab.tsx

@@ -48,7 +48,7 @@ export class CounterfactualsTab extends React.PureComponent<
     const classNames = counterfactualsTabStyles();
     return (
       <Stack grow tokens={{ padding: "l1" }} className={classNames.container}>
-        <Stack.Item>
+        <Stack.Item className={classNames.infoWithText}>
           <Text variant={"medium"}>
             {localization.Counterfactuals.whatifDescription}
           </Text>

libs/dataset-explorer/src/lib/DatasetExplorerTab.styles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { FabricStyles } from "@responsible-ai/core-ui";
+import { descriptionMaxWidth, FabricStyles } from "@responsible-ai/core-ui";
 import {
   IStyle,
   mergeStyleSets,
@@ -110,6 +110,7 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
         width: "23px"
       },
       infoWithText: {
+        maxWidth: descriptionMaxWidth,
         paddingLeft: "33px",
         width: "100%"
       },

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewRenderer.styles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import { Property } from "csstype";
 import {
   IStyle,
@@ -16,6 +17,7 @@ export interface ITreeViewRendererStyles {
   clickedNodeDashed: IStyle;
   clickedNodeFull: IStyle;
   filledNodeText: IStyle;
+  infoWithText: IStyle;
   legend: IStyle;
   linkLabel: IStyle;
   node: IStyle;
@@ -56,6 +58,7 @@ export const treeViewRendererStyles = (props?: {
         fill: ColorPalette.ErrorAnalysisLightText
       }
     ]),
+    infoWithText: { maxWidth: descriptionMaxWidth },
     legend: {
       pointerEvents: "none"
     },

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewRenderer.tsx

@@ -277,7 +277,7 @@ export class TreeViewRenderer extends React.PureComponent<
     const svgHeight = maxY - minY;
     return (
       <Stack tokens={{ childrenGap: "l1", padding: "l1" }}>
-        <Stack.Item>
+        <Stack.Item className={classNames.infoWithText}>
           <Text variant="medium">
             {this.props.getTreeNodes
               ? localization.ErrorAnalysis.TreeView.treeDescription

libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IStyle,
   mergeStyleSets,
@@ -69,6 +70,7 @@ export const globalTabStyles: () => IProcessedStyleSet<IGlobalTabStyles> =
         width: "23px"
       },
       infoWithText: {
+        maxWidth: descriptionMaxWidth,
         paddingLeft: "25px",
         width: "100%"
       },

libs/interpret/src/lib/MLIDashboard/Controls/ModelPerformanceTab/ModelPerformanceTab.styles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IStyle,
   mergeStyleSets,
@@ -21,6 +22,7 @@ export const modelPerformanceTabStyles: () => IProcessedStyleSet<IModelPerforman
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "row",
+        maxWidth: descriptionMaxWidth,
         paddingLeft: "25px",
         width: "100%"
       },

libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.styles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { FabricStyles } from "@responsible-ai/core-ui";
+import { descriptionMaxWidth, FabricStyles } from "@responsible-ai/core-ui";
 import {
   IProcessedStyleSet,
   getTheme,
@@ -235,6 +235,7 @@ export const whatIfTabStyles: () => IProcessedStyleSet<IWhatIfTabStyles> =
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "row",
+        maxWidth: descriptionMaxWidth,
         paddingLeft: "25px",
         width: "100%"
       },

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.styles.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { descriptionMaxWidth } from "@responsible-ai/core-ui";
 import {
   IStyle,
   mergeStyleSets,
@@ -13,6 +14,7 @@ export interface IFeatureImportanceStyles {
   header: IStyle;
   headerCount: IStyle;
   headerTitle: IStyle;
+  infoWithText: IStyle;
   selectionCounter: IStyle;
 }
 
@@ -45,6 +47,7 @@ export const individualFeatureImportanceViewStyles: () => IProcessedStyleSet<IFe
           paddingTop: 4
         }
       ],
+      infoWithText: { maxWidth: descriptionMaxWidth },
       selectionCounter: {
         paddingTop: 12
       }

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView.tsx

@@ -162,7 +162,7 @@ export class IndividualFeatureImportanceView extends React.Component<
 
     return (
       <Stack tokens={{ padding: "l1" }}>
-        <Stack.Item>
+        <Stack.Item className={classNames.infoWithText}>
           <Text variant="medium">
             {localization.ModelAssessment.FeatureImportances.IndividualFeature}
           </Text>

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx

@@ -8,7 +8,8 @@ import {
   OverallMetricChart,
   BinaryClassificationMetrics,
   RegressionMetrics,
-  classificationTask
+  classificationTask,
+  descriptionMaxWidth
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
 import {
@@ -120,7 +121,7 @@ export class ModelOverview extends React.Component<
 
     return (
       <Stack tokens={{ childrenGap: "10px", padding: "16px 40px 10px 40px" }}>
-        <Text variant="medium">
+        <Text variant="medium" style={{ maxWidth: descriptionMaxWidth }}>
           {localization.Interpret.ModelPerformance.helperText}
         </Text>
         {!this.props.showNewModelOverviewExperience && <OverallMetricChart />}