Refactor updates of protobuf data

Tools/WinML-Dashbaord/src/datastore/proto/middleware.ts

@@ -0,0 +1,9 @@
+import { IAction, UPDATE_METADATA_PROPS } from '../actions';
+import { ModelProtoSingleton } from './modelProto';
+
+export const protoMiddleware = (store: any) => (next: (action: IAction) => any) => (action: IAction) => {
+    if (action.type === UPDATE_METADATA_PROPS) {
+        ModelProtoSingleton.setMetadata(action.metadataProps);
+    }
+    return next(action);
+}

Tools/WinML-Dashbaord/src/datastore/proto/modelProto.ts

@@ -5,6 +5,9 @@ import { Proto } from './proto';
 class ModelProto extends Proto {
     public setMetadata(metadata: IMetadataProps) {
         Proto.getOnnx();
+        if (!this.proto) {
+            return;
+        }
         this.proto.metadataProps = Object.keys(metadata).reduce((acc: any[], x: string) => {
             const entry = new Proto.types.StringStringEntryProto();
             entry.key = x;
@@ -20,8 +23,8 @@ class ModelProto extends Proto {
         return writer.finish();
     }
 
-    public download() {
-        super.download(this.serialize());
+    public download = () => {
+        Proto.download(this.serialize());
     }
 }
 

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

@@ -20,11 +20,7 @@ export class Proto {
         return this.onnx;
     }
 
-    private static onnx: any;
-
-    public proto: any;
-
-    public download(data: Uint8Array, filename='model.onnx') {
+    public static download(data: Uint8Array, filename='model.onnx') {
         const blob = new Blob([data], {type: 'application/octet-stream'});
         const anchor = document.createElement('a');
         anchor.href = URL.createObjectURL(blob);
@@ -35,4 +31,7 @@ export class Proto {
         document.body.removeChild(anchor);
         URL.revokeObjectURL(anchor.href);
     }
+
+    private static onnx: any;
+    public proto: any;
 }

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

@@ -1,8 +1,9 @@
-import { createStore } from 'redux'
+import { applyMiddleware, createStore } from 'redux'
 
+import { protoMiddleware } from './proto/middleware';
 import { rootReducer } from './reducers';
 
 const browserGlobal = window as any;
 
-const store = createStore(rootReducer, browserGlobal.__REDUX_DEVTOOLS_EXTENSION__ && browserGlobal.__REDUX_DEVTOOLS_EXTENSION__());
+const store = createStore(rootReducer, browserGlobal.__REDUX_DEVTOOLS_EXTENSION__ && browserGlobal.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(protoMiddleware));
 export default store;

Tools/WinML-Dashbaord/src/view/edit/View.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 
 import Resizable from '../../components/Resizable';
 import { ModelProtoSingleton } from '../../datastore/proto/modelProto';
-import store from '../../datastore/store';
 import LeftPanel from './LeftPanel';
 import * as netron from './netron/Netron';
 import RightPanel from './RightPanel';
@@ -36,7 +35,7 @@ export default class EditView extends React.Component<{}, IComponentState> {
                 </div>
                 <Resizable>
                     <DefaultButton text='Open file' onClick={this.openFile}/>
-                    <DefaultButton text='Save file' onClick={this.saveFile}/>
+                    <DefaultButton text='Save file' onClick={ModelProtoSingleton.download}/>
                     <input type='file' style={{display: 'none'}} accept=".onnx,.pb,.meta,.tflite,.keras,.h5,.json,.mlmodel,.caffemodel" ref={this.openFileInput} />
                     <RightPanel />
                 </Resizable>
@@ -73,10 +72,4 @@ export default class EditView extends React.Component<{}, IComponentState> {
             file: files[0],
         })
     }
-
-    private saveFile = () => {
-        // TODO Refactor data store access
-        ModelProtoSingleton.setMetadata(store.getState().metadataProps);
-        ModelProtoSingleton.download();
-    }
 }