From a0fa2daf4cd3286f7f58dc2919fd202115e8d5be Mon Sep 17 00:00:00 2001
From: stew-ro <60453211+stew-ro@users.noreply.github.com>
Date: Mon, 20 Jul 2020 11:09:14 -0700
Subject: [PATCH] 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
---
 src/common/localization/en-us.ts              |  2 +-
 .../components/pages/predict/predictPage.scss |  4 +++
 .../components/pages/predict/predictPage.tsx  | 30 +++++++++++--------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/common/localization/en-us.ts b/src/common/localization/en-us.ts
index c33eecd02..1db3dcb73 100644
--- 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
index 1ac0772b3..9adea767b 100644
--- 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
index 9e693ef2c..4747463e2 100644
--- 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"