feat: support model selection

docs/manual_testing/manual-test-runbook.md

@@ -1,10 +1,72 @@
 # Test Runbook
 
+ ## Fix: support model selection for analyzing
+
+> ### Feature description ###
+- track the five most recent trained or composed models  
+- display currently selected model in the analyze page right pane header  
+- display no models message when user has no recent models in the analyze page right pane header  
+- display button for selecting model in the analyze page right pane header  
+- display pop-up for selecting a model from a list of the five most recent models  
+- support analyzing with selected model  
+
+> ### Use Case ###
+
+**As** a user  
+**I want** to be able to select a model to analyze with  
+**So** I can use that model to analyze with  
+
+> ### Acceptance criteria ###
+
+#### Scenario One ####
+
+**Given** I've not trained or composed a model for my current project  
+**When** I go to the analyze page  
+**Then** I should see a message letting me know I don't have any recent models  
+
+#### Scenario Two ####
+
+**Given** I've trained or composed a model for my current project  
+**When**  I got to the analyze page  
+**Then** I should see my most recent model in the right pane header  
+
+#### Scenario Three ####
+
+**Given** I've trained or composed a model before pulling this change  
+**When** I pull this change and go to the analyze page  
+**Then** I should see my most recent model in the right pane header
+
+#### Scenario Four ####
+
+**Given** I've selected a different model  
+**When** I go to another page for this project and then click on the analyze page  
+**Then** I should still see the same selected project  
+
+#### Scenario Five ####
+
+**Given** I've opened the model selection pop-up  
+**When** I deselect all models from the list  
+**Then** I should not be able to click apply  
+
+#### Scenario Six ####
+
+**Given**  I've selected a different model  
+**When** I run an analysis on a document  
+**Then** I should see results for the selected model  
+
+#### Scenario Seven ####
+
+**Given** I've trained or composed at least one model  
+**When** I train or compose another model, go to the analyze page, and click the choose model button  
+**Then** I should see the top five most recently change models (since pulling this change)  
+
+___
+
  ## Fix: check invalid connection provider options before project actions
 
 > ### Feature description ###
 - check connection provider options are valid before creating a project
-- check connection provider options are valid before opening a recent project 
+- check connection provider options are valid before opening a recent project
 
 > ### Use Case ###
 
@@ -77,7 +139,7 @@ ___
 ## Feat: support Electron for on premise solution
 
 > ### Feature description ###
-- Support FoTT's existing features in Electon
+- Support FoTT's existing features in Electron
 - Support local file system provider in Electron
 
 > ### Use Case ###
@@ -160,7 +222,7 @@ Adding the following buttons to the canvas command bar:
 
 **Given** I've opened a project containing documents and I'm on the Tag Editor page.  
 **When** I click "Run OCR on current document" in the canvas command bar  
-**Then** I should see "Running OCR..." for the current docucment. When running OCR finishes, I should be able to view the document's updated OCR JSON file.
+**Then** I should see "Running OCR..." for the current document. When running OCR finishes, I should be able to view the document's updated OCR JSON file.
 
 #### Scenario Two ####
 
@@ -173,40 +235,40 @@ ___
 ## Feat: enable compose model and add model name when training a new model
 
 > ### Feature description ###
-- Add model name imput field on train page to add model name when training a new model
+- Add model name input field on train page to add model name when training a new model
 - Add model compose page in order to compose a new model with existing models
 
 > ### Use Case ###
 
 **As** a user  
-**I want** to give the new train model a customerized name  
+**I want** to give the new train model a customized name  
 **So** I can type the name in input field in train page before click train button.  
 
 **As** a user  
-**I want** to generate a new mode through existing model   
+**I want** to generate a new mode through existing model  
 **So** I can use model compose 
 
 > ### Acceptance criteria ###
 
 #### Scenario One ####
 
 **Given** I've opened a project containing documents and I'm on the Train page.  
-**When** I type customerized name in input field and click train button  
+**When** I type customized name in input field and click train button  
 **Then** I should see typed name shows in Train Record after record shows up.
 
 #### Scenario Two ####
 
 **Given** I've opened a project containing documents and I'm on the Model Compose page. There are enough existing models in modelList.  
 **When** I select more than one models then click compose button  
 **Then** I should see a pop up modal with a list contains selected models and a input field.  
