hoodini-viz 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +117 -19
  2. package/dist/{3Dmol-BErntOlO.js → 3Dmol-CuZz1vAr.js} +1 -1
  3. package/dist/{data-grid-overlay-editor-5KCvQogJ.js → data-grid-overlay-editor-C2F2acq7.js} +1 -1
  4. package/dist/hoodini-viz.js +12 -9
  5. package/dist/hoodini-viz.umd.js +5 -5
  6. package/dist/{index-CgEGAnfh.js → index-DoUR8EOn.js} +3912 -3888
  7. package/dist/{number-overlay-editor-CnrZ12Mu.js → number-overlay-editor-Do9rKBrK.js} +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -43,7 +43,8 @@ A **virtualized data table** lets you browse and filter millions of genes, domai
43
43
 
44
44
  <br/>
45
45
 
46
- > [!TIP]
46
+ > 💡 **Tip**
47
+ >
47
48
  > **Looking to visualize your own genomes?** Use [**Hoodini**](https://github.com/pentamorfico/hoodini) — the comparative genomics toolkit that fetches assemblies from NCBI, extracts gene neighborhoods, runs protein/nucleotide comparisons, annotates defense systems, builds trees, and generates ready-to-use visualizations. This library is the visualization engine that powers Hoodini's output.
48
49
 
49
50
  ---
@@ -66,21 +67,23 @@ npm install hoodini-viz
66
67
  **CDN**
67
68
 
68
69
  ```html
69
- <script src="https://unpkg.com/hoodini-viz"></script>
70
70
  <link href="https://unpkg.com/hoodini-viz/dist/hoodini-viz.css" rel="stylesheet">
71
+ <script src="https://unpkg.com/hoodini-viz/dist/hoodini-viz.umd.js"></script>
71
72
  ```
72
73
 
73
- > [!IMPORTANT]
74
- > The CSS uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers). Avoid adding global reset styles like `* { padding: 0 }` without wrapping them in a layer, as unlayered styles override layered ones.
75
74
 
76
75
  </td>
76
+
77
77
  </tr>
78
78
  </table>
79
79
 
80
+
80
81
  ---
81
82
 
82
83
  ## 🚀 Usage
83
84
 
85
+ ### NPM / React
86
+
84
87
  <details open>
85
88
  <summary><strong>Full Dashboard</strong> — includes sidebar, data loading, controls</summary>
86
89
 
@@ -90,24 +93,33 @@ npm install hoodini-viz
90
93
  import { HoodiniDashboard } from 'hoodini-viz';
91
94
  import 'hoodini-viz/style.css';
92
95
 
