Add graphConfig as an attribute on Eagle. Added very simple UI to the…

… display state of graph config on the translator tab

src/Eagle.ts

@@ -65,6 +65,7 @@ export class Eagle {
 
     palettes : ko.ObservableArray<Palette>;
     logicalGraph : ko.Observable<LogicalGraph>;
+    graphConfig : ko.Observable<GraphConfig>;
     tutorial : ko.Observable<Tutorial>;
 
     eagleIsReady : ko.Observable<boolean>;
@@ -145,6 +146,7 @@ export class Eagle {
 
         this.palettes = ko.observableArray();
         this.logicalGraph = ko.observable(null);
+        this.graphConfig = ko.observable(null);
         this.eagleIsReady = ko.observable(false);
 
         this.leftWindow = ko.observable(new SideWindow(Eagle.LeftWindowMode.Palettes, Utils.getLeftWindowWidth(), false));
@@ -2035,7 +2037,7 @@ export class Eagle {
                     break;
 
                 case Eagle.FileType.GraphConfig:
-                    this._remoteConfigLoaded(file, data);
+                    this._remoteGraphConfigLoaded(file, data);
                     break;
 
                 default:
@@ -2170,7 +2172,7 @@ export class Eagle {
         }
     }
 
-    private _remoteConfigLoaded = (file: RepositoryFile, data: string): void => {
+    private _remoteGraphConfigLoaded = (file: RepositoryFile, data: string): void => {
         // attempt to parse the JSON
         let dataObject;
         try {
@@ -2183,9 +2185,11 @@ export class Eagle {
 
         const errorsWarnings: Errors.ErrorsWarnings = {"errors":[], "warnings":[]};
 
+        // load graph config from JSON and add to EAGLE
         const graphConfig = GraphConfig.fromJson(dataObject, errorsWarnings);
-        console.log(graphConfig);
+        this.graphConfig(graphConfig);
 
+        this.rightWindow().mode(Eagle.RightWindowMode.TranslationMenu);
     }
 
     private _reloadPalette = (file : RepositoryFile, data : string, palette : Palette) : void => {

src/GraphConfig.ts

@@ -1,3 +1,5 @@
+import * as ko from "knockout";
+
 import { Errors } from "./Errors";
 import { Repository } from "./Repository";
 
@@ -49,6 +51,10 @@ export class GraphConfigNode {
         return newField;
     }
 
+    getFields = (): Map<string, GraphConfigField> => {
+        return this.fields;
+    }
+
     static fromJson(data: any, errorsWarnings: Errors.ErrorsWarnings): GraphConfigNode {
         const result = new GraphConfigNode();
 
@@ -91,6 +97,16 @@ export class GraphConfig {
         this.addNode(nodeId).addField(fieldId).setValue(value);
     }
 
+    numFields: ko.PureComputed<number> = ko.pureComputed(() => {
+        let count = 0;
+
+        for (const [id, node] of this.nodes){
+            count += node.getFields().size;
+        }
+
+        return count;
+    }, this)
+
     static fromJson(data: any, errorsWarnings: Errors.ErrorsWarnings) : GraphConfig {
         const result: GraphConfig = new GraphConfig();
 

templates/translation_menu.html

@@ -248,4 +248,18 @@ <h5>
             <button type="button" id="setTranslatorUrlBtn" class="btn btn-primary btn-block btn_wide" data-bind="click: setTranslatorUrl">Set Translator URL</button>
         </div>
     </div>
+    <div class="row">
+        <!-- ko if: graphConfig() === null -->
+        <div class="alert alert-light noselect" role="alert">
+            <span>No Graph Config Loaded</span>
+        </div>
+        <!-- /ko -->
+        <!-- ko if: graphConfig() !== null -->
+        <div class="alert alert-light noselect" role="alert">
+            <span>Graph Config contains</span>
+            <span data-bind="text: graphConfig().numFields()"></span>
+            <span>fields.</span>
+        </div>
+        <!-- /ko -->
+    </div>
 </div>

tsconfig.json

@@ -15,7 +15,7 @@
         "strictPropertyInitialization": false,
         "module": "umd",
         "moduleResolution": "node",
-        "target": "es5",
+        "target": "es2015",
         "lib": ["es2021", "dom"],
         "allowJs": false,
         "types": ["jquery", "bootstrap", "bootstrap-notify"]