From 09848be928571dbd91af12a2d3c38eb5f7eae636 Mon Sep 17 00:00:00 2001
From: saliherdemk <saliherdem_kaymak@hotmail.com>
Date: Tue, 13 Aug 2024 16:48:10 +0000
Subject: [PATCH] What changed? oh, everything

---
 index.html                                  |  15 ++-
 js/Draw/InputView.js                        |  89 ---------------
 js/Draw/Layer/BaseLayers/IOLayer.js         |  64 +++++++++++
 js/Draw/Layer/{ => BaseLayers}/LayerView.js |  28 ++++-
 js/Draw/Layer/HiddenLayer.js                |   2 +-
 js/Draw/Layer/InputLayer.js                 |  37 +++++++
 js/Draw/Layer/OutputLayer.js                |  40 +++++++
 js/Draw/MLPView.js                          | 116 +++++++++++++++++---
 js/Draw/Minors/Buttons/CanvasButton.js      |  46 ++++++++
 js/Draw/Minors/Buttons/ImageButton.js       |  26 +++++
 js/Draw/Minors/Buttons/TextButton.js        |  62 +++++++++++
 js/Draw/Minors/CanvasButton.js              |  44 --------
 js/Draw/Minors/Dot.js                       |   6 +-
 js/Draw/Minors/Line.js                      |  63 ++++++++++-
 js/Draw/NeuronView.js                       |  12 +-
 js/Draw/OutputView.js                       |  31 ------
 js/MLP/Layer.js                             |   4 +
 js/MLP/MLP.js                               |  25 ++++-
 js/MLP/Neuron.js                            |   5 +
 js/Managers/canvasManager.js                |  28 +++++
 js/Organizers/datasetOrganizer.js           |  16 +--
 js/Organizers/editMlpOrganizer.js           |  19 ----
 js/Organizers/mainOrganizer.js              |   3 +
 js/Organizers/tableOrganizer.js             |  10 +-
 js/canvas.js                                |   5 -
 js/draggable.js                             |   5 +-
 js/script.js                                |   3 +-
 media/goOnce.png                            | Bin 0 -> 2368 bytes
 media/pause.png                             | Bin 0 -> 1363 bytes
 media/play.png                              | Bin 0 -> 2361 bytes
 style.css                                   |   1 +
 31 files changed, 566 insertions(+), 239 deletions(-)
 delete mode 100644 js/Draw/InputView.js
 create mode 100644 js/Draw/Layer/BaseLayers/IOLayer.js
 rename js/Draw/Layer/{ => BaseLayers}/LayerView.js (85%)
 create mode 100644 js/Draw/Layer/InputLayer.js
 create mode 100644 js/Draw/Layer/OutputLayer.js
 create mode 100644 js/Draw/Minors/Buttons/CanvasButton.js
 create mode 100644 js/Draw/Minors/Buttons/ImageButton.js
 create mode 100644 js/Draw/Minors/Buttons/TextButton.js
 delete mode 100644 js/Draw/Minors/CanvasButton.js
 delete mode 100644 js/Draw/OutputView.js
 create mode 100644 media/goOnce.png
 create mode 100644 media/pause.png
 create mode 100644 media/play.png

diff --git a/index.html b/index.html
index 802bcc8..c91bf59 100644
--- a/index.html
+++ b/index.html
@@ -40,9 +40,6 @@
       <button id="mlp-reset-btn" class="btn btn-yellow" type="button">
         Reset Coordinates
       </button>
-      <button id="toggle-layers-locks" class="btn btn-blue" type="button">
-        Lock Layers
-      </button>
 
       <button id="mlp-delete-btn" class="btn btn-rose" type="button">
         Delete
@@ -211,15 +208,17 @@
 
     <script src="js/draggable.js"></script>
 
-    <script src="js/Draw/Minors/CanvasButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/CanvasButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/ImageButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/TextButton.js"></script>
     <script src="js/Draw/Minors/Dot.js"></script>
     <script src="js/Draw/Minors/Line.js"></script>
 
-    <script src="js/Draw/Layer/LayerView.js"></script>
+    <script src="js/Draw/Layer/BaseLayers/LayerView.js"></script>
+    <script src="js/Draw/Layer/BaseLayers/IOLayer.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/Layer/InputLayer.js"></script>
+    <script src="js/Draw/Layer/OutputLayer.js"></script>
 
     <script src="js/Draw/NeuronView.js"></script>
 
