Fix Model overview - Dataset cohorts]: At 320*256 viewport content is…

… getting truncated and graph is not visible. (#1801) * fix styles Signed-off-by: vinutha karanth <[email protected]> * add styles Signed-off-by: vinutha karanth <[email protected]> * lintfix Signed-off-by: vinutha karanth <[email protected]> Signed-off-by: vinutha karanth <[email protected]>
microsoft · Nov 4, 2022 · c541255 · c541255
1 parent 51679b3
commit c541255
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 10 deletions.
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts b/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts
@@ -25,7 +25,10 @@ export const causalInsightsStyles: () => IProcessedStyleSet<ICausalInsightsStyle
         selectors: {
           "[role='tablist'].ms-Pivot": {
             display: "flex",
-            flexWrap: "wrap"
+            flexWrap: "wrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
           }
         }
       }

diff --git a/...nalysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysis.styles.ts b/...nalysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysis.styles.ts
@@ -16,6 +16,7 @@ export interface IErrorAnalysisStyles {
   featureList: IStyle;
   errorAnalysisWrapper: IStyle;
   separator: IStyle;
+  tabs: IStyle;
 }
 
 export const errorAnalysisStyles: () => IProcessedStyleSet<IErrorAnalysisStyles> =
@@ -46,6 +47,17 @@ export const errorAnalysisStyles: () => IProcessedStyleSet<IErrorAnalysisStyles>
       featureList: {
         padding: "16px 0 10px 0"
       },
-      separator: hideLgDown
+      separator: hideLgDown,
+      tabs: {
+        selectors: {
+          "[role='tablist'].ms-Pivot": {
+            display: "flex",
+            flexWrap: "wrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        }
+      }
     });
   };
diff --git a/...alysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx b/...alysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
@@ -80,6 +80,7 @@ export class ErrorAnalysisViewTab extends React.Component<
                 onLinkClick={this.handleTabClick}
                 selectedKey={this.props.selectedKey}
                 overflowBehavior="menu"
+                className={classNames.tabs}
               >
                 <PivotItem
                   itemKey={ErrorAnalysisOptions.TreeMap}

diff --git a/...terpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts b/...terpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.styles.ts
@@ -83,10 +83,12 @@ export const globalTabStyles: () => IProcessedStyleSet<IGlobalTabStyles> =
         ...hideXlDown
       },
       legendAndSort: {
-        height: "100%",
-        paddingLeft: "25px",
-        paddingTop: "55px",
-        width: rightMarginWidth
+        "@media screen and (min-width: 479px)": {
+          paddingLeft: "25px",
+          paddingTop: "55px",
+          width: rightMarginWidth
+        },
+        height: "100%"
       },
       legendHelpText: {
         fontWeight: "300"

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/FeatureImportances.styles.ts b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/FeatureImportances.styles.ts
@@ -30,7 +30,10 @@ export const featureImportanceTabStyles: () => IProcessedStyleSet<IFeatureImport
         selectors: {
           "[role='tablist'].ms-Pivot": {
             display: "flex",
-            flexWrap: "wrap"
+            flexWrap: "wrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
           }
         }
       }

diff --git a/...ssessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts b/...ssessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts
@@ -60,7 +60,10 @@ export const modelOverviewStyles: () => IProcessedStyleSet<IModelOverviewStyles>
         selectors: {
           "[role='tablist'].ms-Pivot": {
             display: "flex",
-            flexWrap: "wrap"
+            flexWrap: "wrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
           }
         }
       },

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/TabsView/TabsView.styles.ts b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/TabsView/TabsView.styles.ts
@@ -14,6 +14,7 @@ export interface ITabsViewStyles {
   sectionHeader: IStyle;
   sectionTooltip: IStyle;
   buttonSection: IStyle;
+  stackStyle: IStyle;
 }
 
 export const tabsViewStyles: () => IProcessedStyleSet<ITabsViewStyles> = () => {
@@ -27,11 +28,29 @@ export const tabsViewStyles: () => IProcessedStyleSet<ITabsViewStyles> = () => {
     },
     sectionHeader: {
       color: theme.semanticColors.bodyText,
-      padding: "16px 24px 16px 40px"
+      display: "block",
+      overflow: "hidden",
+      padding: "16px 24px 16px 40px",
+      selectors: {
+        ":hover": {
+          height: "auto",
+          overflow: "visible",
+          whiteSpace: "normal"
+        }
+      },
+      textOverflow: "ellipsis"
     },
     sectionTooltip: {
       display: "inline",
       ...hideXxlUp
+    },
+    stackStyle: {
+      padding: "20px",
+      selectors: {
+        "@media screen and (max-width: 479px)": {
+          padding: "5px"
+        }
+      }
     }
   });
 };
diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/TabsView/TabsView.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/TabsView/TabsView.tsx
@@ -135,7 +135,7 @@ export class TabsView extends React.PureComponent<
         localization.ErrorAnalysis.Cohort.defaultLabel;
     const classNames = tabsViewStyles();
     return (
-      <Stack tokens={{ padding: "l1" }}>
+      <Stack className={classNames.stackStyle}>
         {this.props.activeGlobalTabs[0]?.key !==
           GlobalTabKeys.ErrorAnalysisTab && (
           <Stack.Item className={classNames.buttonSection}>