add hyphy-vision visualization

2026-09-21 13:50:20 +08:00 · 2019-08-23 10:19:39 -04:00
parent 770416dfbb
commit f1a5481316
13 changed files with 35159 additions and 0 deletions
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../visualization.dtd">
+<visualization name="HyPhy result viewer">
+  <data_sources>
+    <data_source>
+      <model_class>HistoryDatasetAssociation</model_class>
+      <test test_attr="ext" result_type="datatype">hyphy_results.json</test>
+      <to_param param_attr="id">dataset_id</to_param>
+    </data_source>
+  </data_sources>
+  <params>
+    <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+  </params>
+  <template>hyphyvision.mako</template>
+</visualization>
@@ -0,0 +1,9 @@
+window.jQuery = window.$ = $;
+window.d3 = d3;
+import 'bootstrap/dist/css/bootstrap.css';
+import 'font-awesome/css/font-awesome.css';
+const hyphyVision = require('hyphy-vision');
+require('phylotree.css');
+require('hyphy-vision.css');
+window.renderHyPhyVision = hyphyVision.renderHyPhyVision;
+window.render_branch_selection = hyphyVision.render_branch_selection ;
@@ -0,0 +1,22 @@
+{
+  "devDependencies": {
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "mini-css-extract-plugin": "^0.4.0",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.4",
+    "webpack-dev-server": "^3.1.4"
+  },
+  "dependencies": {
+    "hyphy-vision": "2.5.0-alpha.2"
+  },
+  "name": "galaxy-hyphy",
+  "version": "1.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack --mode=production"
+  }
+}
@@ -0,0 +1,52 @@
+const webpack = require('webpack'),
+  path = require('path'),
+  MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, '..', 'static')
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      d3: "d3",
+      _: "underscore"
+    }),
+    new MiniCssExtractPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      },
+      {
+        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url-loader",
+        options: { limit: 10000, mimetype: "application/font-woff" }
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url-loader",
+        options: { limit: 10000, mimetype: "application/octet-stream" }
+      },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loaders: "file-loader" },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loaders: "url-loader",
+        options: { limit: 10000, mimetype: "image/svg+xml" }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      "phylotree.css": __dirname + "/node_modules/phylotree/phylotree.css",
+      "hyphy-vision.css": __dirname + "/node_modules/hyphy-vision/dist/hyphyvision.css",
+    }
+  }
+}
@@ -0,0 +1,25 @@
+<%
+  app_root = "/static/plugins/visualizations/hyphyvision/static/"
+%>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>HyPhy-Result</title>
+
+    ${h.stylesheet_link( app_root + 'main.css' )}
+    ${h.javascript_link( app_root + 'bundle.js' )}
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/v4-shims.css">
+  </head>
+  <body>
+    <div id="hyphy-vision-root" />
+  </body>
+  <script type="text/javascript">
+    var raw_url = '${h.url_for( controller="/datasets", action="index" )}';
+    var hda_id = '${trans.security.encode_id( hda.id )}';
+    var url = raw_url + '/' + hda_id + '/display?to_ext=json';
+    renderHyPhyVision(url, "hyphy-vision-root");
+  </script>
+</html>