Merge pull request #60 from eurunuela/path

Show path of data on info page and page title
ME-ICA · Apr 20, 2023 · 9730b76 · 9730b76
2 parents 0cc28a1 + 4801c55
commit 9730b76
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 176 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,4 @@
 INLINE_RUNTIME_CHUNK=false
 GENERATE_SOURCEMAP=false
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_VERSION=1.0.17
+REACT_APP_VERSION=1.0.18
diff --git a/package.json b/package.json
@@ -1,64 +1,66 @@
 {
-  "name": "rica",
-  "version": "1.0.17",
-  "private": true,
-  "dependencies": {
-    "@blueprintjs/core": "^3.53.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@reach/rect": "^0.16.0",
-    "@reach/tabs": "^0.16.4",
-    "chart.js": "3.5.0",
-    "chartjs-plugin-datalabels": "2.0.0",
-    "chartjs-plugin-zoom": "1.1.1",
-    "postcss-cli": "^9.1.0",
-    "react": "^17.0.2",
-    "react-chartjs-2": "3.0.4",
-    "react-dom": "^17.0.2",
-    "react-hotkeys": "^2.0.0",
-    "react-icons": "^4.2.0",
-    "react-papaparse": "^3.17.2",
-    "react-scripts": "^5.0.0",
-    "recharts": "^2.1.2",
-    "styled-components": "^5.3.1",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "watch:css": "postcss -w src/styles/tailwind.css -o src/styles/output.css"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@tailwindcss/jit": "^0.1.10",
-    "autoprefixer": "^10.4.1",
-    "concurrently": "^6.5.1",
-    "gulp": "^3.9.1",
-    "gulp-inline-source": "^3.2.0",
-    "gulp-replace": "^1.1.3",
-    "postcss": "^8.4.5",
-    "tailwindcss": "^2.2.19"
-  }
+    "name": "rica",
+    "version": "1.0.18",
+    "private": true,
+    "dependencies": {
+        "@blueprintjs/core": "^3.53.0",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
+        "@fortawesome/free-brands-svg-icons": "^5.15.4",
+        "@fortawesome/free-regular-svg-icons": "^5.15.4",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@fortawesome/react-fontawesome": "^0.1.15",
+        "@reach/rect": "^0.16.0",
+        "@reach/tabs": "^0.16.4",
+        "chart.js": "3.5.0",
+        "chartjs-plugin-datalabels": "2.0.0",
+        "chartjs-plugin-zoom": "1.1.1",
+        "postcss-cli": "^9.1.0",
+        "react": "^17.0.2",
+        "react-chartjs-2": "3.0.4",
+        "react-dom": "^17.0.2",
+        "react-helmet": "^6.1.0",
+        "react-hotkeys": "^2.0.0",
+        "react-icons": "^4.2.0",
+        "react-papaparse": "^3.17.2",
+        "react-scripts": "^5.0.1",
+        "recharts": "^2.1.2",
+        "styled-components": "^5.3.1",
+        "web-vitals": "^1.1.2"
+    },
+    "scripts": {
+        "start": "npm run watch:css & react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "watch:css": "postcss -w src/styles/tailwind.css -o src/styles/output.css"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@tailwindcss/jit": "^0.1.18",
+        "@types/tailwindcss": "^3.1.0",
+        "autoprefixer": "^10.4.14",
+        "concurrently": "^6.5.1",
+        "gulp": "^3.9.1",
+        "gulp-inline-source": "^4.0.0",
+        "gulp-replace": "^1.1.3",
+        "postcss": "^8.4.23",
+        "tailwindcss": "^2.2.19"
+    }
 }
diff --git a/src/Info/Info.js b/src/Info/Info.js
@@ -1,4 +1,11 @@
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFolder,
+} from "@fortawesome/free-solid-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core"; //allows later to just use icon name to render-them
+
+library.add(faFolder);
 
 class Info extends React.Component {
   constructor(props) {
@@ -11,7 +18,23 @@ class Info extends React.Component {
   render() {
     return (
       <div className="mt-16 text-base text-justify whitespace-pre-wrap mx-80 ">
-        <p>{this.state.info}</p>
+        {/* Make a rounded square for the path. The background color should be red. */}
+        <div className="flex justify-center mb-8">
+          {/* Show folder icon on the left and text on the right */}
+          <div className="rounded-xl bg-sky-500 flex items-center">
+            <div className="px-4 py-4 flex items-center">
+              <FontAwesomeIcon
+                icon={["fas", "folder"]}
+                size="lg"
+                className="mx-2"
+              />
+              <h1 className="text-xl font-semibold italic text-center">
+                {this.state.info[1]}
+              </h1>
+            </div>
+          </div>
+        </div>
+        <p>{this.state.info[0]}</p>
       </div>
     );
   }

diff --git a/src/PopUps/IntroPopUp.js b/src/PopUps/IntroPopUp.js
@@ -4,10 +4,10 @@ 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) {
+  var sorted = data.slice().sort(function(a, b) {
     return b - a;
   });
-  var ranks = data.map(function (v) {
+  var ranks = data.map(function(v) {
     return sorted.indexOf(v) + 1;
   });
   return ranks;
@@ -50,6 +50,7 @@ class IntroPopup extends Component {
     let comps = [];
     let info = [];
     let originalData = [];
+    let dir_path = [];
 
     let files = e.target.files;
 
@@ -105,13 +106,32 @@ class IntroPopup extends Component {
             comps.push(compData);
           };
         }
+
+        // Save file path. Filename starts with "tedana_20" and ends with ".tsv"
+        if (filename.startsWith("tedana_20") && filename.endsWith(".tsv")) {
+          let reader = new FileReader();
+          reader.readAsText(files[i]);
+          reader.onload = (e) => {
+            // Find file path. Should be on the last column of the first row
+            let dataTXT = e.target.result;
+            let compData = readString(dataTXT, {
+              header: false,
+              skipEmptyLines: true,
+            })["data"];
+            let dir_path_str = compData[0][compData[0].length - 1];
+            // Only keep the path, which is after the colon. Make sure it has no spaces before or after
+            dir_path_str = dir_path_str.split(":")[1].trim();
+            dir_path.push(dir_path_str);
+          };
+        }
       }
     }
     data.push(compFigures);
     data.push(carpetFigures);
     data.push(comps);
     data.push(info);
     data.push(originalData);
+    data.push(dir_path);
 
     // Pass data to parent
     this.props.onDataLoad(data);