Merge pull request #2 from higlass/keller-mark-patch-1

WIP: zarr dependency
higlass · Apr 15, 2024 · f94e08f · f94e08f
2 parents 92f241c + 1f596fc
commit f94e08f
Show file tree

Hide file tree

Showing 16 changed files with 4,485 additions and 9,538 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 .DS_Store
 build-demo/
-build-pkg/
+build-pkg/
+dist/
diff --git a/babel.config.js b/babel.config.js
diff --git a/bundle.mjs b/bundle.mjs
@@ -0,0 +1,19 @@
+import * as esbuild from "esbuild";
+
+const env = process.env.APP_ENV || 'development';
+
+import { NodeGlobalsPolyfillPlugin as globals } from '@esbuild-plugins/node-globals-polyfill';
+import { NodeModulesPolyfillPlugin as builtins } from '@esbuild-plugins/node-modules-polyfill';
+
+esbuild.build({
+  entryPoints: ["src/index.js"],
+  target: 'es2020',
+  format: 'esm',
+  sourcemap: true,
+  bundle: true,
+  minify: env === 'production',
+  outfile: env === 'production' ? 'dist/index.min.js' : 'dist/index.js',
+  plugins: [],
+  external: ['zarrita'],
+  watch: process.env.ESBUILD_MODE === 'watch',
+});
diff --git a/src/demo/viewconfig.js → index.html b/src/demo/viewconfig.js → index.html
@@ -1,4 +1,58 @@
-const viewconfig = {
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>HiGlass Zarr Data Fetcher</title>
+  <style type="text/css">
+    .canvasjs-chart-credit {
+      display: none;
+    }
+  </style>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/higlass@1.12.4/dist/hglib.css">
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/pixi.js@5/dist/pixi.min.js"></script>
+  <script crossorigin src="https://unpkg.com/higlass@1.12.4/dist/hglib.min.js"></script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
+</head>
+<body>
+Here's some text
+<div style=""></div>
+<div style="margin: auto">
+  <div style="height: 1500px; width: 600px; border: 1px solid black;"
+       id="development-demo">
+  </div>
+</div>
+And some other text
+<div style="height: 1500px"></div>
+</body>
+<script>
+  (function (i, s, o, g, r, a, m) {
+    i['GoogleAnalyticsObject'] = r;
+    i[r] = i[r] || function () {
+        (i[r].q = i[r].q || []).push(arguments)
+      }, i[r].l = 1 * new Date();
+    a = s.createElement(o),
+      m = s.getElementsByTagName(o)[0];
+    a.async = 1;
+    a.src = g;
+    m.parentNode.insertBefore(a, m)
+  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+  ga('create', 'UA-77756807-1', 'auto');
+  ga('send', 'pageview');
+</script>
+<script type="module">
+  import register from 'higlass-register';
+  import { ZarrMultivecDataFetcher } from './dist/index.js';
+
+  register(
+    { dataFetcher: ZarrMultivecDataFetcher, config: ZarrMultivecDataFetcher.config },
+    { pluginType: "dataFetcher" }
+  );
+
+  const viewConfig = {
     "editable": true,
     "zoomFixed": false,
     "trackSourceServers": [
@@ -74,7 +128,7 @@
               "uid": "demo-bar-track",
               "data": {
                 "type": "zarr-multivec",
-                "url": "//higlass-serverless.s3.amazonaws.com/multivec/Homo_sapiens__AFF4__all.multires.zarr",
+                "url": "https://higlass-serverless.s3.amazonaws.com/multivec/Homo_sapiens__AFF4__all.multires.zarr",
                 "row": 2,
               },
               "options": {
@@ -107,7 +161,7 @@
               "uid": "demo-multivec-track",
               "data": {
                 "type": "zarr-multivec",
-                "url": "//higlass-serverless.s3.amazonaws.com/multivec/Homo_sapiens__AFF4__all.multires.zarr",
+                "url": "https://higlass-serverless.s3.amazonaws.com/multivec/Homo_sapiens__AFF4__all.multires.zarr",
               },
               "options": {
                 "labelPosition": "hidden",
@@ -165,4 +219,10 @@
     }
 };
 
-export default viewconfig;
+  window.hglib.viewer(
+    document.getElementById('development-demo'),
+    viewConfig,
+    { bounded: false },
+  );
+</script>
+</html>