feat: not allow to chose not-ready models (#394)

* not allow to chose not-redy models

* exclide not ready item from selection

* warning that composed models cannot be inclueded in the composed model

* - unused import

* fix checking exclided models length

* fix: forgotten log

* fix for passSelectedItems

* strings

* "ready" status from comstants

Co-authored-by: kunzheng <58841788+kunzms@users.noreply.github.com>

src/common/localization/en-us.ts

@@ -163,6 +163,8 @@ export const english: IAppStrings = {
             titleAria: "Compose Model View",
             addComposeModelName: "Add compose model name...",
             NotEnoughModels: " Should have at least more than one selected model to compose a new model",
+            modelsCannotBeIncluded: "Warning: These models will not be included in composed model!",
+            modelCannotBeIncluded: "Warning: This model will not be included in composed model!"
         },
         commandBar: {
             ariaLabel: "Please use command bar to compose models",

src/common/localization/es-cl.ts

@@ -164,6 +164,8 @@ export const spanish: IAppStrings = {
             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",
+            modelsCannotBeIncluded: "Advertencia: ¡estos modelos no se incluirán en el modelo compuesto!",
+            modelCannotBeIncluded: "Advertencia: ¡Este modelo no se incluirá en el modelo compuesto!",
         },
         commandBar: {
             ariaLabel: "Utilice la barra de comandos para componer modelos",

src/common/strings.ts

@@ -163,6 +163,8 @@ export interface IAppStrings {
             titleAria: string;
             addComposeModelName: string;
             NotEnoughModels: string;
+            modelsCannotBeIncluded: string;
+            modelCannotBeIncluded: string;
         }
         commandBar: {
             ariaLabel: string;

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

@@ -15,6 +15,7 @@ export interface IComposeModelViewProps {
 export interface IComposeModelViewState {
     hideModal: boolean;
     items: IModel[];
+    cannotBeIncludeModels: IModel[];
 }
 
 export default class ComposeModelView extends React.Component<IComposeModelViewProps, IComposeModelViewState> {
@@ -28,6 +29,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
         this.state = {
             hideModal: true,
             items: [],
+            cannotBeIncludeModels: [],
         }
     }
 
@@ -82,8 +84,22 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                             selectionMode={SelectionMode.none}
                             isHeaderVisible={true}
                             layoutMode={DetailsListLayoutMode.justified}
-                            >
-                        </DetailsList>
+                            />
+                    }
+                    {
+                        this.state.cannotBeIncludeModels.length > 0 &&
+                        <div className="excluded-items-container">
+                            <h6>{this.state.cannotBeIncludeModels.length > 1 ? strings.modelCompose.modelView.modelsCannotBeIncluded : strings.modelCompose.modelView.modelCannotBeIncluded}</h6>
+                            <DetailsList
+                                items={this.state.cannotBeIncludeModels}
+                                columns={columns}
+                                compact={true}
+                                setKey="none"
+                                selectionMode={SelectionMode.none}
+                                isHeaderVisible={false}
+                                layoutMode={DetailsListLayoutMode.justified}
+                            />
+                        </div>
                     }
                     {
                         this.state.items.length < 2 &&
@@ -109,10 +125,11 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
         )
     }
 
-    public open = (models: any) => {
+    public open = (models: any, cannotBeIncludeModels: any) => {
         this.setState({
             hideModal: false,
             items: models,
+            cannotBeIncludeModels,
         })
     }
 

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

@@ -132,12 +132,28 @@ h4 {
     margin-top: 10px;
 }
 
+.model-not-ready {
+    color: rgb(255, 104, 104);
+    pointer-events: none;
+}
+
 .modal-alert {
     color: #ff4040;
     font-size: small;
     margin-bottom: 1rem;
 }
 
+.excluded-items-container {
+    border-radius: 2px;
+    border: 1px rgba(255, 255, 255, 0.25) solid;
+    background-color: rgba(255, 0, 0, 0.295);
+    text-align: center;
+    color: white;
+    h6 {
+        padding-top: .25rem;
+    }
+}
+
 .modal-buttons-container {
     justify-content: space-between;
     margin-top: 1.5rem;

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

@@ -26,7 +26,8 @@ import { IColumn,
          TooltipHost,
          StickyPositionType,
          ScrollablePane,
-         ScrollbarVisibility} from "@fluentui/react";
+         ScrollbarVisibility,
+         IDetailsRowProps } from "@fluentui/react";
 import "./modelCompose.scss";
 import { strings } from "../../../../common/strings";
 import { getDarkGreyTheme, getDefaultDarkTheme } from "../../../../common/themes";
@@ -95,7 +96,8 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
     private selection: Selection;
     private allModels: IModel[];
     private refreshClicks: boolean;
-    private selectedItems: any[];
+    private selectedItems: IModel[] = [];
+    private cannotBeIncludedItems: IModel[] = [];
     private listRef = React.createRef<IDetailsList>();
     private composeModalRef: React.RefObject<ComposeModelView> = React.createRef();
 
@@ -192,6 +194,11 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
           });
     }
 
+    onRenderRow = (props: IDetailsRowProps, defaultRender?: IRenderFunction<IDetailsRowProps>): JSX.Element => {
+        const modelNotReady = props.item.status !== constants.statusCodeReady;
+        return defaultRender && defaultRender({...props, className: `${modelNotReady ? "model-not-ready" : ""}`})
+      };
+
     public async componentDidMount() {
         const projectId = this.props.match.params["projectId"];
         if (projectId) {
@@ -292,7 +299,7 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
                                         selection={this.selection}
                                         selectionPreservedOnEmptyClick={true}
                                         onRenderDetailsHeader={onRenderDetailsHeader}
-                                        >
+                                        onRenderRow={this.onRenderRow}>
                                     </DetailsList>
                                     {this.state.nextLink && this.state.nextLink !== "*" && !this.state.hasText &&
                                         <div className="next-page-container">
@@ -396,7 +403,7 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
 
     private reloadComposedModel = (models: IModel[]): IModel[] => {
         models.forEach(async (m: IModel) => {
-            if (m.status !== "ready" && m.status !== "invalid") {
+            if (m.status !== constants.statusCodeReady && m.status !== "invalid") {
                 const url = constants.apiModelsPath + "/" + m.modelId;
                 const newModel = await this.getComposeModelByURl(url);
                 const newStatus = newModel.status;
@@ -575,7 +582,7 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
     }
 
     private onComposeButtonClick = () => {
-        this.composeModalRef.current.open(this.selectedItems);
+        this.composeModalRef.current.open(this.selectedItems, this.cannotBeIncludedItems);
     }
 
     private onComposeConfirm = (composeModelName: string) => {
@@ -587,7 +594,8 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
     }
 
     private passSelectedItems = (Items: any[]) => {
-        this.selectedItems = Items;
+        this.cannotBeIncludedItems = Items.filter((item: IModel) => item.status !== constants.statusCodeReady);
+        this.selectedItems = Items.filter((item: IModel) => item.status === constants.statusCodeReady);
     }
 
     /**

src/react/components/pages/train/trainPage.tsx

@@ -344,7 +344,7 @@ export default class TrainPage extends React.Component<ITrainPageProps, ITrainPa
 
     private getTrainMessage = (trainingResult): string => {
         if (trainingResult !== undefined && trainingResult.modelInfo !== undefined
-            && trainingResult.modelInfo.status === "ready") {
+            && trainingResult.modelInfo.status === constants.statusCodeReady) {
             return "Trained successfully";
         }
         return "Training failed";
@@ -392,7 +392,7 @@ export default class TrainPage extends React.Component<ITrainPageProps, ITrainPa
         const checkSucceeded = (resolve, reject) => {
             const ajax = func();
             ajax.then((response) => {
-                if (response.data.modelInfo && response.data.modelInfo.status === "ready") {
+                if (response.data.modelInfo && response.data.modelInfo.status === constants.statusCodeReady) {
                     resolve(response.data);
                 } else if (response.data.modelInfo && response.data.modelInfo.status === "invalid") {
                     const message = _.get(