Add example

galaxyproject · Aug 22, 2024 · 8fe7a2c · 8fe7a2c
1 parent 0aeecbf
commit 8fe7a2c
Show file tree

Hide file tree

Showing 15 changed files with 268 additions and 0 deletions.
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="charts.svg" sizes="any" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Galaxy Charts</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,24 @@
+{
+    "name": "galaxy-starter-kit",
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "prettier": "prettier --write 'src/**/*.vue' 'src/**/*.js' '*.js' 'package.json'"
+    },
+    "dependencies": {
+        "galaxy-charts": "^0.0.2",
+        "vue": "^3.4.31"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.5",
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.40",
+        "prettier": "^3.3.3",
+        "tailwindcss": "^3.4.7",
+        "typescript": "^5.5.4",
+        "vite": "^5.3.4"
+    }
+}
diff --git a/example/postcss.config.js b/example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/example/prettier.config.js b/example/prettier.config.js
@@ -0,0 +1,5 @@
+export default {
+    tabWidth: 4,
+    printWidth: 120,
+    bracketSameLine: true,
+};
diff --git a/example/public/galaxy-charts.svg b/example/public/galaxy-charts.svg
diff --git a/example/public/galaxy-charts.txt b/example/public/galaxy-charts.txt
@@ -0,0 +1,21 @@
+#	Hydrophobicity	Membrane	Flexibility	Volume	Buried	Helix	Beta
+Alanine	0.61	1.56	0.357	52.6	91.5	1.42	0.83
+Arginine	0.6	0.45	0.529	109.1	202	0.98	0.93
+Asparagine	0.06	0.27	0.463	75.7	135.2	0.67	0.89
+Aspartic	0.46	0.14	0.511	68.4	124.5	1.01	0.54
+Cysteine	1.07	1.23	0.346	68.3	117.7	0.7	1.19
+Glutamine	0	0.51	0.493	89.7	161.1	1.11	1.1
+Glutamic	0.47	0.23	0.497	84.7	155.1	1.51	0.37
+Glycine	0.07	0.62	0.544	36.3	66.4	0.57	0.75
+Histidine	0.61	0.29	0.323	91.9	167.3	1	0.87
+Isoleucine	2.22	1.67	0.462	102	168.8	1.08	1.6
+Leucine	1.53	2.93	0.365	102	167.9	1.21	1.3
+Lysine	1.15	0.15	0.466	105.1	171.3	1.16	0.74
+Methionine	1.18	2.96	0.295	97.7	170.8	1.45	1.05
+Phenylalanine	2.02	2.03	0.314	113.9	203.4	1.13	1.38
+Proline	1.95	0.76	0.509	73.6	129.3	0.57	0.55
+Serine	0.05	0.81	0.507	54.9	99.1	0.77	0.75
+Threonine	0.05	0.91	0.444	71.2	122.1	0.83	1.19
+Tryptophan	2.65	1.08	0.305	135.4	237.6	1.08	1.37
+Tyrosine	1.88	0.68	0.42	116.2	203.6	0.69	1.47
+Valine	1.32	1.14	0.386	85.1	141.7	1.06	1.7
diff --git a/example/public/galaxy-charts.xml b/example/public/galaxy-charts.xml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="Test Environment" logo="galaxy-charts.svg">
+    <description>Welcome to Galaxy Charts.</description>
+    <specs>
+        <type>spec_type</type>
+    </specs>
+    <tracks>
+        <input>
+            <label>Track: Color</label>
+            <name>track_color</name>
+            <type>color</type>
+        </input>
+        <input>
+            <label>Track: Text</label>
+            <name>track_text</name>
+            <type>text</type>
+            <placeholder>Placeholder</placeholder>
+            <value>Text</value>
+        </input>
+        <input>
+            <name>track_column_0</name>
+            <label>Track: Column (Auto, Text)</label>
+            <type>data_column</type>
+            <is_auto>true</is_auto>
+            <is_text>true</is_text>
+        </input>
+        <input>
+            <name>track_column_1</name>
+            <label>Track: Column (Number)</label>
+            <type>data_column</type>
+            <is_number>true</is_number>
+        </input>
+    </tracks>
+    <settings>
+        <input>
+            <label>Setting: Text</label>
+            <name>setting_text</name>
+            <type>text</type>
+            <optional>true</optional>
+        </input>
+        <input>
+            <label>Setting: Boolean</label>
+            <name>setting_boolean</name>
+            <type>boolean</type>
+            <optional>true</optional>
+        </input>
+    </settings>
+</visualization>
diff --git a/example/server.config.js b/example/server.config.js
@@ -0,0 +1,3 @@
+export default {
+    GALAXY_API: "http://127.0.0.1:8081/api",
+};
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { ViewPort } from "galaxy-charts";
+import Plugin from "@/Plugin.vue";
+const config = {
+    dataset_id: "dataset_id",
+    dataset_url: "test.txt",
+    settings: {
+        setting_text: "my test text",
+        setting_boolean: true,
+    },
+};
+</script>
+
+<template>
+    <ViewPort :config="config" xml="galaxy-charts.xml">
+        <template #default="{ datasetId, datasetUrl, root, settings, specs, tracks }">
+            <Plugin
+                :dataset-id="datasetId"
+                :dataset-url="datasetUrl"
+                :root="root"
+                :settings="settings"
+                :specs="specs"
+                :tracks="tracks" />
+        </template>
+    </ViewPort>
+</template>
diff --git a/example/src/Plugin.vue b/example/src/Plugin.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { onMounted, ref, watch } from "vue";
+
+const props = defineProps({
+    datasetId: String,
+    datasetUrl: String,
+    root: String,
+    settings: Object,
+    specs: Object,
+    tracks: Array,
+});
+
+const viewport = ref(null);
+
+function render() {
+    /** Place your render function here! */
+}
+
+onMounted(() => {
+    render();
+});
+
+watch(
+    () => props,
+    () => render(),
+    { deep: true },
+);
+</script>
+
+<template>
+    <div ref="viewport" class="h-screen p-4">
+        <div class="text-lg py-4">Welcome to Galaxy Charts</div>
+        <div>Use the form on the right to specify settings, these are then parsed to your plugin component!</div>
+        <div>
+            e.g. `Setting:Text` is: <span class="font-bold">{{ props.settings.setting_text }}</span
+            >, and `Setting:Boolean` is: <span class="font-bold">{{ props.settings.setting_boolean }}</span
+            >.
+        </div>
+        <div class="py-4">
+            <span>You have also provided details for the following tracks:</span>
+            <div v-for="(track, index) of props.tracks">
+                <span class="mx-2">Track No. {{ index + 1 }}:</span>
+                <span class="font-bold">'{{ track.track_text }}' and </span>
+                <span class="font-bold">{{ track.track_color || "no color selected" }}.</span>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/example/src/main.js b/example/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/example/src/style.css b/example/src/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/example/tailwind.config.js b/example/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ["./src/**/*.vue"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
diff --git a/example/vite.config.js b/example/vite.config.js
@@ -0,0 +1,44 @@
+import { defineConfig } from "vite";
+import tailwindcss from "tailwindcss";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import serverConfig from "./server.config";
+
+// determine server route
+let GALAXY_API = "";
+if (process.env.GALAXY_API) {
+    GALAXY_API = process.env.GALAXY_API;
+} else if (serverConfig.GALAXY_API) {
+    GALAXY_API = serverConfig.GALAXY_API;
+} else {
+    console.warn("GALAXY_API not available. Please provide as environment variable or specify in 'server.config'.");
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue(), tailwindcss()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "src"),
+        },
+    },
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks: () => "app.js",
+                entryFileNames: "assets/[name].js",
+                chunkFileNames: "assets/[name].js",
+                assetFileNames: "assets/[name][extname]",
+            },
+        },
+    },
+    server: {
+        proxy: {
+            "/api": {
+                target: GALAXY_API,
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/api/, ""),
+            },
+        },
+    },
+});