Implement continous integration

.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

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() {

react-app/src/smiles-form/classification-form.js

@@ -1,16 +1,13 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import axios from "axios";
 import Alert from '@mui/material/Alert';
 import PropTypes from 'prop-types';
 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 (
-    <strong>
-      {value?.getFullYear() ?? ''}
-      <Button
-        component="button"
-        ref={buttonElement}
-        touchRippleRef={rippleRef}
-        variant="contained"
-        size="small"
-        style={{ marginLeft: 16 }}
-        // Remove button from tab sequence when cell does not have focus
-        tabIndex={hasFocus ? 0 : -1}
-        onKeyDown={(event) => {
-          if (event.key === ' ') {
-            // Prevent key navigation when focus is on button
-            event.stopPropagation();
-          }
-        }}
-      >
-        Open
-      </Button>
-    </strong>
-  );
-};
-
 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 (
         <Box sx={{width: "100%"}}>
             <Box>
@@ -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}}
                     />

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',
                                 }}>
-                                <img src={`data:image/jpeg;base64,${data.plain_molecule}`} width="300" height="300"/></div>
+                                <img src={`data:image/jpeg;base64,${data.plain_molecule}`} alt="Molecular graph of the submitted chemical" width="300" height="300"/></div>
                             </Box>
                             <Box>
                                 <Typography><h2>ChEBI Classification</h2></Typography>

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 (<Box>
         <List dense={true}>