input layer basics implemented

index.html

@@ -162,14 +162,13 @@
     <div class="control-container">
       <div id="toggle-dataset-container">
         <img
-          class="active"
           id="toggle-dataset-btn"
           src="media/arrow.svg"
           onclick="toggleDatasetsContainer()"
           alt=""
         />
       </div>
-      <div id="datasets-container">
+      <div id="datasets-container" class="active">
         <div>Datasets</div>
         <div id="dataset-scrollable"></div>
         <button onclick="openCreateDataset()" class="btn btn-sky">
@@ -219,6 +218,9 @@
     <script src="js/Draw/Layer/LayerView.js"></script>
     <script src="js/Draw/Layer/HiddenLayer.js"></script>
 
+    <script src="js/Draw/InputView.js"></script>
+    <script src="js/Draw/OutputView.js"></script>
+
     <script src="js/Draw/NeuronView.js"></script>
 
     <script src="js/Draw/MLPView.js"></script>

js/Draw/InputView.js

@@ -0,0 +1,89 @@
+class InputView extends LayerView {
+  constructor(name, data, parent) {
+    const { x, y } = iManager.getAbsoluteCoordinates(300, 300);
+    super(x, y, 300, 300, parent);
+    this.name = name;
+    this.data = data;
+    console.log(data);
+    this.reInitializeNeurons();
+  }
+
+  initializeDots() {
+    this.outputDot = new Dot(this);
+  }
+
+  reInitializeNeurons() {
+    const varNum = this.data[0].length;
+    for (let i = 0; i < varNum; i++) {
+      const neuron = new DrawNeuron();
+      this.neurons.push(neuron);
+    }
+    this.updateNeuronsCoordinates();
+  }
+
+  updateNeuronsCoordinates() {
+    this.neurons.forEach((n, i) => {
+      n.updateCoordinates(this.x + this.w - 25, this.y + 30 + i * 50);
+    });
+    this.updateBorders();
+  }
+
+  updateBorders() {
+    this.h = this.neurons[this.neurons.length - 1].y - this.y + 30;
+    this.outputDot.updateCoordinates();
+  }
+
+  pressed() {
+    iManager.checkRollout(this);
+    this.outputDot.handlePressed();
+  }
+
+  setCoordinates(x, y) {
+    this.x = x;
+    this.y = y;
+    this.postUpdateCoordinates();
+  }
+
+  createColCommand(text, x, y) {
+    return {
+      func: "text",
+      args: [text, this.x + 25 + x, this.y + 25 + y, this.w, this.h],
+    };
+  }
+
+  doubleClicked() {}
+
+  dataCommands() {
+    let commands = [];
+    this.data.forEach((row, i) => {
+      row.forEach((val, j) => {
+        const a = this.createColCommand(val, i * 50, j * 50);
+        commands.push(a);
+      });
+    });
+    return commands;
+  }
+
+  outerCommands() {
+    const commands = [
+      { func: "rect", args: [this.x, this.y, this.w, this.h, 10, 10] },
+      {
+        func: "text",
+        args: [this.name + " Input", this.x + 5, this.y - 20, this.w, this.h],
+      },
+      {
+        func: "line",
+        args: [this.x + 50, this.y + 15, this.x + 50, this.y + this.h - 15],
+      },
+    ];
+    return commands;
+  }
+
+  draw() {
+    this.outputDot.draw();
+    const commands = [...this.outerCommands(), ...this.dataCommands()];
+    executeDrawingCommands(commands);
+
+    this.neurons.forEach((n) => n.draw());
+  }
+}

js/Draw/Layer/HiddenLayer.js

