TACC · wesleyboar · Nov 21, 2025 · Nov 21, 2025 · Nov 21, 2025 · Nov 21, 2025
diff --git a/cfde-cms/html/js-cfde-nav-wheel--DISABLED.html b/cfde-cms/html/js-cfde-nav-wheel--DISABLED.html
diff --git a/cfde-cms/html/js-cfde-nav-wheel.html b/cfde-cms/html/js-cfde-nav-wheel.html
@@ -0,0 +1,3 @@
+{# https://github.com/TACC/Core-CMS-Custom/blob/main/cfde-wheel/README.md #}
+<aside id="cfde-wheel"></aside>
+<script src="https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@bfa7717a/cfde-wheel/dist/cfde-wheel.iife.js"></script>
diff --git a/cfde-cms/html/js-cfde-nav-wheel.md b/cfde-cms/html/js-cfde-nav-wheel.md
diff --git a/cfde-wheel/.gitignore b/cfde-wheel/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.DS_Store
+*.log
+
diff --git a/cfde-wheel/README.md b/cfde-wheel/README.md
@@ -0,0 +1,61 @@
+# CFDE Navigation Wheel Bundle
+
+This package builds a browser-ready bundle of [the CFDE Navigation Wheel component](https://github.com/MaayanLab/cfde-wheel) that can be embedded in any website via HTML.
+
+## Installation
+
+```bash
+npm install
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+This creates a bundled JavaScript file at `dist/cfde-wheel.iife.js` that includes React, React DOM, and the CFDE Wheel component.
+
+## Usage
+
+### Basic HTML Embedding
+
+Add this to your HTML page:
+
+```html
+<div id="cfde-wheel"></div>
+<script src="path/to/cfde-wheel.iife.js"></script>
+```
+
+The script will automatically initialize the wheel in the element with ID `cfde-wheel`.
+
+### Manual Initialization
+
+If you want to initialize the wheel manually or use a different container:
+
+```html
+<div id="my-custom-container"></div>
+<script src="path/to/cfde-wheel.iife.js"></script>
+<script>
+  // Initialize in a custom container
+  window.CFDEWheel.init('my-custom-container');
+
+  // Or pass the element directly
+  const container = document.getElementById('my-custom-container');
+  window.CFDEWheel.init(container);
+</script>
+```
+
+## Development
+
+To preview locally:
+
+```bash
+npm run preview
+```
+
+## Notes
+
+- The bundle includes React and React DOM, so you don't need to load them separately.
+- The bundle is self-contained and works in any browser that supports ES5+.
+- The default container ID is `cfde-wheel`, but you can use any ID and initialize manually.
diff --git a/cfde-wheel/dist/cfde-wheel.iife.js b/cfde-wheel/dist/cfde-wheel.iife.js
diff --git a/cfde-wheel/index.html b/cfde-wheel/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CFDE Navigation Wheel - Example</title>
+</head>
+<body>
+  <h1>CFDE Navigation Wheel</h1>
+  <aside id="cfde-wheel"></aside>
+  <script src="./cfde-wheel.iife.js"></script>
+</body>
+</html>
diff --git a/cfde-wheel/index.js b/cfde-wheel/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import CFDEWheel from 'cfde-wheel';
+
+/**
+ * Initialize the CFDE Navigation Wheel
+ * @param {string|HTMLElement} containerIdOrElement - ID of the container element or the element itself
+ */
+function initCFDEWheel(containerIdOrElement) {
+  const container = typeof containerIdOrElement === 'string'
+    ? document.getElementById(containerIdOrElement)
+    : containerIdOrElement;
+
+  if (!container) {
+    console.error('CFDE Wheel: Container element not found');
+    return;
+  }
+
+  const root = createRoot(container);
+  root.render(React.createElement(CFDEWheel));
+}
+
+// Auto-initialize if container with default ID exists
+function autoInit() {
+  const defaultContainer = document.getElementById('cfde-wheel');
+  if (defaultContainer) {
+    initCFDEWheel(defaultContainer);
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', autoInit);
+} else {
+  autoInit();
+}
+
+// Export for manual initialization
+if (typeof window !== 'undefined') {
+  window.CFDEWheel = {
+    init: initCFDEWheel,
+  };
+}
+