feat(Output Node): Add selection from device + Add display in select card + Add styling in view

Author: bamdadfr

src/app/devices/selector.device.ts

@@ -204,12 +204,6 @@ selectorDevice.setNeuronLight = function(options: SetNeuronOptions): void {
   const isSelected = options.isSelected || null;
   const isDisabled = options.isDisabled || null;
 
-  const {
-    neuronIndex,
-    layerIndex,
-  } = networkState.getNeuronAndLayerIndexes(index);
-  const note = this.grid[layerIndex][neuronIndex - 1];
-
   let color;
   if (isSelected) {
     color = this.settings.colorByState.neuronSelected;
@@ -221,6 +215,21 @@ selectorDevice.setNeuronLight = function(options: SetNeuronOptions): void {
     color = this.settings.colorByState.neuronOn;
   }
 
+  const {
+    neuronIndex,
+    layerIndex,
+  } = networkState.getNeuronAndLayerIndexes(index);
+
+  if (networkState.isOutputNode(options.index)) {
+    this.playNote({
+      note: this.settings.functionKeys.lastColumn[0],
+      color,
+    });
+    return;
+  }
+
+  const note = this.grid[layerIndex][neuronIndex - 1];
+
   this.playNote({
     note,
     color,
@@ -288,6 +297,7 @@ selectorDevice.getGridFlatIndex = function(note: number): number {
  */
 selectorDevice.attachNavigation = function(): void {
   this.attachPlayPauseButton();
+  this.attachOutputButton();
 };
 
 selectorDevice.attachPlayPauseButton = function() {
@@ -324,6 +334,27 @@ selectorDevice.attachPlayPauseButton = function() {
   });
 };
 
+selectorDevice.attachOutputButton = function() {
+  const note = this.settings.functionKeys.lastColumn[0];
+  const color = this.settings.colorByState.neuronOn;
+  const outputNode = networkState.getOutputNode();
+  const id = parseInt(outputNode.id);
+  const callback = () => {
+    if (playgroundFacade.selectedNodes.indexOf(id) === -1) {
+      networkUi.toggleNodeSelection(id, true);
+    }
+    else {
+      networkUi.toggleNodeSelection(id, false);
+    }
+  };
+
+  this.addNoteListener_NEW({
+    note,
+    color,
+    callback,
+  });
+};
+
 /**
  * Attach layer buttons
  */

src/app/state/network.state.ts

@@ -444,3 +444,11 @@ networkState.setLayer = function(index: number) {
 networkState.resetLayerSelection = function() {
   this.selectedLayerIndex = null;
 };
+
+networkState.getOutputNode = function() {
+  return this.nodes[this.nodes.length - 1][0];
+};
+
+networkState.isOutputNode = function(index) {
+  return index === parseInt(networkState.nodes[networkState.nodes.length - 1][0].id);
+};

src/app/ui/network.ui.ts

@@ -71,9 +71,21 @@ networkUi.toggleNodeSelection = function(nodeIndex: number, isSelected: boolean)
     playgroundFacade.unselectNode(nodeIndex);
   }
 
-  // class
-  const canvas = d3.select(`#canvas-${nodeIndex}`);
-  canvas.classed('selected', isSelected);
+  // styling
+  if (networkState.isOutputNode(nodeIndex)) {
+    const canvas = document.querySelector('#heatmap').children[0].children[0] as HTMLCanvasElement;
+
+    if (isSelected) {
+      canvas.style.border = '2px solid cyan';
+    }
+    else {
+      canvas.style.border = null;
+    }
+  }
+  else {
+    const canvas = d3.select(`#canvas-${nodeIndex}`);
+    canvas.classed('selected', isSelected);
+  }
 
   selectCardUi.updateCard();
 

src/app/ui/select-card.ui.ts

@@ -97,7 +97,14 @@ selectCardUi.updateCard = function() {
   this.rows.forEach((row, index) => {
     // single selection
     if (selectedNodes.length === 1) {
-      const link = networkState.getNeuron(selectedNodes[0]).neuron.inputLinks[index];
+      let link;
+
+      if (networkState.isOutputNode(selectedNodes[0])) {
+        link = networkState.getOutputNode().inputLinks[index];
+      }
+      else {
+        link = networkState.getNeuron(selectedNodes[0]).neuron.inputLinks[index];
+      }
 
       if (typeof link === 'undefined') {
         this.updateSourceWeight(index);