microsoft
/
Windows-Machine-Learning
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Update selected node in datastore

This commit is contained in:
Tiago Koji Castro Shibata 2018-07-27 16:04:16 -07:00
Родитель 172231bdc8
Коммит d535e489a8
7 изменённых файлов: 72 добавлений и 41 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
Tools/WinML-Dashbaord/src/components/Resizable.css
Просмотреть файл

@ -5,5 +5,5 @@
overflow: auto;
min-width: 80px;
width: 350px;
transition: width 300ms;
transition: width 200ms;
}

5
Tools/WinML-Dashbaord/src/datastore/actionCreators.ts
Просмотреть файл

@ -25,3 +25,8 @@ export const updateProperties = (properties: IProperties) => ({
properties,
type: actions.UPDATE_PROPERTIES,
})
export const updateSelectedNode = (selectedNode?: string) => ({
selectedNode,
type: actions.UPDATE_SELECTED_NODE,
})

2
Tools/WinML-Dashbaord/src/datastore/actions.ts
Просмотреть файл

@ -5,6 +5,7 @@ export const UPDATE_INPUTS = 'UPDATE_INPUTS';
export const UPDATE_OUTPUTS = 'UPDATE_OUTPUTS';
export const UPDATE_METADATA_PROPS = 'UPDATE_METADATA_PROPS';
export const UPDATE_PROPERTIES = 'UPDATE_PROPERTIES';
export const UPDATE_SELECTED_NODE = 'UPDATE_SELECTED_NODE';
interface IValueInfo {
description?: string,
@ -20,4 +21,5 @@ export interface IAction {
metadataProps: IMetadataProps,
outputs: IValueInfo,
properties: IProperties,
selectedNode: string,
}

2
Tools/WinML-Dashbaord/src/datastore/reducers.ts
Просмотреть файл

@ -14,6 +14,8 @@ export function rootReducer(state: IState, action: actions.IAction) {
return { ...state, outputs: action.outputs };
case actions.UPDATE_PROPERTIES:
return { ...state, properties: action.properties };
case actions.UPDATE_SELECTED_NODE:
return { ...state, selectedNode: action.selectedNode };
default:
return state;
}

1
Tools/WinML-Dashbaord/src/datastore/state.ts
Просмотреть файл

@ -10,4 +10,5 @@ export default interface IState {
graph: any,
metadataProps: IMetadataProps,
properties: IProperties,
selectedNode: string,
}

6
Tools/WinML-Dashbaord/src/view/edit/LeftPanel.tsx
Просмотреть файл

@ -12,12 +12,13 @@ import './Panel.css';
interface IComponentProperties {
// Redux properties
graph?: any,
selectedNode?: string,
}
class LeftPanel extends React.Component<IComponentProperties, {}> {
public render() {
return (
<Resizable visible={!!this.props.graph}>
<Resizable visible={!!(this.props.graph && this.props.selectedNode)}>
{this.getContent()}
</Resizable>
);
@ -40,7 +41,7 @@ class LeftPanel extends React.Component<IComponentProperties, {}> {
}
return (
<div>
<Label className='PanelName'>Node</Label>
<Label className='PanelName'>{`Node: ${this.props.selectedNode || ''}`}</Label>
<div className='Panel'>
<Collapsible label='Tensor shapes'>
<Label>Inputs</Label>
@ -55,6 +56,7 @@ class LeftPanel extends React.Component<IComponentProperties, {}> {
const mapStateToProps = (state: IState) => ({
graph: state.graph,
selectedNode: state.selectedNode,
})
export default connect(mapStateToProps)(LeftPanel);

95
Tools/WinML-Dashbaord/src/view/edit/netron/Netron.tsx
Просмотреть файл

@ -6,7 +6,7 @@ import 'netron/src/view-sidebar.css';
import 'netron/src/view.css';
import 'npm-font-open-sans/open-sans.css';
import { updateGraph, updateInputs, updateMetadataProps, updateOutputs, updateProperties } from '../../../datastore/actionCreators';
import { updateGraph, updateInputs, updateMetadataProps, updateOutputs, updateProperties, updateSelectedNode } from '../../../datastore/actionCreators';
import { ModelProtoSingleton } from '../../../datastore/proto/modelProto';
import IState from '../../../datastore/state';
import './fixed-position-override.css';
@ -22,6 +22,7 @@ interface IComponentProperties {
updateOutputs: typeof updateOutputs,
updateMetadataProps: typeof updateMetadataProps,
updateProperties: typeof updateProperties,
updateSelectedNode: typeof updateSelectedNode,
}
interface IComponentState {
@ -48,10 +49,10 @@ class NetronComponent extends React.Component<IComponentProperties, IComponentSt
const s = document.createElement('script');
s.src = "netron_bundle.js";
s.async = true;
s.onload = this.installModelLoadedProxy;
s.onload = this.onNetronInitialized;
document.body.appendChild(s);
} else {
this.installModelLoadedProxy();
this.onNetronInitialized();
}
}
@ -144,48 +145,25 @@ class NetronComponent extends React.Component<IComponentProperties, IComponentSt
}, {});
}
private installModelLoadedProxy = () => {
private onNetronInitialized = () => {
// Reset document overflow property
document.documentElement.style.overflow = 'initial';
this.installModelLoadedProxy();
browserGlobal.view._sidebar.open = this.openPanel;
browserGlobal.view._sidebar.close = this.closePanel;
}
const updateDataStore = (model: any) => {
const proto = model._model
ModelProtoSingleton.proto = null;
// FIXME What to do when model has multiple graphs?
const graph = model.graphs[0];
if (graph.constructor.name === 'OnnxGraph') {
this.props.updateInputs(graph.inputs);
this.props.updateOutputs(graph.outputs);
// Normalize graph
// const normalizedGraph: Array<{}> = [];
// for (const node of graph.nodes) {
// normalizedGraph.push({
// inputs: node.inputs,
// // ... Add other properties of interest
// });
// }
this.props.updateGraph(true); // TODO
this.props.updateMetadataProps(this.propsToObject(model._metadataProps));
this.props.updateProperties(this.propsToObject(model.properties));
} else {
this.props.updateInputs(null);
this.props.updateOutputs(null);
this.props.updateGraph(null);
this.props.updateMetadataProps({});
this.props.updateProperties({});
}
ModelProtoSingleton.proto = proto;
};
private installModelLoadedProxy = () => {
// Install proxy on browserGlobal.view.loadBuffer and update the data store
const handler = {
apply: (target: any, thisArg: any, args: any) => {
// Original signature: buffer, identifier, callback
// We will patch the callback to update our data store first
return target.call(thisArg, args[0], args[1], (err: Error, model: any) => {
const [buffer, identifier, callback] = args;
// Patch the callback to update our data store first
return target.call(thisArg, buffer, identifier, (err: Error, model: any) => {
if (!err) {
updateDataStore(model);
this.updateDataStore(model);
}
return args[2](err, model);
return callback(err, model);
});
},
};
@ -193,6 +171,46 @@ class NetronComponent extends React.Component<IComponentProperties, IComponentSt
browserGlobal.view.loadBuffer = revokableProxy.proxy;
this.revokeModelLoadedProxy = revokableProxy.revoke;
}
private updateDataStore = (model: any) => {
const proto = model._model
ModelProtoSingleton.proto = null;
// FIXME What to do when model has multiple graphs?
const graph = model.graphs[0];
if (graph.constructor.name === 'OnnxGraph') {
this.props.updateInputs(graph.inputs);
this.props.updateOutputs(graph.outputs);
// Normalize graph
// const normalizedGraph: Array<{}> = [];
// for (const node of graph.nodes) {
// normalizedGraph.push({
// inputs: node.inputs,
// // ... Add other properties of interest
// });
// }
this.props.updateGraph(true); // TODO
this.props.updateMetadataProps(this.propsToObject(model._metadataProps));
this.props.updateProperties(this.propsToObject(model.properties));
} else {
this.props.updateInputs(null);
this.props.updateOutputs(null);
this.props.updateGraph(null);
this.props.updateMetadataProps({});
this.props.updateProperties({});
}
ModelProtoSingleton.proto = proto;
};
private openPanel = (content: any, title: string, width?: number) => {
if (title === 'Node Properties') {
console.log(content[1].innerText);
this.props.updateSelectedNode(content[1].innerText);
}
}
private closePanel = () => {
this.props.updateSelectedNode(undefined);
}
}
const mapStateToProps = (state: IState) => ({
@ -205,6 +223,7 @@ const mapDispatchToProps = {
updateMetadataProps,
updateOutputs,
updateProperties,
updateSelectedNode,
}
export const Netron = connect(mapStateToProps, mapDispatchToProps)(NetronComponent);