feat: model compose (#328)

* fix: resize canvas on change of tag split pane (#210)

* fix: initial commit on #203

* fix: don't rotate image to match OCR result (#211)

* update app version to b481f37 (#212)

* feat: Add model compose page

* feat: add icon SortUp and SortDown

* feat: add getSelections

* fix: remove marqueeSelection

* fix: remove unused pointer-events

* feat: Add spinner to model compose page

* feat: reset selected in componentDidUpdate

* refactor: remove and rewrite comments and console

* feat: spinner class changes

* feat: add model source in predict page

* feat: first version of composed models reorder

* feat: add filter field and more on composed list reorder

* feat: reset sort icon and add move composed items back to top button in commandbar

* feat: get models from nextLink and set sort by createdTime by default

* fix: add nextLink check and remove console

* fix: preserve selection while items are getting filtered

* feat: delay to meet the rate threshold when extracting data from next link

* feat: Add blink notification while loading

* fix: enlarge the blink notification

* feat: add refresh button on model compose page

* feat: add toast when exceed rate limitation

* feat: UX design improve

* refactor: refactor code

* refactor: remove comments

* fix: set allModels as items in ViewSelection

* feat: finish load next page mannually draft

* feat: put composed model on top

* refactor: remove not in use code

* feat: enable model name and set sticky list header

* fix: style change and refactor code

* feat: add compose View draft

* fix: tslint style error

* fix: change typescript version in pkg

* feat: add modelComposeView, add colon in train record and comment model selection in predict page

* fix: change train button style

* fix: textfield name and turn off autocomplete

* fix: change to yarn and hide loading spinner when no nextpage

* feat: enable compose new model

* fix: composed model shows more than once in list and tslint error, remove console, refactor code

* fix: change train route to preview version to enable model name

* fix: renew icon source

* spelling

* fix: model name sort

* refactor: predict page

* fix: text filter is case sensitive

* fix: filter now case insensitive

* fix: spelling

* refactor: modify variable names

* feat: set either latest train or latest compose model as model using in prediction

* fix: remove dark block when refreshing page

* fix: update composed models status

* add test runbook

* fix: spelling

* fix: deletes unused import

* refactor:remove console

* refactor: change column header name

* refactor: naming

* fix: disable compose button in modal when selected models are not enough

* fix: reset column header when refreshing

* fix: remove train page backend warning

* update yarn

* fix: remove unused import and migrate to fluent ui

* fix: create and update time sort

* fix: register icons

* styling for StatusCircleCheckmark

* fix: transparent backgounf on checkmarkCircle

* fix: localize strings

* fix: add alert when there aren't enough models for compose

* refactor: remove console

* fix: add yarn to try to fix check failure

* fix: alert will be shown when list has two models

* fix: throw error when selected model has invalid one

* refactor: viewSelection indent and rename

* fix: change trigger download model Id

* fix:allModels is changed by sort

* refactor: change viewSelection to LF

* remove ViewSelect file

* add viewSelection.tsx

* fix: change file to LF

* fix: retreat yarn.lock to resolve yarn build error

* fix: change import of IModel in composeModelView

Co-authored-by: stew-ro <60453211+stew-ro@users.noreply.github.com>
Co-authored-by: alex-krasn <64093224+alex-krasn@users.noreply.github.com>
Co-authored-by: kunzheng <58841788+kunzms@users.noreply.github.com>
Co-authored-by: alex-krasn <v-alexkr@microsoft.com>

docs/manual_testing/manual-test-runbook.md

@@ -50,3 +50,48 @@ 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 all documents" in the canvas command bar\
 **`Then`** I should see "Running OCR..." for all documents. When running OCR finishes for each document, I should be ale to view each document's updated OCR JSON file.
+
+
+___
+___
+
+## **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 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 
+**`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 
+**`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\
+**`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\
+**`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 items whose id or name contains the text be filtered out. 

package.json

@@ -41,7 +41,8 @@
         "serialize-javascript": "^3.0.0",
         "shortid": "^2.2.15",
         "utif": "^3.1.0",
-        "vott-react": "^0.2.12"
+        "vott-react": "^0.2.12",
+        "yarn": "^1.22.4"
     },
     "scripts": {
         "start": "nf start -p 3000",

src/common/constants.ts

@@ -23,6 +23,8 @@ export const constants = {
     convertedThumbnailQuality: 0.2,
 
     apiModelsPath: "/formrecognizer/v2.0-preview/custom/models",
+    apiPreviewPath: "/formrecognizer/v2.1-preview.1/custom/models",
+    apiPreviewComposePath: "/formrecognizer/v2.1-preview.1/custom/models/compose",
 
     pdfjsWorkerSrc(version: string) {
         return `//fotts.azureedge.net/npm/pdfjs-dist/${version}/pdf.worker.js`;

src/common/localization/en-us.ts

@@ -122,6 +122,51 @@ export const english: IAppStrings = {
         pleaseWait: "Please wait",
         notTrainedYet: "Not trained yet",
         backEndNotAvailable: "Checkbox feature will work in future version of Form Recognizer service, please stay tuned.",
+        addName: "Add model name...",
+    },
+    modelCompose: {
+        title: "Model compose",
+        columnAria: {
+            icon: "Model with icon is a new composed model",
+        },
+        loading: "Model is loading...",
+        composing: "Model is composing, please wait...",
+        column: {
+            icon: {
+                name:"Composed Icon",
+            },
+            id: {
+                headerName: "Model Id",
+                fieldName: "modelId",
+            },
+            name: {
+                headerName: "Model Name",
+                fieldName: "modelName",
+            },
+            status: {
+                headerName: "Status",
+                fieldName: "status",
+            },
+            created: {
+                headerName: "Created",
+                fieldName: "created",
+            },
+            lastupdated: {
+                headerName: "Last Updated",
+                fieldName: "lastUpdated",
+            },
+        },
+        modelView: {
+            titleAria: "Compose Model View",
+            addComposeModelName: "Add compose model name...",
+            NotEnoughModels: " Should have at least more than one selected model to compose a new model",
+        },
+        commandBar: {
+            ariaLabel: "Please use command bar to compose models",
+            composeAria: "Compose Model",
+            refreshAria: "Refresh the list",
+            filter: "Filter By Name...",
+        }
     },
     predict: {
         title: "Analyze",

src/common/localization/es-cl.ts

@@ -123,6 +123,51 @@ export const spanish: IAppStrings = {
         pleaseWait: "Por favor espera",
         notTrainedYet: "Aún no entrenado",
         backEndNotAvailable: "La función de casilla de verificación funcionará en la versión futura del servicio de reconocimiento de formularios, manténgase atento.",
+        addName:"Agregar nombre de modelo ...",
+    },
+    modelCompose: {
+        title: "Modelo componer",
+        columnAria: {
+            icon: "Modelo con icono es un nuevo modelo compuesto",
+        },
+        loading: "La modelo se está cargando ...",
+        composing: "La modelo está componiendo, por favor espera ...",
+        column: {
+            icon: {
+                name: "Icono compuesto",
+            },
+            id: {
+                headerName: "ID del Modelo",
+                fieldName: "modelId",
+            },
+            name: {
+                headerName: "Nombre del Modelo",
+                fieldName: "modelName",
+            },
+            status: {
+                headerName: "Estado",
+                fieldName: "status",
+            },
+            created: {
+                headerName: "Creada",
+                fieldName: "created",
+            },
+            lastupdated: {
+                headerName: "Última Actualización",
+                fieldName: "lastUpdated",
+            },
+        },
+        modelView: {
+            titleAria: "Componer vista de modelo",
+            addComposeModelName: "Añadir componer el nombre de modelo ...",
+            NotEnoughModels: "Debe tener más de un modelo seleccionado para componer un nuevo modelo",
+        },
+        commandBar: {
+            ariaLabel: "Utilice la barra de comandos para componer modelos",
+            composeAria: "Componer modelo",
+            refreshAria: "Actualizar la lista",
+            filter: "Filtrar por nombre ...",
+        }
     },
     predict: {
         title: "Analizar",

src/common/mockFactory.ts

@@ -147,6 +147,7 @@ export default class MockFactory {
             apiUriBase: "localhost",
             folderPath: "",
             trainRecord: null,
+            predictModelId: "",
         };
     }
 

src/common/strings.ts

@@ -122,7 +122,52 @@ export interface IAppStrings {
         pleaseWait: string;
         notTrainedYet: string;
         backEndNotAvailable: string;
+        addName: string;
     };
+    modelCompose: {
+        title: string;
+        columnAria: {
+            icon: string;
+        }
+        loading: string;
+        composing: string;
+        column: {
+            icon: {
+                name: string;
+            }
+            id: {
+                headerName: string;
+                fieldName: string;
+            }
+            name: {
+                headerName: string;
+                fieldName: string;
+            }
+            status: {
+                headerName: string;
+                fieldName: string;
+            }
+            created: {
+                headerName: string;
+                fieldName: string;
+            }
+            lastupdated: {
+                headerName: string;
+                fieldName: string;
+            }
+        }
+        modelView: {
+            titleAria: string;
+            addComposeModelName: string;
+            NotEnoughModels: string;
+        }
+        commandBar: {
+            ariaLabel: string;
+            composeAria: string;
+            refreshAria: string;
+            filter: string;
+        }
+    }
     predict: {
         title: string;
         uploadFile: string;

src/common/themes.ts

@@ -1,4 +1,4 @@
-import {createTheme} from "@fluentui/react";
+import {createTheme, IPalette} from "@fluentui/react";
 
 const greenButtonPalette = {
     themePrimary: "#78ad0e",
@@ -201,6 +201,34 @@ const greenWithWhiteBackgroundPalette = {
     white: "#ffffff",
   };
 
+const DarkDefaultPalette: Partial<IPalette> = {
+    themeDarker: "#82c7ff",
+    themeDark: "#6cb8f6",
+    themeDarkAlt: "#3aa0f3",
+    themePrimary: "#2899f5",
+    themeSecondary: "#0078d4",
+    themeTertiary: "#235a85",
+    themeLight: "#004c87",
+    themeLighter: "#043862",
+    themeLighterAlt: "#092c47",
+    black: "#ffffff",
+    neutralDark: "#faf9f8",
+    neutralPrimary: "#f3f2f1",
+    neutralPrimaryAlt: "#c8c6c4",
+    neutralSecondary: "#a19f9d",
+    neutralSecondaryAlt: "#979693",
+    neutralTertiary: "#797775",
+    neutralTertiaryAlt: "#484644",
+    neutralQuaternary: "#3b3a39",
+    neutralQuaternaryAlt: "#323130",
+    neutralLight: "#292827",
+    neutralLighter: "#252423",
+    neutralLighterAlt: "#201f1e",
+    white: "#1b1a19",
+    redDark: "#F1707B",
+  };
+
+const defaultDarkTheme = createTheme({palette: DarkDefaultPalette});
 const whiteTheme = createTheme({palette: whiteButtonPalette});
 const redTheme = createTheme({palette: redButtonPalette});
 const greenTheme = createTheme({palette: greenButtonPalette});
@@ -241,3 +269,7 @@ export function getDarkTheme() {
 export function getGreenWithWhiteBackgroundTheme() {
     return greenWithWhiteBackgroundTheme;
 }
+
+export function getDefaultDarkTheme() {
+    return defaultDarkTheme;
+}