93
- function App() {
94
- return (
95
- <HoodiniDashboard
96
- dataPaths={{
97
- gffParquet: '/data/genes.parquet',
98
- hoodsParquet: '/data/hoods.parquet',
99
- newick: '/data/tree.nwk',
100
- proteinLinksParquet: '/data/links.parquet',
101
- }}
102
- />
103
- );
104
- }
96
+ // With Parquet (recommended - 3-10x faster)
97
+ <HoodiniDashboard
98
+ dataPaths={{
99
+ newick: '/data/tree.nwk',
100
+ gffParquet: '/data/genes.parquet',
101
+ hoodsParquet: '/data/hoods.parquet',
102
+ proteinLinksParquet: '/data/links.parquet',
103
+ }}
104
+ />
105
+ ```
106
+
107
+ ```tsx
108
+ // With TSV
109
+ <HoodiniDashboard
110
+ dataPaths={{
111
+ newick: '/data/tree.nwk',
112
+ gff: '/data/genes.tsv',
113
+ hoods: '/data/hoods.tsv',
114
+ proteinLinks: '/data/links.tsv',
115
+ }}
116
+ />
105
117
  ```
106
118
 
107
119
  </details>
108
120
 
109
121
  <details>
110
- <summary><strong>Core Component</strong> — bring your own UI and data loading</summary>
122
+ <summary><strong>Core Visualization</strong> — bring your own UI and data loading</summary>
111
123
 
112
124
  <br/>
113
125
 
@@ -128,12 +140,98 @@ import { HoodiniViz } from 'hoodini-viz';
128
140
 
129
141
  </details>
130
142
 
143
+ ### CDN / Standalone
144
+
145
+ <details open>
146
+ <summary><strong>Full Dashboard (recommended)</strong> — zero dependencies, just HTML</summary>
147
+
148
+ <br/>
149
+
150
+ ```html
151
+ <!DOCTYPE html>
152
+ <html>
153
+ <head>
154
+ <link rel="stylesheet" href="https://unpkg.com/hoodini-viz/dist/hoodini-viz.css">
155
+ </head>
156
+ <body>
157
+ <div id="root"></div>
158
+ <script src="https://unpkg.com/hoodini-viz/dist/hoodini-viz.umd.js"></script>
159
+ <script>
160
+ // With Parquet (recommended - 3-10x faster)
161
+ HoodiniViz.createDashboard({
162
+ container: 'root',
163
+ dataPaths: {
164
+ newick: 'https://example.com/tree.nwk',
165
+ gffParquet: 'https://example.com/genes.parquet',
166
+ hoodsParquet: 'https://example.com/hoods.parquet',
167
+ }
168
+ });
169
+ </script>
170
+ </body>
171
+ </html>
172
+ ```
173
+
174
+ ```html
175
+ <script>
176
+ // With TSV
177
+ HoodiniViz.createDashboard({
178
+ container: 'root',
179
+ dataPaths: {
180
+ newick: 'https://example.com/tree.nwk',
181
+ gff: 'https://example.com/genes.tsv',
182
+ hoods: 'https://example.com/hoods.tsv',
183
+ }
184
+ });
185
+ </script>
186
+ ```
187
+
188
+ </details>
189
+
190
+ <details>
191
+ <summary><strong>Core Visualization</strong> — for advanced users who want full control</summary>
192
+
193
+ <br/>
194
+
195
+ ```html
196
+ <script>
197
+ // No sidebar, no data loading - you provide pre-processed data
198
+ HoodiniViz.createViz({
199
+ container: 'root',
200
+ newickStr: '((A:0.1,B:0.2):0.3,C:0.4);',
201
+ gffFeatures: [...],
202
+ hoods: [...],
203
+ proteinLinks: [...],
204
+ });
205
+ </script>
206
+ ```
207
+
208
+ </details>
209
+
210
+ <details>
211
+ <summary><strong>Manual React usage</strong> — when you need the React primitives</summary>
212
+
213
+ <br/>
214
+
215
+ ```html
216
+ <script>
217
+ const { HoodiniDashboard, React, ReactDOM } = HoodiniViz;
218
+
219
+ const root = ReactDOM.createRoot(document.getElementById('root'));
220
+ root.render(React.createElement(HoodiniDashboard, {
221
+ dataPaths: { newick: '...', gffParquet: '...' }
222
+ }));
223
+ </script>
224
+ ```
225
+
226
+ </details>
227
+
131
228
  ---
132
229
 
133
230
  ## 📁 Data Formats
134
231
 
135
- > [!NOTE]
136
- > Parquet files load **3-10x faster** than TSV. Convert with `python scripts/convert_to_parquet.py`
232
+ > ℹ️ **Note**
233
+ >
234
+ > Parquet files load **3-10x faster** than TSV.
137
235
 
138
236
  | File | Format | Description |
139
237
  |:-----|:------:|:------------|
package/dist/{3Dmol-BErntOlO.js → 3Dmol-CuZz1vAr.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { g as getDefaultExportFromCjs } from "./index-CgEGAnfh.js";
1
+ import { g as getDefaultExportFromCjs } from "./index-DoUR8EOn.js";
2
2
  function _mergeNamespaces(K, D) {
3
3
  for (var d = 0; d < D.length; d++) {
4
4
  const E = D[d];
package/dist/{data-grid-overlay-editor-5KCvQogJ.js → data-grid-overlay-editor-C2F2acq7.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { s as J, r, i as I, a as Q, b as U, c as Z, T as ee, C as te, m as re } from "./index-CgEGAnfh.js";
1
+ import { s as J, r, i as I, a as Q, b as U, c as Z, T as ee, C as te, m as re } from "./index-DoUR8EOn.js";
2
2
  const ne = () => (t) => t.targetX, ie = () => (t) => t.targetY, se = () => (t) => t.targetWidth, ae = () => (t) => t.targetHeight, oe = () => (t) => t.targetY + 10, le = () => (t) => Math.max(0, (t.targetHeight - 28) / 2), de = /* @__PURE__ */ J("div")({
3
3
  name: "DataGridOverlayEditorStyle",
4
4
  class: "gdg-d19meir1",
package/dist/hoodini-viz.js CHANGED
@@ -1,18 +1,21 @@
1
- import { D as s, d as o, F as t, G as i, e as l, H as n, H as d, f as D, P, h as r, R as h, j as H, k as R, l as F, n as G } from "./index-CgEGAnfh.js";
1
+ import { D as s, d as o, F as t, G as i, e as l, H as r, H as d, f as n, P as D, h as P, R as h, j as c, k as H, l as R, n as F, o as G, p as T, q as b } from "./index-DoUR8EOn.js";
2
2
  export {
3
3
  s as DEFAULT_CONFIG,
4
4
  o as Domain,
5
5
  t as FORMAT_PRESETS,
6
6
  i as Gene,
7
7
  l as GenomeView,
8
- n as HoodiniDashboard,
8
+ r as HoodiniDashboard,
9
9
  d as HoodiniDashboardDefault,
10
- D as HoodiniViz,
11
- P as PhyloNode,
12
- r as PhyloTree,
10
+ n as HoodiniViz,
11
+ D as PhyloNode,
12
+ P as PhyloTree,
13
13
  h as React,
14
- H as ReactDOM,
15
- R as getPaletteColors,
16
- F as getQualitativePalettes,
17
- G as getSequentialPalettes
14
+ c as ReactDOM,
15
+ H as create,
16
+ R as createDashboard,
17
+ F as createViz,
18
+ G as getPaletteColors,
19
+ T as getQualitativePalettes,
20
+ b as getSequentialPalettes
18
21
  };