@@ -1,11 +1,8 @@
 class HiddenLayer extends LayerView {
   constructor(x, y, parent) {
     super(x, y, 50, 0, parent);
-    this.neurons = [];
     this.yGap = 40;
     this.infoBox = { h: 70, y: 0, val: 0 };
-    this.shrank = false;
-    this.shownNeurons = { num: 0, indexes: [] };
     this.initializeNeurons();
     !this.isCopy() && this.initializeButton();
   }
@@ -27,13 +24,6 @@ class HiddenLayer extends LayerView {
     this.setShownNeuronsNum(this.getNeuronNum());
   }
 
-  postUpdateCoordinates() {
-    this.updateButtonCoordinates();
-    this.updateNeuronsCoordinates();
-    this.updateDotsCoordinates();
-    this.parent?.updateBorders();
-  }
-
   isShrank() {
     return this.shrank || this.isCopy();
   }
@@ -42,51 +32,6 @@ class HiddenLayer extends LayerView {
     return !this.parent;
   }
 
-  pushNeuron() {
-    this.neurons.push(new DrawNeuron());
-  }
-
-  popNeuron() {
-    this.neurons.pop();
-  }
-
-  getNeuronNum() {
-    return this.neurons.length;
-  }
-
-  getShownNeuronsNum() {
-    return this.shownNeurons.num;
-  }
-
-  setShownNeuronsNum(shownNeuronsNum) {
-    this.shownNeurons.num = this.isShrank()
-      ? shownNeuronsNum
-      : this.getNeuronNum();
-    this.setShownNeurons();
-    editLayerOrganizer.isEnabled && editLayerOrganizer.setInfoText();
-  }
-
-  // GIANT MESS -> LESS GIANT MESS -> Acceptable mess
-  setShownNeurons() {
-    this.shownNeurons.indexes = [];
-    const shownNeuronsNum = this.getShownNeuronsNum();
-    const neuronsNum = this.getNeuronNum();
-    this.infoBox.val = neuronsNum - shownNeuronsNum;
-    const mid =
-      (this.parent ? shownNeuronsNum : Math.min(shownNeuronsNum, 5)) / 2;
-
-    this.neurons.forEach((neuron, i) => {
-      if (i < mid || i >= neuronsNum - mid) {
-        neuron.visible();
-        this.shownNeurons.indexes.push(i);
-      } else {
-        neuron.hide();
-      }
-    });
-
-    this.updateNeuronsCoordinates();
-  }
-
   updateNeuronsCoordinates() {
     const isShrank = this.isShrank();
     const neurons = this.shownNeurons.indexes.map((i) => this.neurons[i]);
@@ -143,6 +88,7 @@ class HiddenLayer extends LayerView {
       this.getDots().forEach((dot) => dot?.draw());
       this.removeButton?.draw();
     }
+
     this.show();
     this.isShrank() && this.showInfoBox();
 

js/Draw/Layer/LayerView.js

@@ -2,11 +2,15 @@ class LayerView extends Draggable {
   constructor(x, y, w, h, parent) {
     super(x, y, w, h);
     this.parent = parent;
+    this.neurons = [];
     this.inputDot = null;
     this.outputDot = null;
     this.label = "";
     this.removeButton;
     this.editMode = true;
+    this.shrank = false;
+    this.shownNeurons = { num: 0, indexes: [] };
+
     this.initializeDots();
   }
 
@@ -38,6 +42,12 @@ class LayerView extends Draggable {
     return [this.inputDot, this.outputDot];
   }
 
+  postUpdateCoordinates() {
+    this.updateButtonCoordinates();
+    this.updateNeuronsCoordinates();
+    this.parent?.updateBorders();
+  }
+
   setCoordinates(x, y) {
     this.x = x;
     this.y = y;
@@ -48,14 +58,67 @@ class LayerView extends Draggable {
     this.label = label;
   }
 
+  setParent(parent) {
+    this.parent = parent;
+  }
+
   isEditModeOpen() {
     return this.editMode;
   }
 
+  isShrank() {
+    return this.shrank;
+  }
+
   toggleEditMode() {
     this.editMode = !this.editMode;
   }
 
+  pushNeuron() {
+    this.neurons.push(new DrawNeuron());
+  }
+
+  popNeuron() {
+    this.neurons.pop();
+  }
+
+  getNeuronNum() {
+    return this.neurons.length;
+  }
+
+  getShownNeuronsNum() {
+    return this.shownNeurons.num;
+  }
+
+  setShownNeuronsNum(shownNeuronsNum) {
+    this.shownNeurons.num = this.isShrank()
+      ? shownNeuronsNum
+      : this.getNeuronNum();
+    this.setShownNeurons();
+    editLayerOrganizer.isEnabled && editLayerOrganizer.setInfoText();
+  }
+
+  // GIANT MESS -> LESS GIANT MESS -> Acceptable mess
+  setShownNeurons() {
+    this.shownNeurons.indexes = [];
+    const shownNeuronsNum = this.getShownNeuronsNum();
+    const neuronsNum = this.getNeuronNum();
+    this.infoBox.val = neuronsNum - shownNeuronsNum;
+    const mid =
+      (this.parent ? shownNeuronsNum : Math.min(shownNeuronsNum, 5)) / 2;
+
+    this.neurons.forEach((neuron, i) => {
+      if (i < mid || i >= neuronsNum - mid) {
+        neuron.visible();
+        this.shownNeurons.indexes.push(i);
+      } else {
+        neuron.hide();
+      }
+    });
+
+    this.updateNeuronsCoordinates();
+  }
+
   isIsolated() {
     return this.parent.layers.length == 1;
   }
@@ -84,12 +147,12 @@ class LayerView extends Draggable {
     const [x, y] = [newLayers[0].x, newLayers[0].y];
 
     // FIXME: Don't destroy and recreate, just move -> Done but not satisfying
-    const newSchema = new Schema(x, y);
+    const newMlpView = new MlpView(x, y);
 
-    newSchema.setLayers(newLayers);
-    newSchema.updateBorders();
+    newMlpView.setLayers(newLayers);
+    newMlpView.updateBorders();
     parent.updateBorders();
-    mainOrganizer.addSchema(newSchema);
+    mainOrganizer.addMlpView(newMlpView);
   }
 
   reconnectNeurons() {