v1.0.2

cmdcolin · cmdcolin · commit 75eec23b6f44 · 2025-02-23T14:48:43.000-05:00
diff --git a/README.md b/README.md
@@ -7,15 +7,6 @@
 [npm-badge]: https://img.shields.io/npm/v/genomefeatures.png?style=flat-square
 [npm]: https://www.npmjs.com/package/genomefeatures
 
-# Instructions
-
-```bash
-git clone git@github.com:GMOD/genomefeatures
-yarn
-yarn dev # vite demo
-yarn storybook # storybook examples
-```
-
 # Screenshot
 
 ![Example 1](images/ExampleIsoform1.png)
@@ -26,6 +17,17 @@ Demo https://gmod.org/genomefeatures/
 
 Storybook https://gmod.org/genomefeatures/storybook
 
+# Instructions
+
+Install from NPM
+
+```bash
+yarn add genomefeatures
+```
+
+Or see see [example/index.html](example/index.html) for CDN import style usage,
+e.g.
+
 ## Loading data
 
 ### Legacy access pattern - Apollo REST API
@@ -141,6 +143,20 @@ And then in your HTML
 <svg id="svgelement"></svg>
 ```
 
+## Developers
+
+```bash
+git clone git@github.com:GMOD/genomefeatures
+yarn add genomefeatures
+yarn dev # vite demo
+yarn storybook # storybook examples
+```
+
 ## Notes
 
-Can be run in ReactJS, VueJS, VanillaJS
+Originally called https://github.com/GMOD/GenomeFeatureComponent
+
+Created by Nathan Dunn (@nathandunn), used by Alliance of Genome Resources
+
+Updated in 2025 by Colin Diesh (@cmdcolin) to add ability to fetch from static
+files
diff --git a/example/index.html b/example/index.html
@@ -4,20 +4,28 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Genome Feature Component Example</title>
-    <!-- Import the UMD bundle from unpkg -->
-    <script src="https://unpkg.com/genomefeatures/dist/genomefeatures.umd.cjs"></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/genomefeatures/dist/genomefeatures.css"
+    />
   </head>
   <body>
     <svg id="svgelement"></svg>
 
     <script>
       async function initializeViewer() {
+        // note the CSS import in the header as well
+
+        // we use esm import here. alternatively, you can import as script tag with
+        // https://unpkg.com/genomefeatures/dist/genomefeatures.umd.cjs and access window.GenomeFeatureViewer
         const {
           parseLocString,
           fetchNCListData,
           fetchTabixVcfData,
           GenomeFeatureViewer,
-        } = window.GenomeFeatureViewer
+        } = await import(
+          'https://unpkg.com/genomefeatures/dist/genomefeatures.js'
+        )
 
         const locString = '2L:130639..135911'
         const genome = 'fly'
@@ -56,7 +64,6 @@
         )
       }
 
-      // Initialize when the page loads
       window.addEventListener('load', initializeViewer)
     </script>
   </body>
diff --git a/index.html b/index.html
@@ -14,8 +14,8 @@ <h1>Genome features</h1>
         >https://github.com/GMOD/genomefeatures</a
       >
       for more info. See also our storybook at
-      <a href="https://gmod.org/genomefeatures/storybook-static"
-        >https://gmod.org/genomefeatures/storybook-static</a
+      <a href="https://gmod.org/genomefeatures/storybook"
+        >https://gmod.org/genomefeatures/storybook</a
       >
     </p>
     <div class="viewer-border">

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,8 @@ <h1>Genome features</h1>`
`14`	`14`	`>https://github.com/GMOD/genomefeatures</a`
`15`	`15`	`>`
`16`	`16`	`for more info. See also our storybook at`
`17`		`- <a href="https://gmod.org/genomefeatures/storybook-static"`
`18`		`- >https://gmod.org/genomefeatures/storybook-static</a`
	`17`	`+ <a href="https://gmod.org/genomefeatures/storybook"`
	`18`	`+ >https://gmod.org/genomefeatures/storybook</a`
`19`	`19`	`>`
`20`	`20`	`</p>`
`21`	`21`	`<div class="viewer-border">`