Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rebuild frontend #271

Merged
merged 6 commits into from
Nov 18, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .github/workflows/eslint.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
name: ESLint
on: [push, pull_request]
jobs:
build:
defaults:
run:
working-directory: web/src/main/javascript
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v2
with:
node-version: 20.12.2
- name: Install node modules
run: npm install
- name: Run ESLint
run: npm run lint
19 changes: 19 additions & 0 deletions .github/workflows/github-ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
name: Frontend CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
defaults:
run:
working-directory: web/src/main/javascript
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v2
with:
node-version: 20.12.2
- name: Install node modules
run: npm install
- name: Build frontend
run: npm run build
- name: Run unit tests
run: npm test
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,33 @@ Read about our latest developments on our [News page](/docs/News.md).

Users may submit their OncoTree related questions to the [OncoTree Users Google Group](https://groups.google.com/forum/#!forum/oncotree-users).

## Frontend Development

All of the frontend code can be found at [/web/src/main/javascript](/web/src/main/javascript). The only configuration needed is to set `ONCOTREE_BASE_URL`
in [constants.ts](/web/src/main/javascript/src/shared/constants.ts). During development, it may be easiest to simply point to the public instance of
[OncoTree](https://oncotree.mskcc.org).

Make sure you are using node version >=20.12.2.

To begin development run:
```
cd ./web/src/main/javascript
npm install && npm run dev
```

## Building the Frotend

The frontend must be transpiled to static assets before bundling into a jar. To do this follow the following steps:

1. Ensure that the correct `ONCOTREE_BASE_URL` is specified in [constants.ts](/web/src/main/javascript/src/shared/constants.ts).
2. Run the following:

```
cd ./web/src/main/javascript
npm install && npm run build
```
3. The frontend assets are now up to date, and you are ready to bundle the jar.

## OncoTree Mapping Tool

The OncoTree Mapping Tool was developed to facilitate the mapping of OncoTree codes between different OncoTree release versions. To learn more about the OncoTree Converter tool, please refer to the [OncoTree Mapping documentation](/docs/OncoTree-Mapping-Tool.md).
Expand Down
19 changes: 19 additions & 0 deletions web/src/main/javascript/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
'prettier'
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
26 changes: 26 additions & 0 deletions web/src/main/javascript/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local
vitepress/.vitepress/cache
.eslintcache

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
1 change: 1 addition & 0 deletions web/src/main/javascript/.husky/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
_
1 change: 1 addition & 0 deletions web/src/main/javascript/.husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx lint-staged
36 changes: 36 additions & 0 deletions web/src/main/javascript/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Running locally

```bash
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment as Manda's ^

npm run dev
```

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: __dirname,
},
}
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
13 changes: 13 additions & 0 deletions web/src/main/javascript/docs/about.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# About

## About OncoTree

OncoTree is a comprehensive, community-led cancer classification system that adapts to the evolving demands of precision oncology. Designed to classify cancers by both histological and molecular traits, it provides a structured framework to complement the clinical decision-making processes. The platform, which is open-source and publicly accessible, is governed by a diverse committee of oncologists, pathologists, and scientists. This multidisciplinary oversight ensures OncoTree remains relevant, incorporating new cancer types and research advancements in real time to support clinical decision-making and research applications.

## Curation Process Overview

![Overview of the curation process in OncoTree](../src/assets/curation_process.png){class="curation-process-overview-image"}

## Useful Links
- Please send any feedback or questions to the [OncoTree Users Google Group](https://groups.google.com/g/oncotree-users).
- When using OncoTree, please cite: [Kundra et al., JCO Clinical Cancer Informatics 2021](https://ascopubs.org/doi/10.1200/CCI.20.00108).
Loading
Loading