chore: re-add web-app

biothings · Oct 20, 2023 · 873b32d · 873b32d
1 parent ec20ba8
commit 873b32d
Show file tree

Hide file tree

Showing 53 changed files with 3,545 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -129,6 +129,9 @@ packages/*
 # Explicit allow packages.txt
 !packages/packages.txt
 
+# Temporary: allow web-app until new web-app integrated
+!packages/web-app
+
 # .vscode generally
 .vscode/*
 

diff --git a/packages/web-app/.eslintrc.cjs b/packages/web-app/.eslintrc.cjs
@@ -0,0 +1,14 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+};
diff --git a/packages/web-app/.gitignore b/packages/web-app/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/web-app/.vscode/extensions.json b/packages/web-app/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/packages/web-app/README.md b/packages/web-app/README.md
@@ -0,0 +1,52 @@
+# BTE Web-app
+
+## Stack
+
+- [Vue 3.2](https://vuejs.org/)
+- [Pinia 2.0](https://pinia.vuejs.org/)
+- [Router 4.1](https://router.vuejs.org/)
+- [Tailwind CSS 3.1](https://tailwindcss.com/)
+- eslint 8.5
+- prettier 2.5
+
+Additionally I added [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader) for easier SVG imports.
+
+## Install & Requirements
+
+Node v.17>= 
+
+```
+npm i
+```
+
+## Run / Develop
+
+```
+
+npm run dev
+
+```
+
+## Build
+
+```
+
+npm run build
+
+```
+
+## Preview
+
+```
+
+npm run preview
+
+```
+
+## Lint
+
+```
+
+npm run lint
+
+```
diff --git a/packages/web-app/index.html b/packages/web-app/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/bte.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BioThings Explorer</title>
+  </head>
+  <body class="bg-gradient-to-b from-black to-stone-700">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/web-app/package.json b/packages/web-app/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "@marcodarko/btewebapp",
+  "description": "Vite, Vuex, Vue Router & Tailwind CSS.",
+  "version": "1.0.8",
+  "scripts": {
+    "dev": "vite",
+    "postinstall": "pnpm run build",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.4.2",
+    "@codemirror/commands": "^6.3.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.9.1",
+    "@codemirror/state": "^6.3.1",
+    "@codemirror/view": "^6.9.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "axios": "^1.3.4",
+    "codemirror": "^6.0.1",
+    "cytoscape": "^3.23.0",
+    "cytoscape-popper": "^2.0.0",
+    "moment": "^2.29.4",
+    "pinia": "^2.0.22",
+    "renderjson": "^1.4.0",
+    "tippy.js": "^6.3.7",
+    "vue": "^3.2.39",
+    "vue-router": "^4.1.5",
+    "zdog": "^1.1.3"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "autoprefixer": "^10.4.11",
+    "cssnano": "^5.1.13",
+    "eslint": "^8.23.1",
+    "eslint-plugin-vue": "^9.5.1",
+    "postcss": "^8.4.16",
+    "postcss-import": "^15.0.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.54.9",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.2.7",
+    "vite-svg-loader": "^3.6.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuejs",
+    "vue3js",
+    "template",
+    "router",
+    "vuerouter",
+    "vue-router",
+    "tailwind",
+    "tailwindcss",
+    "tailwind-css",
+    "pinia",
+    "svg"
+  ]
+}
diff --git a/packages/web-app/postcss.config.js b/packages/web-app/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
+  },
+};
diff --git a/packages/web-app/public/bte.svg b/packages/web-app/public/bte.svg
diff --git a/packages/web-app/src/App.vue b/packages/web-app/src/App.vue
@@ -0,0 +1,42 @@
+<script setup>
+    import LoadingLogo from './components/LoadingLogo.vue'
+    import { useMainStore } from './stores/general';
+    import { delegate } from 'tippy.js';
+    import { onMounted } from 'vue'
+
+    let store = useMainStore();
+    var currentTime = new Date();
+    let year = currentTime.getFullYear();
+
+    onMounted(()=>{
+      delegate("#tippyRoot", {
+        target: "[data-tippy-content]",
+        trigger: "mouseenter",
+        allowHTML: true,
+        onShow(instance) {
+          instance.setContent(instance.reference.dataset.tippyContent);
+        },
+      });
+    });
+</script>
+
+<template>
+  <LoadingLogo v-if="store.loading" class="w-32 absolute top-[45vh] left-[45vw] z-50"></LoadingLogo>
+  <main id="tippyRoot">
+    <RouterView />
+  </main>
+  <footer class="bg-stone-900 text-stone-500 p-6 text-center text-sm min-h-[20vh] flex items-center justify-center">
+    <div class="container m-auto space-y-2">
+      <div class="flex justify-around items-center mb-2">
+        <img src="@/assets/img/nih-logo.png" width="200" alt="NIH">
+        <img src="@/assets/img/ncats-logo.png" width="200" alt="NCATS">
+      </div>
+      <p class="center-align">
+        Support for this work was provided by the <a class="link" href="https://ncats.nih.gov/" target="_blank">National Center for Advancing Translational Sciences</a>, National Institutes of Health, through the <a class="link" href="https://ncats.nih.gov/translator" target="_blank">Biomedical Data Translator program</a>, awards OT2TR003427 and OT2TR003445
+      </p>
+      <p class="center-align">
+        <b>BioThings Explorer</b> Copyright &copy; {{ year }} | <a class="link" href="https://biothings.io/" target="_blank" rel="nonopenner" >The Su/Wu Lab</a>.
+      </p>
+    </div>
+  </footer>
+</template>
diff --git a/packages/web-app/src/assets/img/biothings-explorer-128.png b/packages/web-app/src/assets/img/biothings-explorer-128.png
diff --git a/packages/web-app/src/assets/img/biothings-explorer-16.png b/packages/web-app/src/assets/img/biothings-explorer-16.png
diff --git a/packages/web-app/src/assets/img/biothings-explorer-2.png b/packages/web-app/src/assets/img/biothings-explorer-2.png