Move all inputs/outputs to data store

Tools/WinML-Dashbaord/src/datastore/actionCreators.ts

@@ -1,18 +1,23 @@
 import * as actions from './actions';
 import { IMetadataProps, IProperties } from './state';
 
+export const setInputs = (inputs?: { [key: string]: any }) => ({
+    inputs,
+    type: actions.SET_INPUTS,
+})
+
 export const setMetadataProps = (metadataProps: IMetadataProps) => ({
     metadataProps,
     type: actions.SET_METADATA_PROPS,
 })
 
-export const setModelInputs = (inputs: any) => ({
-    inputs,
+export const setModelInputs = (modelInputs?: string[]) => ({
+    modelInputs,
     type: actions.SET_MODEL_INPUTS,
 })
 
-export const setModelOutputs = (outputs: any) => ({
-    outputs,
+export const setModelOutputs = (modelOutputs?: string[]) => ({
+    modelOutputs,
     type: actions.SET_MODEL_OUTPUTS,
 })
 
@@ -21,6 +26,11 @@ export const setNodes = (nodes?: { [key: string]: any }) => ({
     type: actions.SET_NODES,
 })
 
+export const setOutputs = (outputs?: { [key: string]: any }) => ({
+    outputs,
+    type: actions.SET_OUTPUTS,
+})
+
 export const setProperties = (properties: IProperties) => ({
     properties,
     type: actions.SET_PROPERTIES,

Tools/WinML-Dashbaord/src/datastore/actions.ts

@@ -1,25 +1,25 @@
 import { IMetadataProps, IProperties } from './state';
 
+export const SET_INPUTS = 'SET_INPUTS';
 export const SET_METADATA_PROPS = 'UPDATE_METADATA_PROPS';
-export const SET_MODEL_INPUTS = 'UPDATE_INPUTS';
-export const SET_MODEL_OUTPUTS = 'UPDATE_OUTPUTS';
+export const SET_MODEL_INPUTS = 'UPDATE_MODEL_INPUTS';
+export const SET_MODEL_OUTPUTS = 'UPDATE_MODEL_OUTPUTS';
 export const SET_NODES = 'UPDATE_NODES';
+export const SET_OUTPUTS = 'SET_OUTPUTS';
 export const SET_PROPERTIES = 'UPDATE_PROPERTIES';
 export const SET_SELECTED_NODE = 'UPDATE_SELECTED_NODE';
 
-interface IValueInfo {
-    description?: string,
-    id: string,
-    name: string,
-    type: string,
-}
-
 export interface IAction {
-    type: string,
-    inputs: IValueInfo,
-    metadataProps: IMetadataProps,
     nodes: { [key: string]: any },
-    outputs: IValueInfo,
+    type: string,
+
+    inputs: any[],
+    outputs: any[],
+
+    modelInputs: string[],
+    modelOutputs: string[],
+
+    metadataProps: IMetadataProps,
     properties: IProperties,
     selectedNode: string,
 }

Tools/WinML-Dashbaord/src/datastore/reducers.ts

@@ -4,12 +4,16 @@ import IState from './state';
 export function rootReducer(state: IState, action: actions.IAction) {
     state = state || {};
     switch (action.type) {
+        case actions.SET_INPUTS:
+            return { ...state, inputs: action.inputs };
+        case actions.SET_OUTPUTS:
+            return { ...state, outputs: action.outputs };
         case actions.SET_METADATA_PROPS:
             return { ...state, metadataProps: action.metadataProps };
         case actions.SET_MODEL_INPUTS:
-            return { ...state, inputs: action.inputs };
+            return { ...state, modelInputs: action.modelInputs };
         case actions.SET_MODEL_OUTPUTS:
-            return { ...state, outputs: action.outputs };
+            return { ...state, modelOutputs: action.modelOutputs };
         case actions.SET_NODES:
             return { ...state, nodes: action.nodes };
         case actions.SET_PROPERTIES:

Tools/WinML-Dashbaord/src/datastore/state.ts

@@ -7,8 +7,12 @@ export interface IProperties {
 }
 
 export default interface IState {
+    inputs: { [key: string]: any },
     metadataProps: IMetadataProps,
+    modelInputs: { [key: string]: any },
+    modelOutputs: { [key: string]: any },
     nodes: { [key: string]: any },
+    outputs: { [key: string]: any },
     properties: IProperties,
     selectedNode: string,
 }

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 { setMetadataProps, setModelInputs, setModelOutputs, setNodes, setProperties, setSelectedNode } from '../../../datastore/actionCreators';
+import { setInputs, setMetadataProps, setModelInputs, setModelOutputs, setNodes, setOutputs, setProperties, setSelectedNode } from '../../../datastore/actionCreators';
 import { ModelProtoSingleton } from '../../../datastore/proto/modelProto';
 import IState from '../../../datastore/state';
 import './fixed-position-override.css';
@@ -17,10 +17,12 @@ interface IComponentProperties {
     file?: File,
 
     // Redux properties
-    setNodes: typeof setNodes,
+    setInputs: typeof setInputs,
+    setMetadataProps: typeof setMetadataProps,
     setModelInputs: typeof setModelInputs,
     setModelOutputs: typeof setModelOutputs,
-    setMetadataProps: typeof setMetadataProps,
+    setNodes: typeof setNodes,
+    setOutputs: typeof setOutputs,
     setProperties: typeof setProperties,
     setSelectedNode: typeof setSelectedNode,
 }
@@ -178,8 +180,16 @@ class NetronComponent extends React.Component<IComponentProperties, IComponentSt
         // FIXME What to do when model has multiple graphs?
         const graph = model.graphs[0];
         if (graph.constructor.name === 'OnnxGraph') {
-            this.props.setModelInputs(graph.inputs);
-            this.props.setModelOutputs(graph.outputs);
+            const getNames = (list: any[]) => list.reduce((acc: string[], x: any) => {
+                acc.push(x.name);
+                return acc;
+            }, []);
+            const inputs = getNames(graph.inputs);
+            const outputs = getNames(graph.outputs);
+            this.props.setModelInputs(inputs);
+            this.props.setModelOutputs(outputs);
+            this.props.setInputs(inputs);
+            this.props.setOutputs(outputs);
             const nodes = {};
             for (const node of proto.graph.node) {
                 nodes[node.name] = node;
@@ -189,8 +199,8 @@ class NetronComponent extends React.Component<IComponentProperties, IComponentSt
             this.props.setMetadataProps(this.propsToObject(model._metadataProps));
             this.props.setProperties(this.propsToObject(model.properties));
         } else {
-            this.props.setModelInputs(null);
-            this.props.setModelOutputs(null);
+            this.props.setModelInputs(undefined);
+            this.props.setModelOutputs(undefined);
             this.props.setNodes(undefined);
             this.props.setMetadataProps({});
             this.props.setProperties({});
@@ -217,10 +227,12 @@ const mapStateToProps = (state: IState) => ({
 });
 
 const mapDispatchToProps = {
+    setInputs,
     setMetadataProps,
     setModelInputs,
     setModelOutputs,
     setNodes,
+    setOutputs,
     setProperties,
     setSelectedNode,
 }