-**When** I type customerized model name in input field and click compose button on modal  
+**When** I type customized model name in input field and click compose button on modal  
 **Then** I should see "Model is composing, please wait...". After that the list shows up again, new composed model with given name will be on the top of the list. The new composed model also has a "combine" icon. 
 
 #### Scenario Three ####
 
 **Given** I've opened a project containing documents and I'm on the Model Compose page.  
 **When** I click the header of a column  
-**Then** I should see the column becomes sorted in either ascending or discending order.  
-**When** I type some text inside the fliter field on top right  
+**Then** I should see the column becomes sorted in either ascending or descending order.  
+**When** I type some text inside the filter field on top right  
 **Then** I should see items whose id or name contains the text be filtered out.
 

src/common/localization/en-us.ts

@@ -183,12 +183,20 @@ export const english: IAppStrings = {
     },
     predict: {
         title: "Analyze",
-        uploadFile: "Upload image and run analysis",
+        uploadFile: "Choose an image to analyze with",
         inProgress: "Analysis in progress...",
-        downloadScript: "Use script",
+        noRecentModels: "This project doesn't have any recent models. Please train or compose a new model to analyze with.",
+        selectModelHeader: "Model to analyze with",
+        modelIDPrefix: "Model ID: ",
+        modelNamePrefix: "Model name: ",
+        downloadScript: "Analyze with python script",
         defaultLocalFileInput: "Browse for a file...",
         defaultURLInput: "Paste or type URL...",
     },
