Merge pull request #57 from ScilifelabDataCentre/dev

Merge dev to main for new release

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+build
+.dockerignore
+**/.git
+**/.DS_Store
+**/node_modules

.github/workflows/publish_container_image.yml

@@ -0,0 +1,54 @@
+name: Build and push precision medicine portal container image
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+jobs:
+  build_push_container:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Run docker/setup-qemu-action
+        uses: docker/setup-qemu-action@v3
+      - name: Run docker/setup-buildx-action
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      - name: List available platforms
+        run: echo ${{ steps.buildx.outputs.platforms }}
+      - name: Run docker/login-action
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Run docker/metadata-action
+        id: metadata_action_id
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/ScilifelabDataCentre/precision-medicine-portal-frontend
+          flavor: |
+            latest=auto
+          tags: |
+            type=sha,format=long
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+          labels: |
+            org.opencontainers.image.title=precision-medicine-portal-frontend
+            org.opencontainers.image.description=precision medicine web portal frontend
+            org.opencontainers.image.url=${{ github.event.repository.html_url }}
+            org.opencontainers.image.source=${{ github.event.repository.html_url }}
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.metadata_action_id.outputs.tags }}
+          labels: ${{ steps.metadata_action_id.outputs.labels }}

.github/workflows/snyk-scan.yml

@@ -0,0 +1,36 @@
+# Snyk: Scan for for vulnerabilities in your Python code and dependencies
+# The results are then uploaded to GitHub Security Code Scanning
+# https://github.com/snyk/actions/
+---
+    name: Snyk
+
+    on:
+      push:
+        branches: ["dev", main]
+      pull_request:
+        # The branches below must be a subset of the branches above
+        branches: ["dev"]
+      schedule:
+        - cron: "0 7,13 * * *"
+
+    jobs:
+      snyk:
+        permissions:
+          contents: read
+          security-events: write
+        runs-on: ubuntu-latest
+        steps:
+          - uses: actions/checkout@master
+          - name: Run Snyk to check for vulnerabilities
+            uses: snyk/actions/node@master
+            continue-on-error: true # To make sure that SARIF upload gets called
+            env:
+              SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+            with:
+              command: code test
+              args: --sarif-file-output=snyk.sarif
+          - name: Upload result to GitHub Code Scanning
+            uses: github/codeql-action/upload-sarif@v2
+            with:
+              sarif_file: snyk.sarif
+              category: snyk

.github/workflows/trivy-scan.yml

@@ -0,0 +1,37 @@
+# Trivy: Scan of current branch
+# Trivy is a comprehensive and versatile security scanner.
+# Trivy has scanners that look for security issues, and targets where it can find those issues.
+# https://github.com/aquasecurity/trivy
+# ---------------------------------
+    name: Trivy - branch scan
+    on:
+      pull_request:
+      push:
+        branches:
+          - main
+          - dev
+    jobs:
+      scan:
+        permissions:
+          contents: read
+          security-events: write
+        name: Build
+        runs-on: ubuntu-latest
+        steps:
+          - name: Checkout code
+            uses: actions/checkout@v3
+
+          - name: Run Trivy vulnerability scanner
+            uses: aquasecurity/trivy-action@master
+            with:
+              scan-type: "fs"
+              ignore-unfixed: true
+              format: "sarif"
+              output: "trivy-results.sarif"
+              severity: "CRITICAL,HIGH"
+
+          - name: Upload Trivy scan results to GitHub Security tab
+            uses: github/codeql-action/upload-sarif@v2
+            with:
+              sarif_file: "trivy-results.sarif"
+              category: trivy

