feature: keep prediction in UI (#285)

* feature: we're keepin prediction in UI now

* feat: add protection for additional hidden elements for skipButton

* bugfix: - delete forgoten changes

* rerender on train model change + refactor

* fix: forgotten log , and comment

* fix: now rerender when setting changes and on new project

* refactor: delete unnecessary helper file

* fix: add  this.props.project check

Co-authored-by: stew-ro <60453211+stew-ro@users.noreply.github.com>

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

@@ -156,7 +156,9 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
         const urlInputDisabled: boolean = !this.state.predictionLoaded || this.state.isFetching;
         const predictDisabled: boolean = !this.state.predictionLoaded || !this.state.file;
         const predictions = this.getPredictionsFromAnalyzeResult(this.state.analyzeResult);
-        const fetchDisabled: boolean = !this.state.predictionLoaded || this.state.isFetching ||
+        const fetchDisabled: boolean =
+            !this.state.predictionLoaded ||
+            this.state.isFetching ||
             this.state.inputedFileURL.length === 0 ||
             this.state.inputedFileURL === strings.predict.defaultURLInput;
 
@@ -165,8 +167,13 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
             { key: "url", text: "URL" },
         ];
 
+        const onPredictionPath: boolean = this.props.match.path.includes("predict");
+
         return (
-            <div className="predict skipToMainContent" id="pagePredict">
+            <div
+                className={`predict skipToMainContent ${onPredictionPath ? "" : "hidden"} `}
+                id="pagePredict"
+                style={{ display: `${onPredictionPath ? "flex" : "none"}` }} >
                 <div className="predict-main">
                     {this.state.file && this.state.imageUri && this.renderImageMap()}
                     {this.renderPrevPageButton()}
@@ -296,7 +303,7 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
                                     />
                                 </div>
                             }
-                            {Object.keys(predictions).length > 0 &&
+                            {Object.keys(predictions).length > 0 && this.props.project &&
                                 <PredictResult
                                     predictions={predictions}
                                     analyzeResult={this.state.analyzeResult}

src/react/components/shell/mainContentRouter.tsx

@@ -8,13 +8,15 @@ import AppSettingsPage from "../pages/appSettings/appSettingsPage";
 import TrainPage from "../pages/train/trainPage";
 import ConnectionPage from "../pages/connections/connectionsPage";
 import EditorPage from "../pages/editorPage/editorPage";
-import PredictPage from "../pages/predict/predictPage";
 import ProjectSettingsPage from "../pages/projectSettings/projectSettingsPage";
+import { PredictPageRoute } from './preditcPageRoute';
+
 
 /**
  * @name - Main Content Router
  * @description - Controls main content pane based on route
  */
+
 export function MainContentRouter() {
     return (
         <div className="app-content text-light">
@@ -26,10 +28,11 @@ export function MainContentRouter() {
                 <Route path="/projects/:projectId/edit" component={EditorPage} />
                 <Route path="/projects/create" component={ProjectSettingsPage} />
                 <Route path="/projects/:projectId/train" component={TrainPage} />
-                <Route path="/projects/:projectId/predict" component={PredictPage} />
+                <Route path="/projects/:projectId/predict" />
                 <Route path="/projects/:projectId/settings" component={ProjectSettingsPage} />
                 <Route component={HomePage} />
             </Switch>
+            <PredictPageRoute />
         </div>
     );
 }

src/react/components/shell/preditcPageRoute.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React, { useEffect, useState } from "react";
+import { Route } from "react-router-dom";
+import { useSelector } from 'react-redux'
+
+import PredictPage from "../pages/predict/predictPage";
+import { IApplicationState } from '../../../models/applicationState';
+
+
+/**
+ * @name - Predict page Route
+ * @description - Controls rendering of predict page
+ */
+
+export function PredictPageRoute() {
+    const projectProperties = useSelector((state: IApplicationState) => {
+        if (state && state.currentProject) {
+            const { apiKey, folderPath, apiUriBase, id, trainRecord } = state.currentProject;
+            let modelId: string;
+            if (trainRecord) {
+                modelId = trainRecord.modelInfo.modelId;
+            }
+            return JSON.stringify({ id, apiKey, apiUriBase, folderPath, modelId });
+        }
+    });
+
+    const [prevProjectProperties, setPrevProjectProperties] = useState(projectProperties)
+    const [renderPrediction, setRenderPrediction] = useState(true);
+
+    useEffect(() => {
+        if (projectProperties !== prevProjectProperties) {
+            setRenderPrediction(false) // unmounts predictionPageRoute component on projectId or train ModelId change
+            setPrevProjectProperties(projectProperties);
+        }
+        return () => setRenderPrediction(true);
+    }, [renderPrediction, prevProjectProperties, projectProperties]);
+
+    return (renderPrediction &&
+        <Route
+            path={[
+                "/projects/:projectId/predict",
+                "/projects/:projectId/train",
+                "/projects/:projectId/edit",
+                "/projects/:projectId/settings",
+                "/"]}
+            component={PredictPage} />
+    );
+}

src/react/components/shell/skipButton.tsx

@@ -19,8 +19,10 @@ export class SkipButton extends React.Component<ISkipButtonProps> {
     private skipToId = (event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
 
-        const collection = document.getElementsByClassName(this.props.skipTo);
+        const collection: HTMLCollection = document.getElementsByClassName(this.props.skipTo);
-        const element = collection.length > 0 ? collection[0] as HTMLElement : null;
+        const collectionWithoutHiddenElements = Array.prototype.filter.call(collection, (el: HTMLElement) => !el.classList.contains("hidden"))
+
+        const element = collection.length > 0 ? collectionWithoutHiddenElements[0] as HTMLElement : null;
 
         if (!element) {
             return;