Merge pull request #511 from dgidb/dev

Dev

README.md

@@ -87,6 +87,120 @@ rails s
 
 Navigate to `localhost:3000/api/graphiql` in your browser. If the example query provided runs successfully, then you're all set.
 
+### Data loading
+
+To perform a data load from scratch, first run the `reset` task to provide a clean, seeded DB:
+
+```shell
+rake db:reset
+```
+
+Most DGIdb data comes from static files, typically called `claims.tsv`. The data loader classes expect `server/lib/data/` to contain the following files:
+
+```
+lib/data
+├── bader_lab
+│   └── claims.tsv
+├── cancer_commons
+│   └── claims.tsv
+├── caris_molecular_intelligence
+│   └── claims.tsv
+├── cgi
+│   └── claims.tsv
+├── chembl
+│   └── chembl.db
+├── clearity_foundation_biomarkers
+│   └── claims.tsv
+├── clearity_foundation_clinical_trial
+│   └── claims.tsv
+├── cosmic
+│   └── claims.csv
+├── dgene
+│   └── claims.tsv
+├── drugbank
+│   └── claims.xml
+├── dtc
+│   └── claims.csv
+├── ensembl
+│   └── claims.tsv
+├── entrez
+│   └── claims.tsv
+├── fda
+│   └── claims.tsv
+├── foundation_one_genes
+│   └── claims.tsv
+├── go
+│   └── targets.tsv
+├── guide_to_pharmacology
+│   ├── interactions.csv
+│   └── targets_and_families.csv
+├── hingorani_casas
+│   └── claims.tsv
+├── hopkins_groom
+│   └── claims.tsv
+├── human_protein_atlas
+│   └── claims.tsv
+├── idg
+│   ├── claims.json
+│   └── claims.tsv
+├── msk_impact
+│   └── claims.tsv
+├── my_cancer_genome
+│   └── claims.tsv
+├── my_cancer_genome_clinical_trial
+│   └── claims.tsv
+├── nci
+│   ├── claims.tsv
+│   └── claims.xml
+├── oncokb
+│   ├── drug_claim.csv
+│   ├── gene_claim.csv
+│   ├── gene_claim_aliases.csv
+│   ├── interaction_claim.csv
+│   ├── interaction_claim_attributes.csv
+│   └── interaction_claim_links.csv
+├── oncomine
+│   └── claims.tsv
+├── pharmgkb
+│   └── claims.tsv
+├── russ_lampel
+│   └── claims.tsv
+├── talc
+│   └── claims.tsv
+├── tdg_clinical_trial
+│   ├── claims.tsv
+├── tempus
+│   └── claims.tsv
+├── tend
+│   └── claims.tsv
+└── ttd
+    └── claims.csv
+```
+
+First, load claims:
+
+```shell
+rake dgidb:import:all
+```
+
+Then, run grouping. By default, the groupers will expect a normalizer service to be running locally on port 8000; use the `THERAPY_HOSTNAME` and `GENE_HOSTNAME` environment variables to specify alternate hosts:
+
+```shell
+export THERAPY_HOSTNAME=http://localhost:7999  # no trailing backslash
+rake dgidb:group:drugs
+export GENE_HOSTNAME=http://localhost:7998  # no trailing backslash
+rake dgidb:group:genes
+rake dgidb:group:interactions
+```
+
+Finally, normalize remaining metadata:
+
+```shell
+rake dgidb:normalize:drug_approval_types
+rake dgidb:normalize:drug_types
+rake dgidb:normalize:populate_source_counters
+```
+
 ### Client setup
 
 Navigate to the [/client directory](/client):
@@ -107,3 +221,15 @@ Start the client:
 ```shell
 yarn start
 ```
+
+Frontend style is enforced by [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/). Conformance is ensured by [pre-commit](https://pre-commit.com/#usage). Before your first commit, run
+
+```shell
+pre-commit install
+```
+
+In practice, Prettier will do most of the formatting work for you to be in accordance with ESLint. Run the following to autoformat a file:
+
+```shell
+yarn run prettier --write path/to/file
+```

client/.eslintrc.js

@@ -0,0 +1,39 @@
+// The env is development during local development, so it overrides all the rules to "warn"
+// The env will be undefined for GH actions or when yarn lint-staged gets fired during pre-commit hooks,
+// so we can still catch any violations there
+const env = process.env.NODE_ENV;
+
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ['react-app', 'react-app/jest', 'eslint:recommended'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'import/no-unused-modules': 'off',
+    '@typescript-eslint/no-unused-vars':
+      env === 'development' ? 'warn' : 'error',
+    'no-unused-vars': env === 'development' ? 'warn' : 'error',
+  },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': [
+          env === 'development' ? 'warn' : 'error',
+          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+        ],
+      },
+    },
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        'no-unused-vars': [
+          env === 'development' ? 'warn' : 'error',
+          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+        ],
+      },
+    },
+  ],
+};

client/.husky/pre-commit

@@ -0,0 +1 @@
+npm run pre-commit

client/.pre-commit-config.yaml