+    recentModelsView:{
+        header: "Select model to analyze with",
+        checkboxAriaLabel: "Select model checkbox"
+    },
     projectMetrics: {
         title: "Project Metrics",
         assetsSectionTitle: "Assets",

src/common/localization/es-cl.ts

@@ -184,12 +184,20 @@ export const spanish: IAppStrings = {
     },
     predict: {
         title: "Analizar",
-        uploadFile: "Cargar archivo y ejecutar análisis",
+        uploadFile: "Elija una imagen para analizar con",
         inProgress: "Análisis en curso...",
-        downloadScript: "Usar script",
+        noRecentModels: "Este proyecto no tiene modelos recientes. Entrenar o componer un nuevo modelo para analizar.",
+        selectModelHeader: "Modelo para analizar con",
+        modelIDPrefix: "ID del modelo: ",
+        modelNamePrefix: "Nombre del modelo: ",
+        downloadScript: "Analizar con script python",
         defaultLocalFileInput: "Busca un archivo...",
         defaultURLInput: "Pegar o escribir URL...",
     },
+    recentModelsView: {
+        header: "Seleccionar modelo para analizar con",
+        checkboxAriaLabel: "Seleccione la casilla de verificación del modelo",
+    },
     projectMetrics: {
         title: "Métricas del proyecto",
         assetsSectionTitle: "Activos",

src/common/strings.ts

@@ -184,10 +184,18 @@ export interface IAppStrings {
         title: string;
         uploadFile: string;
         inProgress: string;
+        noRecentModels: string;
+        selectModelHeader: string;
+        modelIDPrefix: string;
+        modelNamePrefix: string;
         downloadScript: string;
         defaultLocalFileInput: string;
         defaultURLInput: string;
     };
+    recentModelsView: {
+        header: string;
+        checkboxAriaLabel: string;
+    }
     projectMetrics: {
         title: string;
         assetsSectionTitle: string

src/common/themes.ts

@@ -1,5 +1,30 @@
 import {createTheme, IPalette} from "@fluentui/react";
 
+const rightPaneDefaultButtonPalette = {
+    themePrimary: "#E9ECEF",
+    themeLighterAlt: "#ebeef1",
+    themeLighter: "#edf0f3",
+    themeLight: "#f0f2f5",
+    themeTertiary: "#f2f4f6",
+    themeSecondary: "#f5f6f8",
+    themeDarkAlt: "#f7f9fa",
+    themeDark: "#fafbfb",
+    themeDarker: "#fcfdfd",
+    neutralLighterAlt: "#35393e",
+    neutralLighter: "#3c4046",
+    neutralLight: "#484c53",
+    neutralQuaternaryAlt: "#50545b",
+    neutralQuaternary: "#565a61",
+    neutralTertiaryAlt: "#70747c",
+    neutralTertiary: "#f0f2f5",
+    neutralSecondary: "#f2f4f6",
+    neutralPrimaryAlt: "#f5f6f8",
+    neutralPrimary: "#E9ECEF",
+    neutralDark: "#fafbfb",
+    black: "#fcfdfd",
+    white: "#2D3035"
+  }
+
 const greenButtonPalette = {
     themePrimary: "#78ad0e",
     themeLighterAlt: "#050701",
@@ -279,6 +304,7 @@ const subMenuPalette = {
 }
 
 
+const rightPaneDefaultButtonTheme = createTheme({palette: rightPaneDefaultButtonPalette});
 const defaultDarkTheme = createTheme({palette: DarkDefaultPalette});
 const whiteTheme = createTheme({palette: whiteButtonPalette});
 const redTheme = createTheme({palette: redButtonPalette});
@@ -291,6 +317,10 @@ const greenWithWhiteBackgroundTheme = createTheme({palette: greenWithWhiteBackgr
 const lightGreyTheme = createTheme({palette: lightGreyPalette});
 const subMenuTheme = createTheme({palette: subMenuPalette})
 
+export function getrightPaneDefaultButtonTheme() {
+    return rightPaneDefaultButtonTheme;
+}
+
 export function getPrimaryWhiteTheme() {
     return whiteTheme;
 }

src/react/components/common/common.scss

@@ -182,3 +182,17 @@
   cursor: pointer;
   width: 100%;
 }
+
+.separator-right-pane-main {
+  margin: 0 1rem;
+  div{
+      background-color: #32363B;
+      color: #E9ECEF;
+      font-weight: 600;
+  }
+}
+
+.model-confirm {
+  width: 110px;
+  margin-right: 20px;
+}

src/react/components/pages/modelCompose/composeModelView.tsx

@@ -3,7 +3,7 @@
 
 import React from "react";
 import { Customizer, IColumn, ICustomizations, Modal, DetailsList, SelectionMode, DetailsListLayoutMode, PrimaryButton, TextField } from "@fluentui/react";
-import { getDarkGreyTheme, getPrimaryGreenTheme, getPrimaryRedTheme } from "../../../../common/themes";
+import { getDarkGreyTheme, getPrimaryGreenTheme, getPrimaryRedTheme, getPrimaryGreyTheme } from "../../../../common/themes";
 import { strings } from "../../../../common/strings";
 import { IModel } from "./modelCompose";
 
@@ -84,7 +84,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                             selectionMode={SelectionMode.none}
                             isHeaderVisible={true}
                             layoutMode={DetailsListLayoutMode.justified}
-                            />
+                        />
                     }
                     {
                         this.state.cannotBeIncludeModels.length > 0 &&
@@ -115,7 +115,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                         </PrimaryButton>
                         <PrimaryButton
                             className="modal-cancel"
-                            theme={getPrimaryRedTheme()}
+                            theme={getPrimaryGreyTheme()}
                             onClick={this.close}
                             >
                             Close

src/react/components/pages/modelCompose/modelCompose.scss

@@ -138,6 +138,7 @@ h4 {
 }
 
 .modal-alert {
+    text-align: center;
     color: #ff4040;
     font-size: small;
     margin-bottom: 1rem;
@@ -165,7 +166,8 @@ h4 {
 }
 
 .modal-buttons-container {
-    justify-content: space-between;
+    justify-content: flex-end;
+    display: flex;
     margin-top: 1.5rem;
 }
 

src/react/components/pages/predict/predictPage.scss

@@ -72,3 +72,35 @@
 .predict-button {
   margin-bottom: 20px;
 }
+
+.no-models-warning {
+  margin-top: 8px;
+}
+
+.model-selection-container {
+  padding-top: 8px; 
+  padding-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.model-selection-header {
+  margin-bottom: 4px;
+}
+
+.model-selection-info-header {
+  margin-bottom: 0px;
+}
+
+.model-selection-info-key {
+  font-size: 12px;
+  color: #d1d1d1;
+  min-width: 80px;
+  float: left;
+}
+
+.model-selection-info-value {
+  font-size: 12px;
+  color: #d1d1d1;
+  float: left;
+}