Refactoring: move components into individual file and cleanup eslint …

…errors
HumanBrainProject · Mar 6, 2024 · 8c68734 · 8c68734
1 parent 2b2992c
commit 8c68734
Show file tree

Hide file tree

Showing 24 changed files with 8,832 additions and 3,573 deletions.
diff --git a/apps/nar-v3/.eslintrc.cjs b/apps/nar-v3/.eslintrc.cjs
@@ -1,15 +1,16 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
+    "react/prop-types": 0,
   },
-}
+};
diff --git a/apps/nar-v3/package-lock.json b/apps/nar-v3/package-lock.json
diff --git a/apps/nar-v3/package.json b/apps/nar-v3/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nar-v3",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,13 +22,19 @@
     "react-router-dom": "^6.13.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.2.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^1.3.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
-    "vite": "^4.3.9"
+    "jsdom": "^24.0.0",
+    "vite": "^4.3.9",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^1.3.1",
+    "vitest-fetch-mock": "^0.2.2"
   }
 }
diff --git a/apps/nar-v3/src/components/CellPatchingCard.jsx b/apps/nar-v3/src/components/CellPatchingCard.jsx
@@ -0,0 +1,82 @@
+/*
+The CellPatchingCard component displays metadata about
+cell patching activities.
+
+Copyright 2024 Andrew P. Davison, CNRS
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+
+import Connection from "./Connection";
+import styles from "../styles";
+import {formatQuant} from "../utility";
+
+
+function CellPatchingCard(props) {
+  const activity = props.activity;
+
+  if (activity) {
+    return (
+      <>
+        <Connection />
+        <Box sx={styles.activity} component={Paper} variant="outlined">
+          <h2>Cell patching</h2>
+          <p>{activity.label}</p>
+
+          <dl>
+            <dt>Electrode description</dt>
+            <dd>{activity.device[0].device.description}</dd>
+            {/* activity.device[0].device.deviceType.name */}
+            {/* activity.device[0].device.manufacturer.fullName */}
+            <dt>Pipette solution (more details to come)</dt>
+            <dd>{activity.device[0].pipetteSolution.name}</dd>
+            <dt>Seal resistance</dt>
+            <dd>
+              {activity.device[0].sealResistance.value
+                .map((item) => formatQuant(item))
+                .join(", ")}
+            </dd>
+            <dt>Series resistance</dt>
+            <dd>
+              {activity.device[0].seriesResistance.value
+                .map((item) => formatQuant(item))
+                .join(", ")}
+            </dd>
+            <dt>Holding potential</dt>
+            <dd>
+              {activity.device[0].holdingPotential.value
+                .map((item) => formatQuant(item))
+                .join(", ")}
+            </dd>
+
+            <dt>Bath solution (more details to come)</dt>
+            <dd>{activity.tissueBathSolution.name}</dd>
+            <dt>Bath temperature</dt>
+            <dd>{formatQuant(activity.bathTemperature)}</dd>
+            <dt>Description</dt>
+            <dd>{activity.description}</dd>
+            <dt>Type</dt>
+            <dd>{activity.variation}</dd>
+          </dl>
+        </Box>
+      </>
+    );
+  } else {
+    return "";
+  }
+}
+
+export default CellPatchingCard;
diff --git a/apps/nar-v3/src/components/Connection.jsx b/apps/nar-v3/src/components/Connection.jsx
@@ -0,0 +1,39 @@
+/*
+The Connection component is purely graphical.
+It draws a large, downward pointing arrow using the following CSS
+(in public/index.css):
+
+.triangle-down {
+    width: 400px;
+    height: 0;
+    border-left: 200px solid transparent;
+    border-right: 200px solid transparent;
+    border-top: 40px solid lightgray;
+}
+
+Copyright 2024 Andrew P. Davison, CNRS
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Stack from "@mui/material/Stack";
+
+function Connection() {
+  return (
+    <Stack direction="row" justifyContent="center">
+      <div className="triangle-down" />
+    </Stack>
+  );
+}
+
+export default Connection;
diff --git a/apps/nar-v3/src/components/DataFileCard.jsx b/apps/nar-v3/src/components/DataFileCard.jsx
@@ -0,0 +1,59 @@
+/*
+The DataFileCard component displays metadata about a data file.
+
+Copyright 2024 Andrew P. Davison, CNRS
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+
+import { formatQuant } from "../utility";
+import Connection from "./Connection";
+import styles from "../styles";
+
+function DataFileCard(props) {
+  const fileObj = props.fileObj;
+
+  if (fileObj) {
+    return (
+      <>
+        <Connection />
+        <Box sx={styles.entity} component={Paper} variant="outlined">
+          <h2>File {fileObj.name}</h2>
+          <dl>
+            <dt>Data type</dt>
+            <dd>{fileObj.dataType ? fileObj.dataType.name : "unknown"}</dd>
+            <dt>Format</dt>
+            <dd>{fileObj.format ? fileObj.format.name : "unknown"}</dd>
+            <dt>Hash</dt>
+            <dd>
+              {fileObj.hash.map((item) => (
+                <span key={item.algorithm}>
+                  {item.algorithm}: {item.digest}&nbsp;
+                </span>
+              ))}
+            </dd>
+            <dt>Size</dt>
+            <dd>{formatQuant(fileObj.storageSize)}</dd>
+          </dl>
+        </Box>
+      </>
+    );
+  } else {
+    return "";
+  }
+}
+
+export default DataFileCard;