@@ -0,0 +1,21 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.5.0
+    hooks:
+      - id: check-added-large-files
+      - id: detect-private-key
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+  - repo: local
+    hooks:
+      - id: lint-staged
+        name: lint-staged
+        entry: >
+          bash -c '
+            cd client/src || exit 1
+            yarn lint-staged
+          '
+        language: system
+        files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx

client/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
     "@apollo/client": "^3.4.10",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -31,6 +30,7 @@
     "graphql-request": "^3.7.0",
     "graphql-tag": "^2.12.6",
     "js-yaml": "^4.1.0",
+    "lint-staged": "^15.2.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.1.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -49,10 +49,11 @@
   },
   "scripts": {
     "start": "env-cmd -f ./.env.local react-scripts start",
-    "build": "react-scripts build",
+    "build": "npm run lint && react-scripts build",
     "test": "jest",
     "eject": "react-scripts eject",
-    "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore",
+    "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore --config .eslintrc.js",
+    "lint:warn": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"",
     "prettier-check": "prettier -c --ignore-path .gitignore \"**/*.+(js|json|ts|tsx)\"",
     "format": "yarn run prettier -- --write",
@@ -104,7 +105,66 @@
     ]
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "env": {
+      "browser": true,
+      "es6": true
+    },
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "import/no-unused-modules": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
+      "no-unused-vars": "warn"
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts",
+          "**/*.tsx"
+        ],
+        "rules": {
+          "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+              "vars": "all",
+              "args": "after-used",
+              "ignoreRestSiblings": true
+            }
+          ]
+        }
+      },
+      {
+        "files": [
+          "**/*.js",
+          "**/*.jsx"
+        ],
+        "rules": {
+          "no-unused-vars": [
+            "warn",
+            {
+              "vars": "all",
+              "args": "after-used",
+              "ignoreRestSiblings": true
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "yarn lint",
+      "yarn prettier --write"
+    ]
   },
   "prettier": {
     "singleQuote": true

client/src/components/About/InteractionClaimTypes/TypesTable.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useGetInteractionClaimTypes } from 'hooks/queries/useGetInteractionClaimTypes';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';

client/src/components/Browse/Categories/BrowseCategories.scss

@@ -5,40 +5,4 @@
   .category-list {
     flex: 1;
   }
-
-  .ant-collapse-content {
-    .ant-collapse-content-box {
-      padding: 0px !important;
-    }
-  }
-
-  .ant-table-wrapper {
-    background-color: var(--background-light) !important;
-  }
-
-  .ant-table-pagination .ant-pagination {
-    margin: 8px 0 !important;
-  }
-
-  .ant-table-container table > thead > tr > th {
-    background-color: var(--background-light);
-  }
-}
-
-.ant-checkbox-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.ant-checkbox-group-item,
-.ant-checkbox-wrapper {
-  color: var(--text-content);
-}
-
-.ant-collapse {
-  background-color: var(--background-content);
-
-  .ant-collapse-header {
-    color: var(--text-content) !important;
-  }
 }

client/src/components/Browse/Categories/BrowseCategories.tsx

@@ -138,7 +138,7 @@ export const BrowseCategories: React.FC = () => {
         {renderedCategories?.map((cat: any, index: number) => {
           if (cat.geneCount) {
             return (
-              <Accordion>
+              <Accordion key={index}>
                 <AccordionSummary
                   style={{ padding: '0 10px' }}
                   expandIcon={<ExpandMoreIcon />}

client/src/components/Browse/Sources/BrowseSources.tsx

@@ -128,7 +128,7 @@ export const BrowseSources = () => {
           </Box>
           <Box className="source-section">
             <b>License: </b>
-            <a href={src.licenseLink} target="_blank">
+            <a href={src.licenseLink} target="_blank" rel="noreferrer">
               {src.license}
             </a>
           </Box>

client/src/components/Drug/DrugCharts/DirectionalityDrug.tsx

@@ -37,8 +37,6 @@ export const DirectionalityDrug: React.FC<Props> = ({ data }) => {
     responsive: true,
   };
 
-  const labels = ['Activating', 'Inhibiting', 'N/A'];
-
   useEffect(() => {
     let countCopy = [0, 0, 0];
     data?.forEach((drug: any) => {

client/src/components/Drug/DrugRecord/DrugRecord.tsx

@@ -17,7 +17,7 @@ import TableCell from '@mui/material/TableCell';
 import Table from '@mui/material/Table';
 
 // components
-import { Alert, LinearProgress, Link } from '@mui/material';
+import { LinearProgress, Link } from '@mui/material';
 import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
 import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
 import { generateXrefLink } from 'utils/generateXrefLink';
@@ -277,11 +277,6 @@ export const DrugRecord: React.FC = () => {
       </Box>
     </Box>
   ) : (
-    <Box p={2}>
-      <Alert severity="error">
-        We could not find any results for this drug.
-      </Alert>
-      <NotFoundError />
-    </Box>
+    <NotFoundError errorMessage="We could not find any results for this drug." />
   );
 };