Merge pull request #50 from eurunuela/warnings

Fix data loading bug

.env

@@ -1,4 +1,4 @@
 INLINE_RUNTIME_CHUNK=false
 GENERATE_SOURCEMAP=false
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_VERSION=1.0.14
+REACT_APP_VERSION=1.0.15

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rica",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": true,
   "dependencies": {
     "@blueprintjs/core": "^3.53.0",

src/Plots/PlotUtils.js

@@ -8,6 +8,7 @@ const ignoredColorHover = "#0284C7";
 // This functions converts the data into 4 objects corresponding to the 4 plots.
 // The objects have the necessary structure to feed the chartjs plots.
 export function parseData(data) {
+  console.log(data);
   let kappa_rho = {
     labels: data.map((e) => e.Component),
     datasets: [

src/PopUps/IntroPopUp.js

@@ -1,7 +1,128 @@
 import React, { Component } from "react";
-import UploadFolder from "../UploadFolder";
+import { readString } from "react-papaparse";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+
+function rankArray(data) {
+  var sorted = data.slice().sort(function (a, b) {
+    return b - a;
+  });
+  var ranks = data.map(function (v) {
+    return sorted.indexOf(v) + 1;
+  });
+  return ranks;
+}
+
+function rankComponents(data) {
+  let varNormalized = [];
+  let kappa = [];
+  let rho = [];
+  for (var i = 0; i < data.length; i++) {
+    varNormalized.push(data[i]["normalized variance explained"]);
+    kappa.push(data[i]["kappa"]);
+    rho.push(data[i]["rho"]);
+  }
+
+  let rankVariance = rankArray(varNormalized);
+  let rankKappa = rankArray(kappa);
+  let rankRho = rankArray(rho);
+
+  for (i = 0; i < data.length; i++) {
+    data[i]["variance explained rank"] = rankVariance[i];
+    data[i]["kappa rank"] = rankKappa[i];
+    data[i]["rho rank"] = rankRho[i];
+  }
+}
 
 class IntroPopup extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      file: "",
+    };
+  }
+
+  readFiles(e) {
+    console.log("Reading data...");
+    let data = [];
+    let compFigures = [];
+    let carpetFigures = [];
+    let comps = [];
+    let info = [];
+    let originalData = [];
+
+    let files = e.target.files;
+
+    for (var i in files) {
+      let filename = files[i].name;
+      if (filename !== undefined) {
+        // Save component figures into array
+        if (filename.includes("comp_")) {
+          let imgReader = new FileReader();
+          imgReader.readAsDataURL(files[i]);
+          imgReader.onload = (e) => {
+            compFigures.push({
+              name: filename,
+              img: e.target.result,
+            });
+          };
+        }
+
+        // Save carpet plots into array
+        if (filename.includes(".svg")) {
+          let imgReader = new FileReader();
+          imgReader.readAsDataURL(files[i]);
+          imgReader.onload = (e) => {
+            carpetFigures.push({
+              name: filename,
+              img: e.target.result,
+            });
+          };
+        }
+
+        // Save report info into array
+        if (filename === "report.txt") {
+          let reader = new FileReader();
+          reader.readAsText(files[i]);
+          reader.onload = (e) => {
+            let info_holder = e.target.result;
+            info.push(info_holder);
+          };
+        }
+
+        // Save component table into array
+        if (filename.includes("_metrics.tsv") && !filename.includes("PCA")) {
+          let reader = new FileReader();
+          reader.readAsText(files[i]);
+          reader.onload = (e) => {
+            let dataTXT = e.target.result;
+            let compData = readString(dataTXT, {
+              header: true,
+              skipEmptyLines: true,
+            })["data"];
+            originalData.push(Object.assign([], compData));
+            rankComponents(compData);
+            comps.push(compData);
+          };
+        }
+      }
+    }
+    data.push(compFigures);
+    data.push(carpetFigures);
+    data.push(comps);
+    data.push(info);
+    data.push(originalData);
+
+    // Pass data to parent
+    this.props.onDataLoad(data);
+
+    console.log(data);
+
+    console.log("Data read into dictionary.");
+
+    // this.props.closePopup();
+  }
+
   render() {
     return (
       <div className="fixed z-10 flex items-center justify-center w-full h-full bg-gray-500 bg-opacity-50 backdrop-blur-sm">
@@ -52,10 +173,30 @@ class IntroPopup extends Component {
               😎
             </span>
           </p>
-          <UploadFolder
-            parentCallback={this.props.callBack}
+          {/* <UploadFolder
+            onDataLoad={this.props.onDataLoad}
             closePopup={this.props.closePopup}
-          />
+          /> */}
+          <label
+            htmlFor="file-upload"
+            className="relative inline-flex items-center content-center justify-center w-fit h-10 px-5 pt-0.5 mt-4 text-base font-semibold text-center text-white bg-sky-500 rounded-xl hover:cursor-pointer hover:bg-sky-600"
+            onSubmit={this.onFormSubmit}
+          >
+            <FontAwesomeIcon
+              icon={faFolder}
+              size="lg"
+              className="-mt-0.5 mx-2"
+            />{" "}
+            Select folder
+            <input
+              id="file-upload"
+              type="file"
+              name="file"
+              directory=""
+              webkitdirectory=""
+              onChange={(e) => this.readFiles(e)}
+            />
+          </label>
         </div>
       </div>
     );