diff --git a/js/Draw/InputView.js b/js/Draw/InputView.js
deleted file mode 100644
index 36d2434..0000000
--- a/js/Draw/InputView.js
+++ /dev/null
@@ -1,89 +0,0 @@
-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());
-  }
-}
diff --git a/js/Draw/Layer/BaseLayers/IOLayer.js b/js/Draw/Layer/BaseLayers/IOLayer.js
new file mode 100644
index 0000000..2c69090
--- /dev/null
+++ b/js/Draw/Layer/BaseLayers/IOLayer.js
@@ -0,0 +1,64 @@
+class IOLayer extends LayerView {
+  constructor(name, data, _x, _y) {
+    const { x, y } = iManager.getAbsoluteCoordinates(_x, _y);
+    super(x, y, 300, 300);
+    this.name = name;
+    this.data = data;
+  }
+
+  isInput() {
+    return this.outputDot !== null;
+  }
+
+  getDot() {
+    return this.inputDot ?? this.outputDot;
+  }
+
+  updateNeuronsCoordinates() {
+    this.neurons.forEach((n, i) => {
+      const x = this.x - 25 + (this.isInput() ? this.w : 50);
+      n.updateCoordinates(x, this.y + 30 + i * 50);
+    });
+    this.updateBorders();
+  }
+
+  updateBorders() {
+    this.h = this.neurons[this.neurons.length - 1].y - this.y + 30;
+    this.getDot().updateCoordinates();
+  }
+
+  reInitializeNeurons() {
+    const varNum = this.data[0].length;
+    for (let i = 0; i < varNum; i++) {
+      const neuron = new NeuronView();
+      this.neurons.push(neuron);
+    }
+    this.updateNeuronsCoordinates();
+  }
+
+  pressed() {
+    iManager.checkRollout(this);
+    this.getDot().handlePressed();
+  }
+
+  setCoordinates(x, y) {
+    super.setCoordinates(x, y);
+  }
+
+  createColCommand(text, x, y) {
+    return {
+      func: "text",
+      args: [text, this.x + 25 + x, this.y + 25 + y, this.w, this.h],
+    };
+  }
+
+  doubleClicked() {}
+
+  draw() {
+    this.isEditModeOpen() && this.getDot().draw();
+    const commands = [...this.outerCommands(), ...this.dataCommands()];
+    executeDrawingCommands(commands);
+
+    this.neurons.forEach((n) => n.draw());
+  }
+}
diff --git a/js/Draw/Layer/LayerView.js b/js/Draw/Layer/BaseLayers/LayerView.js
similarity index 85%
rename from js/Draw/Layer/LayerView.js
rename to js/Draw/Layer/BaseLayers/LayerView.js
index a47fe93..8afb768 100644
--- a/js/Draw/Layer/LayerView.js
+++ b/js/Draw/Layer/BaseLayers/LayerView.js
@@ -2,6 +2,7 @@ class LayerView extends Draggable {
   constructor(x, y, w, h, parent) {
     super(x, y, w, h);
     this.parent = parent;
+    this.origin = null;
     this.neurons = [];
     this.inputDot = null;
     this.outputDot = null;
@@ -17,7 +18,7 @@ class LayerView extends Draggable {
   initializeDots() {}
 
   initializeButton() {
-    this.removeButton = new CanvasButton("delete", () => this.handleRemove());
+    this.removeButton = new ImageButton("delete", () => this.handleRemove());
     this.updateButtonCoordinates();
   }
 
@@ -48,9 +49,25 @@ class LayerView extends Draggable {
     this.parent?.updateBorders();
   }
 
+  clearOrigin() {
+    this.neurons.forEach((n) => n.clearOrigin());
+    this.origin = null;
+  }
+
+  setOrigin(obj) {
+    // Thanks to MLP class, we can't get rid of this mess. There is no input layer in original MLP class and all weights belongs to target neurons. Too much work to change. Maybe later.
+    const { prev } = this.parent.getPrevAndNext(this);
+    for (let i = 0; i < this.neurons.length; i++) {
+      for (let j = 0; j < prev.neurons.length; j++) {
+        this.neurons[i].setOrigin(obj.neurons[i]);
+        prev.neurons[j].lines[i].setOrigin(obj.neurons[i].w[j]);
+      }
+    }
+    this.origin = obj;
+  }
+
   setCoordinates(x, y) {
-    this.x = x;
-    this.y = y;
+    super.setCoordinates(x, y);
     this.postUpdateCoordinates();
   }
 
@@ -75,7 +92,7 @@ class LayerView extends Draggable {
   }
 
   pushNeuron() {
-    this.neurons.push(new DrawNeuron());
+    this.neurons.push(new NeuronView());
   }
 
   popNeuron() {
@@ -152,6 +169,7 @@ class LayerView extends Draggable {
     newMlpView.setLayers(newLayers);
     newMlpView.updateBorders();
     parent.updateBorders();
+    parent.checkMlpCompleted();
     mainOrganizer.addMlpView(newMlpView);
   }
 
@@ -168,7 +186,7 @@ class LayerView extends Draggable {
 
   connectNeurons(targetLayer) {
     this.neurons.forEach((n1) => {
-      n1.setLines([]);
+      n1.removeLines();
       targetLayer.neurons.forEach((n2) => {
         n1.addLine(new Line(n1, n2));
       });
diff --git a/js/Draw/Layer/HiddenLayer.js b/js/Draw/Layer/HiddenLayer.js
index 5f24b60..9ed177f 100644
--- a/js/Draw/Layer/HiddenLayer.js
+++ b/js/Draw/Layer/HiddenLayer.js
@@ -18,7 +18,7 @@ class HiddenLayer extends LayerView {
   initializeNeurons() {
     const numOfNeurons = parseInt(Math.random() * 7) + 1;
     for (let i = 0; i < numOfNeurons; i++) {
-      this.neurons.push(new DrawNeuron());
+      this.neurons.push(new NeuronView());
     }
 
     this.setShownNeuronsNum(this.getNeuronNum());
diff --git a/js/Draw/Layer/InputLayer.js b/js/Draw/Layer/InputLayer.js
new file mode 100644
index 0000000..16ba07e
--- /dev/null
+++ b/js/Draw/Layer/InputLayer.js
@@ -0,0 +1,37 @@
+class InputLayer extends IOLayer {
+  constructor(name, data) {
+    super(name, data, 300, 300, true);
+    this.initializeDot();
+    this.reInitializeNeurons();
+  }
+
+  initializeDot() {
+    this.outputDot = new Dot(this, true);
+  }
+
+  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;
+  }
+}
diff --git a/js/Draw/Layer/OutputLayer.js b/js/Draw/Layer/OutputLayer.js
new file mode 100644
index 0000000..460960c
--- /dev/null
+++ b/js/Draw/Layer/OutputLayer.js
@@ -0,0 +1,40 @@
+class OutputLayer extends IOLayer {
+  constructor(name, data) {
+    super(name, data, 800, 300, false);
+    this.initializeDot();
+    this.reInitializeNeurons();
+  }
+
+  initializeDot() {
+    this.inputDot = new Dot(this);
+  }
+
+  dataCommands() {
+    let commands = [];
+    this.data.forEach((val, i) => {
+      const a = this.createColCommand(val, (i + 1) * 50, 0);
+      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 + " Output", this.x + 5, this.y - 20, this.w, this.h],
+      },
+      {
+        func: "line",
+        args: [
+          this.x + this.w - 50,
+          this.y + 15,
+          this.x + this.w - 50,
+          this.y + this.h - 15,
+        ],
+      },
+    ];
+    return commands;
+  }
+}
diff --git a/js/Draw/MLPView.js b/js/Draw/MLPView.js
index 7ae142a..99c3d00 100644
--- a/js/Draw/MLPView.js
+++ b/js/Draw/MLPView.js
@@ -3,21 +3,86 @@ class MlpView extends Draggable {
     super(x, y);
     this.layers = [];
     this.label = "MLP1";
+    this.origin = null;
     this.lr = 0.1;
     this.batchSize = 1;
     this.propsShown = true;
     this.selected = false;
-    this.layersLocked = false; // maybe we can get rid of this
+    this.initialized = false;
+    this.buttons = [];
+    this.initializeButtons();
     this.initializeLayers(initialLayer);
     this.updateBorders();
   }
 
+  getToggleMlpButton() {
+    return this.buttons[0];
+  }
+
+  isInitialized() {
+    return this.initialized;
+  }
+
+  createToggleMlpButton() {
+    const btn = new TextButton("Initialize MLP", () => {
+      this.toggleMlp();
+    });
+    btn.setDimensions(100, 25).disable();
+    return btn;
+  }
+
+  initializeButtons() {
+    this.buttons.push(this.createToggleMlpButton());
+  }
+
   initializeLayers(initialLayer) {
     const layer = initialLayer ?? new HiddenLayer(this.x, this.y, this);
     layer.setParent(this);
     this.layers.push(layer);
   }
 
+  toggleMlp() {
+    if (this.initialized) {
+      this.destroyMlp();
+      this.updateToggleMlpButton("Initialize MLP", "blue");
+    } else {
+      this.createMlp();
+      this.updateToggleMlpButton("Terminate MLP", "red");
+    }
+    this.toggleLockLayers();
+  }
+
+  updateToggleMlpButton(text, theme) {
+    this.getToggleMlpButton().setText(text).setTheme(theme);
+  }
+
+  createMlp() {
+    const layers = this.layers;
+    const mlp = new MLP([], this.lr, this.batchSize);
+    for (let i = 1; i < layers.length; i++) {
+      const layer = layers[i];
+      const layerOrigin = new Layer(
+        layers[i - 1].neurons.length,
+        layer.neurons.length,
+      );
+      layer.setOrigin(layerOrigin);
+      mlp.addLayer(layerOrigin);
+    }
+    this.setOrigin(mlp);
+    this.initialized = true;
+  }
+
+  clearOrigin() {
+    this.layers.forEach((l) => l.clearOrigin());
+    this.origin = null;
+  }
+
+  destroyMlp() {
+    this.origin.destroy();
+    this.clearOrigin();
+    this.initialized = false;
+  }
+
   select() {
     this.selected = true;
   }
@@ -32,8 +97,16 @@ class MlpView extends Draggable {
 
   setCoordinates(x, y) {
     this.updateLayersCoordinates(x, y);
-    this.x = x;
-    this.y = y;
+    super.setCoordinates(x, y);
+    this.updateButtonsCoordinates();
+  }
+
+  updateButtonsCoordinates() {
+    const buttons = this.buttons;
+    buttons[0].setCoordinates(
+      this.x + this.w - this.buttons[0].w,
+      this.y + this.h + 5,
+    );
   }
 
   setLabel(label) {
@@ -57,21 +130,24 @@ class MlpView extends Draggable {
     return this.propsShown;
   }
 
+  isCompleted() {
+    const layers = this.layers;
+    return (
+      layers[0] instanceof InputLayer &&
+      layers[layers.length - 1] instanceof OutputLayer
+    );
+  }
+
   togglePropsShown() {
     this.propsShown = !this.propsShown;
   }
 
-  toggleLayersLocks() {
-    this.layersLocked = !this.layersLocked;
+  toggleLockLayers() {
     this.layers.forEach((layer) => {
-      this.layersLocked == layer.isEditModeOpen() && layer.toggleEditMode();
+      this.initialized == layer.isEditModeOpen() && layer.toggleEditMode();
     });
   }
 
-  areLayersLocked() {
-    return this.layersLocked;
-  }
-
   updateLayersCoordinates(newX, newY) {
     const prevX = this.x;
     const prevY = this.y;
@@ -97,11 +173,21 @@ class MlpView extends Draggable {
     });
   }
 
+  checkMlpCompleted() {
+    const initializeButton = this.buttons[0];
+    this.isCompleted() ? initializeButton.enable() : initializeButton.disable();
+  }
+
+  setOrigin(obj) {
+    this.origin = obj;
+  }
+
   moveLayers(targetMlpView) {
     this.getLayers().forEach((layer) => {
       targetMlpView.pushLayer(layer);
     });
     targetMlpView.updateBorders();
+    targetMlpView.checkMlpCompleted();
     this.setLayers([]);
     this.destroy();
   }
@@ -140,17 +226,18 @@ class MlpView extends Draggable {
     this.x = firstX - 25;
     this.y = firstY - 35;
     this.h = lastY - firstY + 75;
+    this.updateButtonsCoordinates();
   }
 
   pressed() {
-    if (iManager.checkRollout(this) && getMouseButton() == "right") {
-      this.toggleLayersLocks();
-    }
+    iManager.checkRollout(this);
   }
 
   handlePressed() {
     this.getLayers().forEach((layer) => layer.pressed());
     if (iManager.isBusy()) return;
+
+    this.buttons.forEach((btn) => btn.handlePressed());
     this.pressed();
   }
 
@@ -162,7 +249,7 @@ class MlpView extends Draggable {
 
     layers.forEach((layer, index) => {
       const y = originLayer.y - (layer.h - originLayer.h) / 2;
-      const x = lastX + (index != 0) * layer.w * 2;
+      const x = lastX + (index != 0) * 50;
       lastX = x + layer.w;
       layer.setCoordinates(x, y);
       layer.parent.updateBorders();
@@ -227,5 +314,6 @@ class MlpView extends Draggable {
     this.show();
     this.isPropsShown() && this.showProps();
     this.getLayers().forEach((layer) => layer.draw());
+    this.buttons.forEach((btn) => btn.draw());
   }
 }
diff --git a/js/Draw/Minors/Buttons/CanvasButton.js b/js/Draw/Minors/Buttons/CanvasButton.js
new file mode 100644
index 0000000..0f36b18
--- /dev/null
+++ b/js/Draw/Minors/Buttons/CanvasButton.js
@@ -0,0 +1,46 @@
+class CanvasButton {
+  constructor(onClick) {
+    this.x = 0;
+    this.y = 0;
+    this.w = 25;
+    this.h = 25;
+    this.onClick = onClick;
+    this.disabled = false;
+  }
+
+  disable() {
+    this.disabled = true;
+  }
+
+  enable() {
+    this.disabled = false;
+  }
+
+  isDisabled() {
+    return this.disabled;
+  }
+
+  isRollout() {
+    return iManager.isHovered(this);
+  }
+
+  setDimensions(w, h) {
+    this.w = w;
+    this.h = h;
+    return this;
+  }
+
+  destroy() {
+    this.onClick = null;
+    this.img = null;
+  }
+
+  setCoordinates(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  handlePressed() {
+    this.isRollout() && !this.isDisabled() && this.onClick();
+  }
+}
diff --git a/js/Draw/Minors/Buttons/ImageButton.js b/js/Draw/Minors/Buttons/ImageButton.js
new file mode 100644
index 0000000..ddaf40b
--- /dev/null
+++ b/js/Draw/Minors/Buttons/ImageButton.js
@@ -0,0 +1,26 @@
+class ImageButton extends CanvasButton {
+  constructor(imageKey, onClick) {
+    super(onClick);
+    this.img = null;
+    this.changeImg(imageKey);
+  }
+
+  changeImg(imgKey) {
+    this.img = imgKey == null ? null : mainOrganizer.getImageByKey(imgKey);
+  }
+
+  show() {
+    const commands = [
+      {
+        func: "image",
+        args: [this.img, this.x, this.y, this.w, this.h],
+      },
+    ];
+
+    executeDrawingCommands(commands);
+  }
+
+  draw() {
+    this.show();
+  }
+}
diff --git a/js/Draw/Minors/Buttons/TextButton.js b/js/Draw/Minors/Buttons/TextButton.js
new file mode 100644
index 0000000..ded2830
--- /dev/null
+++ b/js/Draw/Minors/Buttons/TextButton.js
@@ -0,0 +1,62 @@
+class TextButton extends CanvasButton {
+  constructor(text, onClick) {
+    super(onClick);
+    this.text = text;
+    this.padding = 5;
+    this.theme = "blue";
+  }
+
+  setTheme(theme) {
+    this.theme = theme;
+    return this;
+  }
+
+  getTheme() {
+    const alpha = this.isDisabled() ? 125 : 255;
+    let defaultColor;
+    let activeColor;
+    if (this.theme == "blue") {
+      defaultColor = [0, 86, 179, alpha];
+      activeColor = [0, 123, 255, alpha];
+    } else if (this.theme == "red") {
+      defaultColor = [244, 63, 94, alpha];
+      activeColor = [199, 44, 72, alpha];
+    }
+
+    return { defaultColor, activeColor };
+  }
+
+  setText(text) {
+    this.text = text;
+    return this;
+  }
+
+  show() {
+    const x = this.x;
+    const y = this.y;
+    const w = this.w;
+    const h = this.h;
+
+    const { defaultColor, activeColor } = this.getTheme();
+
+    const color = this.isRollout() ? defaultColor : activeColor;
+
+    const commands = [
+      { func: "fill", args: color },
+      { func: "noStroke", args: [] },
+      { func: "rect", args: [x, y, w, h, 5] },
+      { func: "fill", args: [255, 255, 255] },
+      { func: "textAlign", args: [CENTER, CENTER] },
+      {
+        func: "text",
+        args: [this.text, x, y, w, h],
+      },
+    ];
+
+    executeDrawingCommands(commands);
+  }
+
+  draw() {
+    this.show();
+  }
+}
diff --git a/js/Draw/Minors/CanvasButton.js b/js/Draw/Minors/CanvasButton.js
deleted file mode 100644
index c32316a..0000000
--- a/js/Draw/Minors/CanvasButton.js
+++ /dev/null
@@ -1,44 +0,0 @@
-class CanvasButton {
-  constructor(imageKey, onClick) {
-    this.x = 0;
-    this.y = 0;
-    this.w = 25;
-    this.h = 25;
-    this.onClick = onClick;
-    this.img;
-    this.changeImg(imageKey);
-  }
-
-  destroy() {
-    this.onClick = null;
-    this.img = null;
-  }
-
-  changeImg(imgKey) {
-    this.img = mainOrganizer.getImageByKey(imgKey);
-  }
-
-  setCoordinates(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-
-  handlePressed() {
-    iManager.isHovered(this) && this.onClick();
-  }
-
-  show() {
-    const commands = [
-      {
-        func: "image",
-        args: [this.img, this.x, this.y, this.w, this.h],
-      },
-    ];
-
-    executeDrawingCommands(commands);
-  }
-
-  draw() {
-    this.show();
-  }
-}
diff --git a/js/Draw/Minors/Dot.js b/js/Draw/Minors/Dot.js
index 1ff4f89..24687ad 100644
--- a/js/Draw/Minors/Dot.js
+++ b/js/Draw/Minors/Dot.js
@@ -52,7 +52,6 @@ class Dot {
       ? [layer1, layer2]
       : [layer2, layer1];
 
-    console.log(majorLayer, minorLayer);
     majorLayer.connectLayer(minorLayer);
     mainOrganizer.setActiveLine(null);
   }
@@ -76,9 +75,12 @@ class Dot {
 
   show() {
     const r = this.r + (this.rollover ? 5 : 0);
+    const start = this.isInput() ? HALF_PI : PI + TWO_PI + HALF_PI;
+    const stop = this.isInput() ? HALF_PI + PI : HALF_PI;
+
     const commands = [
       { func: "fill", args: this.isOccupied() ? [0, 255, 0] : [255, 0, 0] },
-      { func: "circle", args: [this.x, this.y, r] },
+      { func: "arc", args: [this.x, this.y, r, r, start, stop] },
     ];
 
     executeDrawingCommands(commands);
diff --git a/js/Draw/Minors/Line.js b/js/Draw/Minors/Line.js
index 013fee3..800af2c 100644
--- a/js/Draw/Minors/Line.js
+++ b/js/Draw/Minors/Line.js
@@ -1,10 +1,29 @@
 class Line {
   constructor(from, to, temp = false) {
+    this.w = null;
     this.from = from;
     this.to = to;
     this.temp = temp;
   }
+
+  getSourceNeuron() {
+    return this.from;
+  }
+
+  clearOrigin() {
+    this.w = null;
+  }
+
+  setOrigin(w) {
+    this.w = w;
+  }
+
+  getWeight() {
+    return this.w?.data.toFixed(4).toString() ?? "";
+  }
+
   destroy() {
+    this.w = null;
     this.from = null;
     this.to = null;
   }
@@ -13,14 +32,54 @@ class Line {
     return this.temp;
   }
 
+  showProps() {
+    const x1 = this.from.x;
+    const x2 = this.to.x;
+    const y1 = this.from.y;
+    const y2 = this.to.y;
+    let angle = atan2(y2 - y1, x2 - x1);
+    const text = this.getWeight();
+    let totalTextWidth = 0;
+    for (let i = 0; i < text.length; i++) {
+      totalTextWidth += textWidth(text[i]);
+    }
+
+    let lineLength = dist(x1, y1, x2, y2);
+    let offsetX = (lineLength - totalTextWidth) / 2;
+
+    let x = x1 + cos(angle) * offsetX;
+    let y = y1 + sin(angle) * offsetX;
+
+    for (let i = 0; i < text.length; i++) {
+      const commands = [
+        {
+          func: "translate",
+          args: [x, y],
+        },
+        { func: "rotate", args: [angle] },
+        { func: "text", args: [text[i], 0, 0] },
+      ];
+      executeDrawingCommands(commands);
+
+      x += cos(angle) * textWidth(text[i]);
+      y += sin(angle) * textWidth(text[i]);
+    }
+  }
+
   show() {
     const { mouseX, mouseY } = getCurrentMouseCoordinates();
-    const { x, y } = this.isTemp()
+    const { x: targetX, y: targetY } = this.isTemp()
       ? iManager.getAbsoluteCoordinates(mouseX, mouseY)
       : { x: this.to.x, y: this.to.y };
+    const sourceX = this.from.x;
+    const sourceY = this.from.y;
+
+    const commands = [
+      { func: "line", args: [sourceX, sourceY, targetX, targetY] },
+    ];
 
-    const commands = [{ func: "line", args: [this.from.x, this.from.y, x, y] }];
     executeDrawingCommands(commands);
+    !this.isTemp() && this.showProps();
   }
 
   draw() {
diff --git a/js/Draw/NeuronView.js b/js/Draw/NeuronView.js
index 2965420..e21e642 100644
--- a/js/Draw/NeuronView.js
+++ b/js/Draw/NeuronView.js
@@ -1,9 +1,19 @@
-class DrawNeuron {
+class NeuronView {
   constructor() {
     this.x;
     this.y;
     this.hidden = false;
     this.lines = [];
+    this.origin = null;
+  }
+
+  clearOrigin() {
+    this.lines.forEach((l) => l.clearOrigin());
+    this.origin = null;
+  }
+
+  setOrigin(obj) {
+    this.origin = obj;
   }
 
   isHidden() {
diff --git a/js/Draw/OutputView.js b/js/Draw/OutputView.js
deleted file mode 100644
index 757d72c..0000000
--- a/js/Draw/OutputView.js
+++ /dev/null
@@ -1,31 +0,0 @@
-class OutputView extends Draggable {
-  constructor(name, data) {
-    const { x, y } = iManager.getAbsoluteCoordinates(800, 300);
-    super(x, y);
-    this.name = name;
-    this.w = 200;
-    this.h = 300;
-    this.data = data;
-  }
-  pressed() {
-    iManager.checkRollout(this);
-  }
-  handlePressed() {
-    this.pressed();
-  }
-
-  setCoordinates(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-  draw() {
-    const commands = [
-      { func: "rect", args: [this.x, this.y, this.w, this.h, 10, 10] },
-      {
-        func: "text",
-        args: [this.name + " Output", this.x + 5, this.y - 20, this.w, this.h],
-      },
-    ];
-    executeDrawingCommands(commands);
-  }
-}
diff --git a/js/MLP/Layer.js b/js/MLP/Layer.js
index 45d6151..b17174a 100644
--- a/js/MLP/Layer.js
+++ b/js/MLP/Layer.js
@@ -17,4 +17,8 @@ class Layer {
     this.act_func = act_func;
     this.neurons.forEach((neuron) => neuron.change_act_func(this.act_func));
   }
+
+  destroy() {
+    this.neurons.forEach((neuron) => neuron.destroy());
+  }
 }
diff --git a/js/MLP/MLP.js b/js/MLP/MLP.js
index 9284418..e761d1c 100644
--- a/js/MLP/MLP.js
+++ b/js/MLP/MLP.js
@@ -1,6 +1,12 @@
 class MLP {
-  constructor(layers = []) {
+  constructor(layers = [], lr = 0.1, batch_size = 1) {
     this.layers = layers;
+    this.lr = lr;
+    this.batch_size = batch_size;
+  }
+
+  addLayer(layer) {
+    this.layers.push(layer);
   }
 
   predict(x) {
@@ -19,7 +25,16 @@ class MLP {
     return this.layers.flatMap((layer) => layer.parameters());
   }
 
-  train(x_train, y_train, epochs, learning_rate = 0.01) {
+  goOneCycle(trainXData, trainYData) {
+    const loss = loss.add(
+      this.mse(this.predict(trainXData), new Value(trainYData)),
+    );
+    this.getParameters().forEach((p) => (p.grad = 0.0));
+    loss.backprop();
+    this.getParameters().forEach((p) => (p.data += -this.lr * p.grad));
+  }
+
+  train(x_train, y_train, epochs) {
     for (let i = 0; i < epochs; i++) {
       let loss = new Value(0);
       for (let i = 0; i < y_train.length; i++) {
@@ -29,7 +44,11 @@ class MLP {
       }
       this.getParameters().forEach((p) => (p.grad = 0.0));
       loss.backprop();
-      this.getParameters().forEach((p) => (p.data += -learning_rate * p.grad));
+      this.getParameters().forEach((p) => (p.data += -this.lr * p.grad));
     }
   }
+
+  destroy() {
+    this.layers.forEach((layer) => layer.destroy());
+  }
 }
diff --git a/js/MLP/Neuron.js b/js/MLP/Neuron.js
index 42688b1..28e0b66 100644
--- a/js/MLP/Neuron.js
+++ b/js/MLP/Neuron.js
@@ -25,4 +25,9 @@ class Neuron {
   change_act_func(act_func) {
     this.act_func = act_func;
   }
+
+  destroy() {
+    this.b = null;
+    this.w = [];
+  }
 }
diff --git a/js/Managers/canvasManager.js b/js/Managers/canvasManager.js
index 7b430a5..fdfbf95 100644
--- a/js/Managers/canvasManager.js
+++ b/js/Managers/canvasManager.js
@@ -1,5 +1,19 @@
 // Global variables
 let CENTER;
+let PI;
+let QUARTER_PI;
+let HALF_PI;
+let TWO_PI;
+let MOVE;
+let WAIT;
+let HAND;
+
+let atan2;
+let dist;
+let cos;
+let sin;
+let textWidth;
+let cursor;
 
 class CanvasManager {
   constructor(instance) {
@@ -13,5 +27,19 @@ class CanvasManager {
   setInstance(p) {
     this.p = p;
     CENTER = p.CENTER;
+    PI = p.PI;
+    QUARTER_PI = p.QUARTER_PI;
+    HALF_PI = p.HALF_PI;
+    TWO_PI = p.TWO_PI;
+    MOVE = p.MOVE;
+    WAIT = p.WAIT;
+    HAND = p.HAND;
+
+    atan2 = (y, x) => p.atan2(y, x);
+    dist = (x1, y1, x2, y2) => p.dist(x1, y1, x2, y2);
+    cos = (angle) => p.cos(angle);
+    sin = (angle) => p.sin(angle);
+    textWidth = (text) => p.textWidth(text);
+    cursor = (type) => p.cursor(type);
   }
 }
diff --git a/js/Organizers/datasetOrganizer.js b/js/Organizers/datasetOrganizer.js
index a6fdf69..7cafb70 100644
--- a/js/Organizers/datasetOrganizer.js
+++ b/js/Organizers/datasetOrganizer.js
@@ -10,13 +10,15 @@ class DatasetOrganizer {
     btn.setAttribute("id", id);
     btn.onclick = () => {
       const dataset = this.getDatasetById(id);
-      const newMlpView = new MlpView(
-        500,
-        500,
-        new InputView(name, dataset.trainX),
-      );
-      mainOrganizer.addMlpView(newMlpView);
-      mainOrganizer.addOutputView(new OutputView(name, dataset.trainY));
+      const trainX = structuredClone(dataset.trainX);
+      const trainY = structuredClone(dataset.trainY).reverse();
+      const inputLayer = new InputLayer(name, trainX);
+      const outputLayer = new OutputLayer(name, trainY);
+
+      const inputMlpView = new MlpView(0, 0, inputLayer);
+      mainOrganizer.addMlpView(inputMlpView);
+      const outputMlpView = new MlpView(0, 0, outputLayer);
+      mainOrganizer.addMlpView(outputMlpView);
     };
     btn.classList.add("btn", "btn-gray");
   }
diff --git a/js/Organizers/editMlpOrganizer.js b/js/Organizers/editMlpOrganizer.js
index 1078d28..72128b7 100644
--- a/js/Organizers/editMlpOrganizer.js
+++ b/js/Organizers/editMlpOrganizer.js
@@ -37,11 +37,6 @@ class EditMLPOrganizer extends EditOrganizer {
         event: "click",
         handler: this.handleResetCoordinates,
       },
-      {
-        id: "toggle-layers-locks",
-        event: "click",
-        handler: this.toggleLayersLocks,
-      },
       {
         id: "mlp-delete-btn",
         event: "click",
@@ -84,23 +79,10 @@ class EditMLPOrganizer extends EditOrganizer {
     });
   }
 
-  setLayersBtnText() {
-    setElementProperties("toggle-layers-locks", {
-      innerText: this.selected.areLayersLocked()
-        ? "Unlock Layers"
-        : "Lock Layers",
-    });
-  }
-
   handleResetCoordinates() {
     this.getSelected().resetCoordinates();
   }
 
-  toggleLayersLocks() {
-    this.selected.toggleLayersLocks();
-    this.setLayersBtnText();
-  }
-
   handleDelete() {
     this.selected.destroy();
   }
@@ -111,7 +93,6 @@ class EditMLPOrganizer extends EditOrganizer {
     setElementProperties("mlp-lr", { value: selected.lr });
     setElementProperties(`batch${selected.batchSize}`, { checked: true });
     this.setPropsBtnText();
-    this.setLayersBtnText();
   }
 
   setSelected(mlp) {
diff --git a/js/Organizers/mainOrganizer.js b/js/Organizers/mainOrganizer.js
index 8db7d7f..41e7e0f 100644
--- a/js/Organizers/mainOrganizer.js
+++ b/js/Organizers/mainOrganizer.js
@@ -31,6 +31,9 @@ class MainOrganizer {
       delete: p.loadImage("media/delete-icon.png"),
       lock: p.loadImage("media/lock.png"),
       lockOpen: p.loadImage("media/lock-open.png"),
+      goOnce: p.loadImage("media/goOnce.png"),
+      play: p.loadImage("media/play.png"),
+      pause: p.loadImage("media/pause.png"),
     };
   }
   getImageByKey(key) {
diff --git a/js/Organizers/tableOrganizer.js b/js/Organizers/tableOrganizer.js
index 6e4057c..54b0411 100644
--- a/js/Organizers/tableOrganizer.js
+++ b/js/Organizers/tableOrganizer.js
@@ -168,10 +168,10 @@ class TableOrganizer {
     const removeRowBtn = document.createElement("span");
     removeRowBtn.className = "remove-row-btn";
     removeRowBtn.innerText = "-";
-    removeRowBtn.onclick = function () {
-      const { table } = getTableProps();
+    removeRowBtn.onclick = () => {
+      const { table } = this.getTableProps();
       table.deleteRow(i);
-      updateRemoveButtons();
+      this.updateRemoveButtons();
     };
     return removeRowBtn;
   }
@@ -180,12 +180,12 @@ class TableOrganizer {
     const removeColBtn = document.createElement("span");
     removeColBtn.className = "remove-col-btn";
     removeColBtn.innerText = "-";
-    removeColBtn.onclick = function () {
+    removeColBtn.onclick = () => {
       const { table, rowCount } = this.getTableProps();
       for (let j = 0; j < rowCount; j++) {
         table.rows[j].deleteCell(i);
       }
-      updateRemoveButtons();
+      this.updateRemoveButtons();
     };
 
     return removeColBtn;
diff --git a/js/canvas.js b/js/canvas.js
index 2eaa240..c615526 100644
--- a/js/canvas.js
+++ b/js/canvas.js
@@ -11,17 +11,12 @@ let mainSketch = function (p) {
   p.setup = function () {
     p.createCanvas(p.windowWidth, p.windowHeight).parent(document.body);
 
-    // FIXME: FIX THAT PASSING NON-SENSE
-    // right now have to pass bottom of the tree
-    // find a convenient way -> NICE
-
     canvasManager = new CanvasManager(p);
     mainOrganizer = new MainOrganizer();
     editMLPOrganizer = new EditMLPOrganizer();
     iManager = new InteractionManager();
     tableOrganizer = new TableOrganizer();
     datasetOrganizer = new DatasetOrganizer();
-    // mainOrganizer.addSchema(new Schema(300, 300));
   };
 
   p.draw = function () {
diff --git a/js/draggable.js b/js/draggable.js
index 1aabb96..cab0891 100644
--- a/js/draggable.js
+++ b/js/draggable.js
@@ -6,8 +6,9 @@ class Draggable {
     this.h = h;
   }
 
-  setCoordinates() {
-    throw new Error("You have to implement the method setCoordinates!");
+  setCoordinates(x, y) {
+    this.x = x;
+    this.y = y;
   }
 
   updateCoordinates(x, y) {
diff --git a/js/script.js b/js/script.js
index 38deab4..a35358b 100644
--- a/js/script.js
+++ b/js/script.js
@@ -52,7 +52,8 @@ function createInput() {
 }
 
 function logMLPs() {
-  console.log(mainOrganizer.mlpViews);
+  console.log(mainOrganizer.mlpViews[0].layers);
+  console.log(mainOrganizer.mlpViews[0].origin);
 }
 
 function openCreateDataset() {
diff --git a/media/goOnce.png b/media/goOnce.png
new file mode 100644
index 0000000000000000000000000000000000000000..307dd1e1f72705874869032ccc8740feb21a71ce
GIT binary patch
literal 2368
zcmV-G3BUG<P)<h;3K|Lk000e1NJLTq002M$002M`1ONa4Q1E3I0000WV@Og>004R>
z004l5008;`004mK004C`008P>0026e000+ooVrmw00002VoOIv0063uBQgL0010qN
zS#tmY0AK(B0AK*{YeLTe000McNliru=L!ZAB^f(($=(0}2&G9xK~#9!?OJ<KQ&$@Q
z&P{lPC1kZOVi&8d^4PZcfQ}$;SEMM0prbA!mw;s%OQ?#E_05#Q!OkGoYL^vXsC2cX
z0b<26O+bnYgSI{x3nFL%cS)jVfLR8Sf?|@hf9#0&=1oWl&gS>u`OdlLe81m$e&<{O
zC!BD?2`8Lz!ijMR@(Pbf3Ka@cs8A#viH>%(KVwTid*w><w?jiDi7`oHEWjNd_GpK2
zG*M&Z;U6U>u++unl?|m~{C^>UA@Wf9@+CU3e!V@~V>+5Jjr<iJ58T9JXr+^fjRJv~
zBa_*qP2_0Obn@SR3y0j?bjcU*DJ!#AyEYSmJJZdLof8p3JYTd32L%VCn!rG~;Nt@i
zJw5T0&Q6euL?!%+3Zvv#m6g$kJynDm{rzxRrGkWCe!-I)8ql??SG}Td+$cQp@}<KC
z5DG&>wKeJKurVP48aN!I1qr3H_}n}17!*LLP=I#o)RDA{4|H`Qtyrx2TS0;3e0#gK
z{#(5W3Roc_<X4w2X|?tB@aMENljQ9HwAI@iwr|?RNWXtS(c|>#<e({2#zX)<pT#1V
z<mV&u)-AZXWQk?1D3!2JBr=-+$=bD0Y2|P}#bn~;AAhX=>;3zJ$*HL$7II|d0|SZ8
z5(zpK9Be2bA6BW*MVSnC)z;$v=4Q7Tx!nDCeSMb9Rb$&9%v-%$<8|c<IyHSd@$cYZ
z_+wNQd=(dGbi{pMRHRwDcCF<6(2z|9AUB1D;SEwL%6jW9z09dKHNgGyOU=>BN{K|H
z8EG$=6+vew;PY85qEsM2pJiskzXAgEI)aqRv}fbvC6d8Gn+QN|3JU{Hbv3kldeSno
z+uOC}85yO!E?u&gw51{-`HB^~XMu&7$(-_R%N7X8$$?0BcUndA@^X#us#WGX#H;{(
zeqbQ6_xg3+o=4?p&M-aKt^20y*I#W#-joPfESHy{>C+9B7qCJ?VBo?9lsIh~-N*g=
z#REHbm}<-9BFN{nSj1+DL~qzvW@n2BQc~<e9sr<tPgxmk6bPsbqp4V+Wbn=%6!YPS
zP}SB(wPW$NZRVm#lL9cF=H=-vc$L}N#l4?@ZV%$RA|UyS6(CY5uvjkFhNPvLEMKKm
zYCejI!3Vm!hK*u`h&v}vq+p%tL4naJAYg@rAoA8N7-TSp3zwfcBOXXeu{ZhAAmK=K
zH1YeYDiEV#Zg^T|X34(1JVWJ;jsTRqcQ2JZWVg37J=d*sG(mGHT~}QVJC7fyak;*A
zE1%C|SuB817#ga3$kCQ(WY}xY+Zvkpv$NrDU*E97chV$AYI3s00%&W}(`kmOH8r-}
z>Jr+*!xMdripbEO9x|`DS8ymU&Xxj5&Ubf1{mGLwV~}A1^wt3GOgA^qC!L+Nla?qh
zt~g369gS1`cn*g#H#r$3A`t}5nnlYLDHO#~^et?(NPOz=kJDRQhYe*~En>X=ws@ek
zlUh!11h8`=BB<o?VU<d?Xmq_#rpCuJ-hK24nhFZ^$O8Zr8jcc212Lzq4ew}Z7&fdV
z2>58>LfvwD0uav^EuyB;MVYJ?snymxvKtcw{_NN>y;I~E03EBYrl#?chzPR+fUiyu
z?W(OEjT1QtV_;byAB;+X-`u!C6QC|A$h-jc^xy*bH#d*Y4UC~<^=dfQ(gO4E-Gh+a
zT>Kxy(WI?G6j0Ux06=qQ%+M{PcPWYm-rlI`b=oaPE{BVwbEITJRTaQ{?@?_eX@3ER
zRy=;ppc<+tPSg`g*MJVP+0^tP^Vu`|yJ{!k{(f5ef&Mx)?%oA#iT(ye-{zC_11dcM
z@D_THv()qv@g~7@j+YnBuv33D>ra6aN;CxkY7fIP_?rN9O2_vu`XR`m0Pq2Q<<#7!
zFJ5mFke80{)9Ks{3V;e48)<2k{^{w>L1ZK?xt`9=pa9zPt5<1;ld-W2F>_qKAzA`a
znu`lO;c{u*m^$1H3DD>N(@!|7w|CfZ(Z|Q9VChm@JBW)OJ$mhhQfce@`@*?gwAI^t
z*bvdvgTJPq3=IlU(f;BES|X9qj2YXu+1f#nibOytm1ZAJtOO>vZ>JfKl$IKLD=>H^
zCKQH-YPI$Cv<m+c8*A)wbG#w3ZrL(?xV-$e0b}AtNXWSaN_1#S0002euc89NC_{hp
z!-ty3bLL3S>zuB}8J1sTvprlJ8{wdz->|V+DlKj@eCcBJBuMPb%!D<RFt~HZ4C3pf
zM;%Sj96V+g7ShPCQL7mbGBb_xG?sBLp`ih53JRz;l$M-Kez$wKqe&V=;<B6^*h~+z
zut$FW*_TaC#=c>gs_=tvYHKxr=kb6;d3wGV8To!3i*@fB{j$N)AVYWV1RtIEiU)V^
zYTJ^MT3U=>=$L&POML3@k9j}-2)>gh(K1e-J*!Fj^ixN#3Cpjs*&Z_s3w3)Q7I$~!
zp!xGl7Cd}t>U*=%pqSIvMzrvF5THXeB`JyVePbheg~xLg`NX<q%RF2g8}-Ns^!IDy
zc|3FE0Y>mVE}S@Tp7vd-RBt2z08FT>L&E+0pZuw!Vl?-MmOzx|;?ft+<wEF=9gw$R
zfnI^d-QC)F9<P*h`?e+Zjpzr7#HarL_`E~{Kg^zOus}~|C&W}#KuS#weAnEJ)Eyn_
zANu+%{aHa5{CHPa=3*}|4e96izrZFk5}xRs@TgG!{4@T7&$p!Ktr7qLAO*X-zYyf+
zLfVE6aB7^y2y4`8?2(`E9+8!G8a;nLl25JvOHANDdp7LP%|(dIr9MQCDH1V;ESZe)
zAT!g{R%aIhUV&_wI~Uibr=x!+B!K^f31dP$qNfLrl$H{EjvqI4yd6^kUV$I)>WWgs
z!%=Kh6pEQO3pxS<u*}B?9b~hi$JN!UN+%8t;VsXeA*o6QVXdt=tf>k8;qqlo=*^qf
mt}9MB;e-=TIN^j7ukc?Tt!et@dTsgu0000<MNUMnLSTZ^tZ6U+

literal 0
HcmV?d00001

diff --git a/media/pause.png b/media/pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a81993bad6ed21d58d54494fe534a597030b3c9
GIT binary patch
literal 1363
zcmV-Z1+4msP)<h;3K|Lk000e1NJLTq003P8003JE1^@s65h#h?00004b3#c}2nYxW
zd<bNS000FFNkl<Zc%1E>+j6Tm6o!8!aX!S(?CD$fqSNQ-^rCOs>BJ7_gAl#QB-3<*
z0V4r6`mTjgJ}W{j*=reH*LBdW3fX!9M?_2C04;q3*wzF1q!j{9&CzfU&Revt0B>6e
zA#Pqr2mzxMloBvTVKN5OVxVNd^U2uiK`MkmSv9EY8cof?+g57-j8d2ugKb%GY!hTh
zAHu5AyRJh~Rw&8}Rn@F@TL6G<n{XW)u4BV6j8*Ube^!ysd5bJBkQWuU-k}<X0nfGJ
zdoCEG+l)b_^tx$~WhIKTQgw?(xQ-3qcVL<3s`phQowqI0v_M{zvb$D-=Q;=i7mThm
z^QB8q(i};e%j|MB!oWiqc*^f1O?p)~h~pFum%9sD8<SB)Q2^Ugx8z8X{>Za?2$i#b
zk#r#huJ0+zs+KvX-Qd_3PA`G<J^tO&>xSd{o`662axw;E6sMOEmMQP${VwTM)!^+K
zZ@%YV3&Sw*dWvA%a@P6T(u=af<(f#j`J-_@g>W5vaX+&btFo*QD;xkW*92v`{P{Im
zdR2ccDM#n+8l$S0#f>IOZ#c)>MGODr?GmHm{O;>Vr3=yFa!n5N(40coeK--~J}0Bn
z-{bV@w}tn>d5iZrz3bYW($lQiZG><S6lH}pD`sCeD7|So;v`!%s3Q<38JcF^`aUTA
zT??PgTvxr))2u+fa9eaF>bjY=%={Ek5JD)482<j-ud~|!@#kN=>VJ$R&EdKBq~O?3
zEs`|X+rvBPx^D7h{U*KP99jMtM{Ii}%gaeGP2Z$z;meug@Jo8z3glY)V)DF1+m3uI
z?W^&FoZLSGV=lFH1x%7&meuILgl0NzD^T7DpAY~jBn0L)-?`=VW2QgpY5tbna!RVI
z)-OW}=(-NofOxX>=t(ookXxbyTk05cOX``iV9j*uhW9Sr`}s}ClhPN9(b5&ucfPEp
zD@IG-fW9|<EnP8M`Udp<_*hF<Osl1@kKU*61TB37v~<Pv<ss106{DqZ03llX>hyih
zPD@uzUxp<uT`_$*Wwdm~(4KTATDoFPvq$>Y`K+E9!!Tg7pK}Tj%i2wrz^7x#Em=E%
z)sYx-OB~x;c__zW$SpBV21@nwR5p|nm;*Ut2mmSRG&JA2<&*$`<LD(uHn*G-;A6p;
znJ($*SSGufVDoD+cU@<d0Ud!cmtWF-&)HSx<wu1O0^ge`9l&T~%{WsWev=;f?&fK(
z9~r|i5cuwByKmAB!&oKP?6VRE-lR#}n<DV<e=a(k(M%Yl_~plWQrq4qr=IQend7Wi
zy6f2R^cHe5p6kqds~_AWMxm!;G83SbAPVQL41-n)A&5eM@t~faDD-E)-`s5NI<{Wl
zZx9CFUBSZ9kLccxpPeNWa?=0B=_SwsvHxJ145ydi?&~K>Hw**kbF^7qpgqAD#rYg9
zdUK!r1fYcA^>l3Uj8VLvqQ!ObW?jt~#p^+5yv)D-uJQ~*2)tdB!z9eKEEBJ%P+I7F
zQT3P0HF^33$gX4Kd<v!Zxwy{JGuAlzL{+ULDaEDAszw}V(rb!t1)~&E<PUytWhv6i
zsC8Y3ILRJ9p{DOSh(cfKVUF~IfmPKYPUq(o-x||ohyq_)Eu&i~t4Eq;1=76Oed<9<
z2?EcBKjD~77RoE{rdfe(hw>>U@I80ZnWk)3t1(@a74p1XTq9^Hwq?Te<{di7=3fw*
VGiU*7v*G{%002ovPDHLkV1icbrLq73

literal 0
HcmV?d00001

diff --git a/media/play.png b/media/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a7140302e71ae2746680073135fd7b540cf1f4c
GIT binary patch
literal 2361
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

literal 0
HcmV?d00001

diff --git a/style.css b/style.css
index 866922e..7e772c2 100644
--- a/style.css
+++ b/style.css
@@ -329,6 +329,7 @@ body {
     border-radius: 100%;
     box-shadow: 0px 1px 10px #999;
     transition: transform 0.5s ease;
+    background-color: var(--white)
 }
 
 #toggle-dataset-btn.active {