fix: support long model names for model selection (#427)

* fix: support long model names for model selection * refactor: fix grammer for model selection view * refactor: use css for long model ids and names * refactor: use title for model id and model name
microsoft · Jul 20, 2020 · a0fa2da · a0fa2da
1 parent cf8de6b
commit a0fa2da
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/src/common/localization/en-us.ts b/src/common/localization/en-us.ts
@@ -195,7 +195,7 @@ export const english: IAppStrings = {
         defaultURLInput: "Paste or type URL...",
     },
     recentModelsView:{
-        header: "Select model to analyze with",
+        header: "Select a model to analyze with",
         checkboxAriaLabel: "Select model checkbox"
     },
     projectMetrics: {

diff --git a/src/react/components/pages/predict/predictPage.scss b/src/react/components/pages/predict/predictPage.scss
@@ -100,6 +100,10 @@
 }
 
 .model-selection-info-value {
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 12px;
   color: #d1d1d1;
   float: left;

diff --git a/src/react/components/pages/predict/predictPage.tsx b/src/react/components/pages/predict/predictPage.tsx
@@ -250,24 +250,28 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
                                                 <h5 className="model-selection-header">
                                                     {strings.predict.selectModelHeader}
                                                 </h5>
-                                                <h6 className="model-selection-info-header" >
-                                                    <span className="model-selection-info-key">
-                                                        {strings.predict.modelIDPrefix}
-                                                    </span>
-                                                    <span className="model-selection-info-value">
-                                                        {mostRecentModel.modelInfo.modelId.substring(0,8) + "..."}
-                                                    </span>
-                                                </h6>
-                                                {mostRecentModel.modelInfo.modelName &&
+                                                <tr>
                                                     <h6 className="model-selection-info-header" >
                                                         <span className="model-selection-info-key">
-                                                            {strings.predict.modelNamePrefix}
+                                                            {strings.predict.modelIDPrefix}
                                                         </span>
-                                                        <span className="model-selection-info-value">
-                                                            {mostRecentModel.modelInfo.modelName}
+                                                        <span title={mostRecentModel.modelInfo.modelId} className="model-selection-info-value">
+                                                            {mostRecentModel.modelInfo.modelId}
                                                         </span>
                                                     </h6>
-                                                }
+                                                </tr>
+                                                <tr>
+                                                    {mostRecentModel.modelInfo.modelName &&
+                                                        <h6 className="model-selection-info-header" >
+                                                            <span className="model-selection-info-key">
+                                                                {strings.predict.modelNamePrefix}
+                                                            </span>
+                                                            <span title={mostRecentModel.modelInfo.modelName} className="model-selection-info-value">
+                                                                {mostRecentModel.modelInfo.modelName}
+                                                            </span>
+                                                        </h6>
+                                                    }
+                                                </tr>
                                             </div>
                                             <DefaultButton
                                                 className="keep-button-80px"