create dataset feature added & control panel ui mostly completed

saliherdemk · Aug 9, 2024 · 78f0595 · 78f0595
1 parent 0d41dfa
commit 78f0595
Show file tree

Hide file tree

Showing 10 changed files with 301 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -5,14 +5,6 @@
     <link href="table.css" rel="stylesheet" />
   </head>
   <body>
-    <div style="position: absolute">
-      <button id="add-layer" type="button" onclick="addLayer()">
-        Add Layer
-      </button>
-      <button onclick="logMLPs()" type="">Log Mlps</button>
-      <button onclick="openCreateDataset()" type="">Create Dataset</button>
-    </div>
-
     <div id="mlp-edit-container">
       <div>
         <label for="mlp-label">Name</label><br />
@@ -167,12 +159,36 @@
       </div>
     </div>
 
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"
-      integrity="sha512-d6sc8kbZEtA2LwB9m/ck0FhvyUwVfdmvTeyJRprmj7Wg9wRFtHDIpr6qk4g/y3Ix3O9I6KHIv6SGu9f7RaP1Gw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
+    <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>Datasets</div>
+        <div id="dataset-scrollable"></div>
+        <button onclick="openCreateDataset()" class="btn btn-sky">
+          Create Dataset
+        </button>
+        <button
+          id="add-layer"
+          type="button"
+          class="btn btn-green"
+          onclick="addLayer()"
+        >
+          Add Layer
+        </button>
+      </div>
+    </div>
+
+    <button onclick="logMLPs()" type="">Log Mlps</button>
+
+    <script src="js/p5.min.js"></script>
 
     <script src="js/script.js"></script>
 
@@ -181,11 +197,13 @@
     <script src="js/Managers/eventManager.js"></script>
 
     <script src="js/Organizers/tableOrganizer.js"></script>
+    <script src="js/Organizers/datasetOrganizer.js"></script>
     <script src="js/Organizers/mainOrganizer.js"></script>
     <script src="js/Organizers/editOrganizer.js"></script>
     <script src="js/Organizers/editLayerOrganizer.js"></script>
     <script src="js/Organizers/editMlpOrganizer.js"></script>
 
+    <script src="js/MLP/Dataset.js"></script>
     <script src="js/MLP/Value.js"></script>
     <script src="js/MLP/ActFunctions.js"></script>
     <script src="js/MLP/Neuron.js"></script>

diff --git a/js/Draw/DatasetView.js b/js/Draw/DatasetView.js
@@ -0,0 +1,17 @@
+class DatasetView {
+  constructor(dataset) {
+    this.dataset = dataset;
+  }
+
+  getTrainX() {
+    return this.dataset.trainX;
+  }
+
+  getTrainY() {
+    this.dataset.trainY;
+  }
+
+  getLabels() {
+    return this.dataset.labels;
+  }
+}
diff --git a/js/MLP/Dataset.js b/js/MLP/Dataset.js
@@ -1,13 +1,35 @@
 class Dataset {
-  constructor(name, data) {
+  constructor(id, name, data) {
+    this.id = id;
     this.name = name;
-    this.data = data;
+    this.trainX = [];
+    this.trainY = [];
+    this.labels = [];
+    this.setData(data);
   }
 
   setName(name) {
     this.name = name;
   }
+
   setData(data) {
-    this.data = data;
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i];
+      const values = [];
+
+      for (let j = 0; j < row.length; j++) {
+        const value = row[j];
+        if (i == 0) {
+          this.labels.push(value);
+          continue;
+        }
+        if (j == row.length - 1) {
+          this.trainY.push(value);
+          continue;
+        }
+        values.push(value);
+      }
+      values.length && this.trainX.push(values);
+    }
   }
 }
diff --git a/js/Organizers/datasetOrganizer.js b/js/Organizers/datasetOrganizer.js
@@ -0,0 +1,27 @@
+class DatasetOrganizer {
+  constructor() {
+    this.lastDatasetId = -1;
+    this.datasets = [];
+  }
+
+  createButtonForDataset(name, id) {
+    const btn = createButton("dataset-scrollable");
+    btn.innerText = name;
+    btn.setAttribute("id", id);
+    btn.classList.add("btn", "btn-gray");
+  }
+
+  addDataset(name, data) {
+    const id = this.getDatasetId();
+    this.datasets.push(new Dataset(id, name, data));
+    this.createButtonForDataset(name, id);
+  }
+
+  getDatasetId() {
+    return ++this.lastDatasetId;
+  }
+
+  getDatasetById(id) {
+    return this.datasets.filter((d) => d.id == id);
+  }
+}
diff --git a/js/Organizers/tableOrganizer.js b/js/Organizers/tableOrganizer.js
@@ -7,7 +7,19 @@ class TableOrganizer {
 
   createDataset() {
     const { table, rowCount, colCount } = this.getTableProps();
-    console.log(table.querySelectorAll("input"));
+    const name = getElementById("dataset-name-inp").value;
+    const data = [];
+
+    for (let i = 0; i < rowCount - 1; i++) {
+      const values = [];
+      for (let j = 1; j < colCount; j++) {
+        const cellInput = table.rows[i].cells[j].querySelector("input");
+        values.push(cellInput.value);
+      }
+      data.push(values);
+    }
+
+    datasetOrganizer.addDataset(name, data);
   }
 
   getTableProps() {
@@ -41,14 +53,14 @@ class TableOrganizer {
   }
 
   createAddButtons() {
-    const addRowBtn = document.createElement("button");
+    const addRowBtn = createButton();
     addRowBtn.innerText = "+";
     addRowBtn.classList.add("table-add-btn");
     addRowBtn.onclick = () => {
       this.addRow();
     };
 
-    const addColBtn = document.createElement("button");
+    const addColBtn = createButton();
     addColBtn.innerText = "+";
     addColBtn.classList.add("table-add-btn");
     addColBtn.onclick = () => {

diff --git a/js/canvas.js b/js/canvas.js
@@ -3,6 +3,7 @@ let editLayerOrganizer;
 let editMLPOrganizer;
 let iManager;
 let tableOrganizer;
+let datasetOrganizer;
 
 let canvasManager;
 
@@ -19,6 +20,7 @@ let mainSketch = function (p) {
     editMLPOrganizer = new EditMLPOrganizer();
     iManager = new InteractionManager();
     tableOrganizer = new TableOrganizer();
+    datasetOrganizer = new DatasetOrganizer();
     // mainOrganizer.addSchema(new Schema(300, 300));
   };
 

diff --git a/js/p5.min.js b/js/p5.min.js
diff --git a/js/script.js b/js/script.js
@@ -35,6 +35,7 @@ function setElementProperties(elId, properties) {
 }
 
 function addEventToElement(elId, eventName, func) {
+  console.log(elId);
   getElementById(elId).addEventListener(eventName, func);
 }
 
@@ -95,3 +96,17 @@ function scaleCanvas(event) {
 function handleCreateDataset() {
   tableOrganizer.createDataset();
 }
+
+function createButton(parentId = null) {
+  const btn = document.createElement("button");
+  const parent = getElementById(parentId);
+  if (parent) {
+    parent.appendChild(btn);
+  }
+  return btn;
+}
+
+function toggleDatasetsContainer() {
+  getElementById("datasets-container").classList.toggle("active");
+  getElementById("toggle-dataset-btn").classList.toggle("active");
+}
diff --git a/media/arrow.svg b/media/arrow.svg