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>
This commit is contained in:
alex-krasn 2020-06-05 18:26:09 -07:00 коммит произвёл GitHub
Родитель da7b488d2e
Коммит dad98b9bd1
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
4 изменённых файлов: 71 добавлений и 9 удалений

Просмотреть файл

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

Просмотреть файл

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

Просмотреть файл

@ -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} />
);
}

Просмотреть файл

@ -19,8 +19,10 @@ export class SkipButton extends React.Component<ISkipButtonProps> {
private skipToId = (event: React.MouseEvent<HTMLAnchorElement>) => { private skipToId = (event: React.MouseEvent<HTMLAnchorElement>) => {
event.preventDefault(); 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) { if (!element) {
return; return;