diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..1136d1a --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,37 @@ +# 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: [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-dependency-path: react-app/package-lock.json + cache: 'npm' + - 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 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..1418c1d 100644 --- a/react-app/src/smiles-form/details-page.js +++ b/react-app/src/smiles-form/details-page.js @@ -1,29 +1,17 @@ import React from 'react'; -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'; import {plot_ontology} from "./ontology-utils"; @@ -90,14 +78,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 +107,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 (