rebuild frontend

README.md

@@ -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:
+```bash
+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:
+
+    ```bash
+    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).

web/src/main/javascript/.eslintrc.cjs

@@ -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 },
+    ],
+  },
+}

web/src/main/javascript/.gitignore

@@ -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?

web/src/main/javascript/.husky/.gitignore

@@ -0,0 +1 @@
+_

web/src/main/javascript/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

web/src/main/javascript/Dockerfile

@@ -0,0 +1,29 @@
+# Stage 1: Build the application
+FROM node:20 AS build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application using Nginx
+FROM nginx:alpine
+
+# Copy the built files from the build stage to Nginx's serve directory
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

web/src/main/javascript/README.md

@@ -0,0 +1,36 @@
+# Running locally
+
+```bash
+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

web/src/main/javascript/docs/about.md

@@ -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).