From 67942c9c52f21f79cb706d3a5605095c53d15fce Mon Sep 17 00:00:00 2001 From: Martin Glauer Date: Mon, 28 Aug 2023 21:45:18 +0200 Subject: [PATCH 1/4] Create node.js.yml --- .github/workflows/node.js.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/node.js.yml diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..eb4d9d5 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs + +name: Node.js CI + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.x, 16.x, 18.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present + - run: npm test From 85b55912bf050740128b5be4bf3f31157bcf3d83 Mon Sep 17 00:00:00 2001 From: Martin Glauer Date: Mon, 28 Aug 2023 21:52:02 +0200 Subject: [PATCH 2/4] Set correct working directory in tests Update node.js.yml Update node.js.yml Update node.js.yml --- .github/workflows/node.js.yml | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index eb4d9d5..1136d1a 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -13,10 +13,9 @@ jobs: build: runs-on: ubuntu-latest - strategy: matrix: - node-version: [14.x, 16.x, 18.x] + node-version: [18.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: @@ -25,7 +24,14 @@ jobs: uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} + cache-dependency-path: react-app/package-lock.json cache: 'npm' - - run: npm ci - - run: npm run build --if-present - - run: npm test + - name: CI + working-directory: react-app + run: npm ci + - name: build + working-directory: react-app + run: npm run build --if-present + - name: test + working-directory: react-app + run: npm test From 68128f490c8a2b98d96c2b89a32c447356b48d45 Mon Sep 17 00:00:00 2001 From: MGlauer Date: Mon, 28 Aug 2023 22:29:02 +0200 Subject: [PATCH 3/4] Follow basic JS linting --- react-app/src/App.js | 2 - .../src/smiles-form/classification-form.js | 51 +------------------ react-app/src/smiles-form/details-page.js | 20 +------- react-app/src/smiles-form/ontology-utils.js | 4 +- 4 files changed, 5 insertions(+), 72 deletions(-) diff --git a/react-app/src/App.js b/react-app/src/App.js index ba77405..7907942 100644 --- a/react-app/src/App.js +++ b/react-app/src/App.js @@ -1,8 +1,6 @@ -import logo from './logo.svg'; import './App.css'; import ClassificationGrid from './smiles-form/classification-form.js' import '../node_modules/vis-network/styles/vis-network.css'; -import Box from '@mui/material/Box'; import Link from '@mui/material/Link'; function App() { diff --git a/react-app/src/smiles-form/classification-form.js b/react-app/src/smiles-form/classification-form.js index 4eb77a3..e3a4a6d 100644 --- a/react-app/src/smiles-form/classification-form.js +++ b/react-app/src/smiles-form/classification-form.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useEffect } from 'react'; import axios from "axios"; import Alert from '@mui/material/Alert'; import PropTypes from 'prop-types'; @@ -7,10 +6,8 @@ import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import Divider from '@mui/material/Divider'; import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; import AddIcon from '@mui/icons-material/Add'; import EditIcon from '@mui/icons-material/Edit'; -import CloseIcon from '@mui/icons-material/Close'; import Chip from '@mui/material/Chip'; import DeleteIcon from '@mui/icons-material/DeleteOutlined'; import FileUploadIcon from '@mui/icons-material/FileUpload'; @@ -34,48 +31,8 @@ import { import DetailsPage from "./details-page"; import {plot_ontology} from "./ontology-utils"; -const RenderDate = (props) => { - const { hasFocus, value } = props; - const buttonElement = React.useRef(null); - const rippleRef = React.useRef(null); - - React.useLayoutEffect(() => { - if (hasFocus) { - const input = buttonElement.current?.querySelector('input'); - input?.focus(); - } else if (rippleRef.current) { - // Only available in @mui/material v5.4.1 or later - rippleRef.current.stop({}); - } - }, [hasFocus]); - - return ( - - {value?.getFullYear() ?? ''} - - - ); -}; - function EditToolbar(props) { - const {setRows, setRowModesModel, rows, getLabel, setOntology} = props; + const {setRows, setRowModesModel, rows, setOntology} = props; const addRows = ((smiles) => { const ids = smiles.map((s) => randomId()); @@ -292,10 +249,6 @@ export default function ClassificationGrid() { }, ]; - const getLabel = (x) => { - return hierarchy[x]["label"] - } - return ( @@ -329,7 +282,7 @@ export default function ClassificationGrid() { Toolbar: EditToolbar, }} componentsProps={{ - toolbar: {setRows, setRowModesModel, rows, getLabel, setOntology}, + toolbar: {setRows, setRowModesModel, rows, setOntology}, }} experimentalFeatures={{newEditingApi: true}} /> diff --git a/react-app/src/smiles-form/details-page.js b/react-app/src/smiles-form/details-page.js index 01ffeea..1c99948 100644 --- a/react-app/src/smiles-form/details-page.js +++ b/react-app/src/smiles-form/details-page.js @@ -4,24 +4,14 @@ import axios from 'axios' import {useEffect, useRef} from "react"; import {Network} from "vis-network"; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CancelIcon from '@mui/icons-material/Close'; -import Divider from '@mui/material/Divider'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import FormControl from '@mui/material/FormControl'; -import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; -import Skeleton from '@mui/material/Skeleton'; -import Stack from '@mui/material/Stack'; import Tab from '@mui/material/Tab'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; -import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import {styled} from '@mui/material/styles'; @@ -90,14 +80,6 @@ export function LayerTabs(layers) { ); } -const Item = styled(Paper)(({theme}) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: theme.palette.textsecondary, -})); - export default function DetailsPage(data) { const handleClose = data.handleClose; data = data.detail; @@ -127,7 +109,7 @@ export default function DetailsPage(data) { alignItems: 'center', justifyContent: 'center', }}> - + Molecular graph of the submitted chemical

ChEBI Classification

 diff --git a/react-app/src/smiles-form/ontology-utils.js b/react-app/src/smiles-form/ontology-utils.js index a888b09..e39037c 100644 --- a/react-app/src/smiles-form/ontology-utils.js +++ b/react-app/src/smiles-form/ontology-utils.js @@ -57,8 +57,8 @@ function renderOverview(node, graph){ } const nodeDict = Object.fromEntries(graph.nodes.map(x => [x["id"], x])); - const superclasses = graph.edges.filter((e) => (e["from"] == node)).map((e) => renderClassListElement(e["to"], nodeDict[e["to"]])) - const subclasses = graph.edges.filter((e) => (e["to"] == node)).map((e) => renderClassListElement(e["from"], nodeDict[e["from"]])) + const superclasses = graph.edges.filter((e) => (e["from"] === node)).map((e) => renderClassListElement(e["to"], nodeDict[e["to"]])) + const subclasses = graph.edges.filter((e) => (e["to"] === node)).map((e) => renderClassListElement(e["from"], nodeDict[e["from"]])) return ( From 20773854287244698208a6de7c83a2ce884a344c Mon Sep 17 00:00:00 2001 From: MGlauer Date: Mon, 28 Aug 2023 22:33:01 +0200 Subject: [PATCH 4/4] Remove more unused react code --- react-app/src/smiles-form/details-page.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/react-app/src/smiles-form/details-page.js b/react-app/src/smiles-form/details-page.js index 1c99948..1418c1d 100644 --- a/react-app/src/smiles-form/details-page.js +++ b/react-app/src/smiles-form/details-page.js @@ -1,5 +1,4 @@ import React from 'react'; -import axios from 'axios' import {useEffect, useRef} from "react"; import {Network} from "vis-network"; @@ -13,7 +12,6 @@ import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; import Typography from '@mui/material/Typography'; -import {styled} from '@mui/material/styles'; import {plot_ontology} from "./ontology-utils";