.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+.vscode/*
+
+# dependencies
+/pmp-frontend-app/node_modules
+
+# misc
+/pmp-frontend-app/.DS_Store
+
+/pmp-frontend-app/npm-debug.log*
+pmp-frontend-app/public/.DS_Store
+
+/react-app

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:21-alpine as builder
+# Add a work directory
+WORKDIR /app
+RUN chown -R node:node /app
+USER node
+# Cache and Install dependencies
+COPY ./pmp-frontend-app/package.json .
+COPY ./pmp-frontend-app/package-lock.json .
+RUN npm ci
+# Copy app files
+COPY ./pmp-frontend-app/ .
+RUN npm run build
+
+FROM nginxinc/nginx-unprivileged:stable-alpine
+USER 101
+COPY ./conf/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/dist /usr/share/nginx/html
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,2 +1,140 @@
 # precision-medicine-portal-frontend
 React project for the frontend of the Precision Medicine Portal by DC Data Science Node
+
+- [Introduction](#introduction)
+- [Development](#development)
+    - [Step 1: Clone the repository](#step-1-clone-the-repository)
+    - [Step 2: Create a branch and develop](#step-2-create-a-branch-and-develop)
+    - [Step 3: Make a pull request](#step-3-make-a-pull-request)
+
+## Introduction
+
+The [Data Driven Life Science](https://www.scilifelab.se/data-driven/) (DDLS) initiative has appointed four [Data Science Nodes](https://www.scilifelab.se/news/ddls-data-science-nodes-to-be-launched/) (DSNs) to serve as database, data and bioinformatics support for data driven research in life science. This repository contains the code for the frontend of a Precision Medicine Portal by the Precision Medicine DSN, which is hosted at [Karolinska Institutet](https://ki.se/en) and [SciLifeLab](https://www.scilifelab.se).
+
+The short term aim of this portal is to host content related to precision medicine as a starting point for the project.
+
+
+### Step 1: Clone the Repository
+
+#### Git setup
+
+Clone the repository to your machine:
+
+```bash
+git clone https://github.com/ScilifelabDataCentre/precision-medicine-portal-frontend.git
+```
+
+Fetch changes at any time from this remote:
+
+```bash
+git pull upstream dev
+```
+
+The project is set up using npm. If you want to run the project locally, install npm and use it to run the available scripts:
+
+## Available Scripts
+
+Note that you need to be in the "react-app" directory. In this directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+You will see that a local development server starts running. You can access the web page by opening a web browser and visiting the URI "localhost:5000". To stop the server press CTRL+C in the terminal.
+
+
+#### Docker
+
+You can use the provided Dockerfile to build and run a container.
+
+
+### Step 2: Create a branch and develop
+
+Note that commits need to be signed as per SciLifeLab policy. There are many different ways to sign github commits and how to set it up may vary based on your operating system. An example of how to set it up for MacOS can be seen here: 
+
+https://gist.github.com/troyfontaine/18c9146295168ee9ca2b30c00bd1b41e
+
+To create a new branch and start developing in it:
+
+```bash
+git branch my_branch
+git checkout my_branch
+```
+
+After doing this you can make any changes you want. You must then either add all changed files or specific changed files to your commit:
+
+```bash
+git add -A
+```
+
+or
+
+```bash
+git add my_changed_file
+```
+
+You can then commit and push to your branch:
+
+(NOTE: DO NOT FORGET TO SIGN YOUR COMMITS, by policy only signed commits can be merged into the main branches.)
+
+```bash
+git commit -S -m "My commit"
+git push origin my_branch
+```
+
+The code is now in my_branch in the repository, but you it does not get merged into the main branches without being reviewed as a pull request.
+
+
+### Step 3: Make a pull request
+
+Once you're finished with your edits and they are committed and pushed to your branch, it's time to open a pull request.
+
+You can find full documentation on the [GitHub help website](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests), however in short:
+
+- Visit the dev repository: [https://github.com/ScilifelabDataCentre/precision-medicine-portal-frontend](https://github.com/ScilifelabDataCentre/precision-medicine-portal-frontend)
+- Find the branch my_branch that you created and pushed to
+- Click the button that reads _"New Pull Request"_
+- Add/change title as well as a description of what you've done
+- Add reviewers from the organization to review your pull request
+- Click Create Pull Request
+
+Once created, a member of the website team will review your changes.
+Once approved, they will be merged and deployed.
+
+## How to get help
+
+If in doubt, you can ask for help by emailing [[email protected]](mailto:[email protected]).
+
+## Credits
+
+The portal was built by the DDLS Precision Medicine Data Science Node with colleagues at SciLifeLab.
+

conf/nginx.conf

@@ -0,0 +1,8 @@
+server {
+    listen 8080;
+    location / {
+      root   /usr/share/nginx/html;
+      index  index.html index.htm;
+      try_files $uri $uri/ /index.html;
+    } 
+  }

pmp-frontend-app/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

pmp-frontend-app/README.md

@@ -0,0 +1,30 @@
+# 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'],
+    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

pmp-frontend-app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Precision Medicine Portal</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>