### Install Dependencies for Node/Express Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/guide.md

Commands to install the necessary Node.js dependencies (express) for the Node/Express Datamesh proxy example.

```sh
cd packages/datamesh/proxy/express
npm init -y
npm install express
```

--------------------------------

### Install Express and Initialize Project

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/express/README.md

Installs the Express framework and initializes a new Node.js project using npm. This is a prerequisite for running the proxy server.

```bash
npm init -y
npm install express
```

--------------------------------

### Install @oceanum/datamesh

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/README.md

Installs the @oceanum/datamesh library using npm. This is the first step to using the library in your Node.js, Deno, or browser projects.

```sh
npm install @oceanum/datamesh
```

--------------------------------

### Install @oceanum/datamesh

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/README.md

Installs the @oceanum/datamesh library using npm. This command is used to add the library to your Node.js project.

```sh
npm install @oceanum/datamesh
```

--------------------------------

### Install Express Dependency

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/documents/Proxy-Guide.md

Command to install the 'express' package using npm, required for running the Node/Express proxy example.

```sh
npm install express
```

--------------------------------

### Generate and Serve Documentation

Source: https://github.com/oceanum-io/oceanum-js/blob/main/CLAUDE.md

Commands to generate TypeDoc documentation for the project, serve it with live reloading, or generate documentation for a specific package.

```Bash
npm run docs
```

```Bash
npm run docs:serve
```

```Bash
npx nx build-docs datamesh
```

--------------------------------

### Datamesh Proxy Setup with TypeScript

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/README.md

Provides a TypeScript example for setting up the Datamesh Connector to use a proxy. This is recommended for browser applications to keep the Datamesh token secret and simplify CORS. It requires a PROXY_URL and assumes a deployed Cloudflare Worker.

```typescript
import { Connector } from "@oceanum/datamesh";

const PROXY_URL = "https://your-proxy.workers.dev"; // or your own domain

const datamesh = new Connector("proxy", {
  service: PROXY_URL,
  gateway: PROXY_URL,
});
```

--------------------------------

### EIDOS Development Commands

Source: https://github.com/oceanum-io/oceanum-js/blob/main/CLAUDE.md

Commands for running the EIDOS development server and generating TypeScript interfaces from schemas using Nx.

```Bash
npx nx dev eidos
```

```Bash
npx nx run eidos:generate-types
```

--------------------------------

### Build Oceanum.js Packages

Source: https://github.com/oceanum-io/oceanum-js/blob/main/CLAUDE.md

Commands to build all packages in the Nx monorepo or specific packages like 'datamesh' or 'eidos'. Uses the 'nx' command-line tool.

```Bash
npx nx run-many -t build
```

```Bash
npx nx build datamesh
```

```Bash
npx nx build eidos
```

--------------------------------

### Install Oceanum EIDOS and Svelte

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/svelte.md

This command installs the necessary Oceanum EIDOS JavaScript bindings and Svelte, preparing your project for integration.

```bash
npm install @oceanum/eidos svelte
```

--------------------------------

### Start Node/Express Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/documents/Proxy-Guide.md

Commands to start the Node/Express proxy. It requires the DATAMESH_TOKEN environment variable to be set and optionally allows configuring the Datamesh URL and port.

```sh
DATAMESH_TOKEN=your_token_here node index.js
# Optional:
# DATAMESH_URL=https://datamesh.oceanum.io PORT=8787 DATAMESH_TOKEN=your_token_here node index.js
```

--------------------------------

### Install EIDOS JavaScript Bindings

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/eidos/README.md

Installs the EIDOS JavaScript library using npm. This is the first step to integrating EIDOS visualizations into your web application.

```bash
npm install @oceanum/eidos
```

--------------------------------

### Run Node Express Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/express/README.md

Demonstrates how to run the Node.js Express proxy server. It shows how to set the DATAMESH_TOKEN environment variable and optionally configure DATAMESH_URL and PORT.

```bash
DATAMESH_TOKEN=your_token_here node index.js
# or with a custom upstream and port
DATAMESH_TOKEN=your_token_here DATAMESH_URL=https://datamesh.oceanum.io PORT=8080 node index.js
```

--------------------------------

### Test Oceanum.js Packages

Source: https://github.com/oceanum-io/oceanum-js/blob/main/CLAUDE.md

Commands to run tests for the 'datamesh' package, including an option to generate test coverage reports. Utilizes Vitest as the test runner.

```Bash
npx nx test datamesh
```

```Bash
npx nx test datamesh --coverage
```

--------------------------------

### Install EIDOS JS Package

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/README.md

Installs the EIDOS JavaScript library using npm. This is the first step to integrating EIDOS visualizations into your web application.

```bash
npm install @oceanum/eidos
```

--------------------------------

### Run Node/Express Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/guide.md

Commands to run the Node/Express Datamesh proxy. It shows how to set the DATAMESH_TOKEN and optionally DATAMESH_URL and PORT environment variables.

```sh
DATAMESH_TOKEN=your_token_here node index.js
# Optional:
# DATAMESH_URL=https://datamesh.oceanum.io PORT=8787 DATAMESH_TOKEN=your_token_here node index.js
```

--------------------------------

### Configure @oceanum/datamesh Connector with Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/guide.md

Example TypeScript code demonstrating how to configure the @oceanum/datamesh Connector to use a proxy URL for both service and gateway endpoints. It highlights that the token parameter is ignored when a proxy is used.

```typescript
import { Connector } from "@oceanum/datamesh";

const PROXY_URL = "https://your-proxy.workers.dev"; // or your custom domain

const connector = new Connector("proxy", {
  service: PROXY_URL,
  gateway: PROXY_URL,
  // Optional: tweak caching and session duration as needed
  // nocache: true,
  // sessionDuration: 1,
});
```

--------------------------------

### Install EIDOS via NPM/Yarn

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Installs the EIDOS JavaScript bindings using either npm or yarn package managers. This is the standard method for including the library in a JavaScript project.

```bash
npm install @oceanum/eidos
# or
yarn add @oceanum/eidos
```

--------------------------------

### Install EIDOS and Vue Dependencies

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vue.md

Installs the necessary EIDOS JavaScript bindings and Vue.js packages using npm. This is the first step to using EIDOS within a Vue project.

```bash
npm install @oceanum/eidos vue
```

--------------------------------

### Interactive EIDOS Visualization Setup

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

This snippet sets up the HTML structure, CSS styling, and JavaScript logic for an interactive EIDOS visualization. It includes elements for displaying the visualization, controls for user interaction, and a section for event logging. The JavaScript initializes the EIDOS embed function and manages the application state.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive EIDOS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    .container {
      display: flex;
      gap: 20px;
      height: 600px;
    }
    
    .visualization {
      flex: 1;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    
    .controls {
      width: 300px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow-y: auto;
    }
    
    .control-group {
      margin-bottom: 20px;
    }
    
    .control-group button {
      display: block;
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .control-group button:hover {
      background: #0056b3;
    }
    
    .control-group button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    
    .input-group {
      margin-bottom: 10px;
    }
    
    .input-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    
    .input-group input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .events {
      margin-top: 20px;
    }
    
    .event-list {
      height: 200px;
      overflow-y: auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      background: #f8f9fa;
    }
    
    .event-item {
      margin-bottom: 10px;
      padding: 8px;
      background: white;
      border-radius: 3px;
      font-size: 12px;
    }
    
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 18px;
      color: #666;
    }
    
    .error {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: red;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1>Interactive EIDOS Visualization</h1>
  
  <div class="container">
    <div id="eidos-container" class="visualization">
      <div class="loading">Loading EIDOS...</div>
    </div>
    
    <div class="controls">
      <h3>Controls</h3>
      
      <div class="control-group">
        <button id="add-layer-btn" disabled>Add Track Layer</button>
        <button id="add-gridded-btn" disabled>Add Gridded Layer</button>
        <button id="update-title-btn" disabled>Update Title</button>
        <button id="clear-events-btn">Clear Events</button>
      </div>
      
      <div class="input-group">
        <label for="title-input">Visualization Title:</label>
        <input type="text" id="title-input" placeholder="Enter title..." disabled>
      </div>
      
      <div class="input-group">
        <label for="data-url-input">Data URL:</label>
        <input type="text" id="data-url-input" placeholder="https://..." disabled>
      </div>
      
      <div>
        <p><strong>Layers:</strong> <span id="layer-count">0</span></p>
        <p><strong>Status:</strong> <span id="status">Loading...</span></p>
      </div>
      
      <div class="events">
        <h4>Events (<span id="event-count">0</span>)</h4>
        <div id="event-list" class="event-list">
          <p>No events yet...</p>
        </div>
      </div>
    </div>
  </div>

  <script type="module">
    import { embed } from '@oceanum/eidos';

    class EidosApp {
      constructor() {
        this.eidos = null;
        this.events = [];
        this.spec = {
          id: 'interactive-vanilla',
          name: 'Interactive Vanilla Demo',
          root: {
            id: 'root',
            nodeType: 'world',
            children: []
          },
          data: [],
          transforms: []
        };
        
        this.initElements();
        this.initEventListeners();
        this.initEidos();
      }
      
      initElements() {
        this.container = document.getElementById('eidos-container');
        this.addLayerBtn = document.getElementById('add-layer-btn');
        this.addGriddedBtn = document.getElementById('add-gridded-btn');
        this.updateTitleBtn = document.getElementById('update-title-btn');
        this.clearEventsBtn = document.getElementById('clear-events-btn');
        this.titleInput = document.getElementById('title-input');
        this.dataUrlInput = document.getElementById('data-url-input');
        this.layerCount = document.getElementById('layer-count');
        this.status = document.getElementById('status');
        this.eventCount = document.getElementById('event-count');
        this.eventList = document.getElementById('event-list');
      }
      
      initEventListeners() {

```

--------------------------------

### Install EIDOS and React Dependencies

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/react.md

Installs the necessary EIDOS JavaScript bindings along with React and ReactDOM using npm. These are the core dependencies required to use EIDOS within a React project.

```bash
npm install @oceanum/eidos react react-dom
```

--------------------------------

### Lint and Type Check Oceanum.js Projects

Source: https://github.com/oceanum-io/oceanum-js/blob/main/CLAUDE.md

Commands for linting all projects or specific packages ('datamesh', 'eidos') within the Nx monorepo. Type checking is also managed via Nx.

```Bash
npx nx run-many -t lint
```

```Bash
npx nx lint datamesh
```

```Bash
npx nx lint eidos
```

```Bash
npx nx typecheck datamesh
```

```Bash
npx nx typecheck eidos
```

--------------------------------

### Configure Oceanum Datamesh Connector with Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/express/README.md

Shows how to configure the @oceanum/datamesh Connector to use the local proxy. Both the 'service' and 'gateway' options are pointed to the proxy's URL.

```typescript
import { Connector } from "@oceanum/datamesh";

const PROXY_URL = "http://localhost:8787"; // or your deployed proxy

const connector = new Connector("proxy", {
  service: PROXY_URL,
  gateway: PROXY_URL,
});
```

--------------------------------

### Query Datamesh Data with Oceanum JS

Source: https://github.com/oceanum-io/oceanum-js/blob/main/examples/datamesh/wind_timeseries_query/README.md

This snippet shows how to instantiate the Oceanum JS Datamesh Connector, define a query with location and time filters, execute the query, and convert the results into a dataframe. It requires a Datamesh token from Oceanum.io.

```javascript
import { Connector } from "@oceanum/datamesh";

//Instatiate the Datamesh Connector
const datamesh = new Connector(); //Get your datamesh token from your Oceanum.io account

//Define a datamesh query
const location = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [2, 52],
  },
};

const query = {
  datasource: "era5_wind10m",
  geofilter: {
    type: "feature",
    geom: location,
  },
  timefilter: {
    start: "2020-01-01T00:00:00Z",
    end: "2021-01-01T00:00:00Z",
  },
};

//Get the data
const data = await datamesh.query(query);

//Convert the data to a dataframe
const df = data.asDataframe();
console.log(df.slice(0, 5));
```

--------------------------------

### Initialize Datamesh Connector (JavaScript)

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/README.md

Demonstrates how to instantiate the Datamesh Connector in JavaScript using a Datamesh token. It then shows how to define a query and retrieve data from the Datamesh.

```javascript
import { Connector } from "@oceanum/datamesh";

//Instatiate the Datamesh Connector
const datamesh = Connector("my_datamesh_token"); //Get your datamesh token from your Oceanum.io account

//Define a datamesh query
const query = {
  datasource: "oceanum-sizing_giants",
};

//Get the data
const data = await datamesh.query(query);
```

--------------------------------

### Basic Datamesh Query with JavaScript

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/README.md

Demonstrates how to instantiate the Datamesh Connector with a token and perform a query. It requires importing the Connector and defining a query object with a datasource.

```javascript
import { Connector } from "@oceanum/datamesh";

//Instatiate the Datamesh Connector
const datamesh = Connector("my_datamesh_token"); //Get your datamesh token from your Oceanum.io account

//Define a datamesh query
const query = {
  datasource: "oceanum-sizing_giants",
};

//Get the data
const data = await datamesh.query(query);
```

--------------------------------

### Initialize EidosApp on DOM Ready

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Ensures that the EidosApp is initialized only after the DOM content has been fully loaded. If the DOM is already ready, it initializes the app immediately.

```javascript
// Initialize app when DOM is ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => new EidosApp());
    } else {
      new EidosApp();
    }
```

--------------------------------

### Get Datamesh Host

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Connector.md

Retrieves the configured host URL for the Datamesh service. This accessor is useful for determining the endpoint the connector is communicating with.

```TypeScript
connector.host
```

--------------------------------

### EIDOS Initialization with JavaScript

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

This JavaScript snippet demonstrates how to initialize the EIDOS visualization library. It imports the 'embed' function and sets up a class to manage the application's state, including the EIDOS instance, event handling, and the visualization specification. It also initializes UI elements and event listeners.

```javascript
import { embed } from '@oceanum/eidos';

class EidosApp {
  constructor() {
    this.eidos = null;
    this.events = [];
    this.spec = {
      id: 'interactive-vanilla',
      name: 'Interactive Vanilla Demo',
      root: {
        id: 'root',
        nodeType: 'world',
        children: []
      },
      data: [],
      transforms: []
    };
    
    this.initElements();
    this.initEventListeners();
    this.initEidos();
  }
  
  initElements() {
    this.container = document.getElementById('eidos-container');
    this.addLayerBtn = document.getElementById('add-layer-btn');
    this.addGriddedBtn = document.getElementById('add-gridded-btn');
    this.updateTitleBtn = document.getElementById('update-title-btn');
    this.clearEventsBtn = document.getElementById('clear-events-btn');
    this.titleInput = document.getElementById('title-input');
    this.dataUrlInput = document.getElementById('data-url-input');
    this.layerCount = document.getElementById('layer-count');
    this.status = document.getElementById('status');
    this.eventCount = document.getElementById('event-count');
    this.eventList = document.getElementById('event-list');
  }
  
  initEventListeners() {
    // Event listeners would be defined here
  }

  initEidos() {
    // Eidos initialization logic would be here
  }
}

new EidosApp();
```

--------------------------------

### Instantiate Query Class

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Query.md

Demonstrates how to create a new instance of the Query class, which represents a Datamesh query. It requires an IQuery object as a parameter.

```TypeScript
new Query(query: IQuery)
```

--------------------------------

### Instantiate Dataset

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Dataset.md

Creates an instance of the Dataset class. It requires dimensions, variables, attributes, coordinate keys, and the root Zarr store.

```typescript
new Dataset<S>(dimensions, variables, attributes, coordkeys, root)
```

--------------------------------

### Initialize Eidos Component

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Asynchronously initializes the Eidos component using the provided container and specification. It handles successful initialization by calling `onEidosReady` and errors by calling `onEidosError`.

```javascript
async initEidos() {
        try {
          this.eidos = await embed(this.container, this.spec, (event) => {
            this.handleEvent(event);
          });
          
          this.onEidosReady();
        } catch (error) {
          this.onEidosError(error);
        }
      }
```

--------------------------------

### Vue Options API Example

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vue.md

A Vue 2/3 Options API component for embedding Eidos visualizations. It uses the `embed` function and manages the instance lifecycle, including updates and error handling.

```vue
<!-- components/EidosOptionsAPI.vue -->
<template>
  <div class="eidos-options">
    <div 
      ref="container"
      style="width: 100%; height: 100%;"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { embed } from '@oceanum/eidos';

export default defineComponent({
  name: 'EidosOptionsAPI',
  
  props: {
    spec: {
      type: Object as PropType<any>,
      required: true
    },
    renderer: {
      type: String,
      default: undefined
    }
  },

  emits: ['event', 'error'],

  data() {
    return {
      eidos: null as any,
      loading: true,
      error: null as string | null
    };
  },

  async mounted() {
    try {
      this.loading = true;
      this.error = null;

      this.eidos = await embed(
        this.$refs.container as HTMLElement,
        this.spec,
        (event: any) => this.$emit('event', event),
        this.renderer
      );
    } catch (err: any) {
      this.error = err.message;
      this.$emit('error', err);
    } finally {
      this.loading = false;
    }
  },

  methods: {
    updateSpec(updates: any) {
      if (this.eidos) {
        Object.assign(this.eidos, updates);
      }
    }
  },

  watch: {
    spec: {
      handler() {
        // Recreate instance when spec changes
        this.$nextTick(() => {
          if (this.$refs.container) {
            this.mounted();
          }
        });
      },
      deep: true
    }
  }
});
</script>
```

--------------------------------

### Configure @oceanum/datamesh Connector with Proxy

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/documents/Proxy-Guide.md

Demonstrates how to initialize the @oceanum/datamesh Connector to use a deployed reverse proxy. Both 'service' and 'gateway' are pointed to the proxy URL, and a placeholder token is used as the proxy handles authentication.

```typescript
import { Connector } from "@oceanum/datamesh";

const PROXY_URL = "http://localhost:8787"; // or your custom domain

const connector = new Connector("proxy", {
  service: PROXY_URL,
  gateway: PROXY_URL,
  // Optional: tweak caching and session duration as needed
  // nocache: true,
  // sessionDuration: 1,
});
```

--------------------------------

### Get Datamesh Datasource

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Connector.md

Fetches a specific datasource from the Datamesh service using its unique ID. This method returns a Promise that resolves with the Datasource object or throws an error if the datasource is not found or access is denied.

```TypeScript
connector.getDatasource("datasourceId")
```

--------------------------------

### Configure Webpack for Eidos Browser Compatibility

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

A sample `webpack.config.js` file demonstrating how to configure Webpack for Eidos integration. It includes setting the entry point, output, and resolving polyfills for 'path' and 'util' using `path-browserify` and `util/` respectively, along with Babel configuration for JavaScript transpilation.

```javascript
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    fallback: {
      // EIDOS may need these polyfills for browser compatibility
      "path": require.resolve("path-browserify"),
      "util": require.resolve("util/")
    }
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
```

--------------------------------

### Get Datamesh Session

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Connector.md

Retrieves the current active session or creates a new one if no session exists. This is useful for ensuring an active connection before performing operations. Returns a Promise resolving to the Session object.

```TypeScript
connector.getSession()
```

--------------------------------

### Cloudflare Worker Proxy for Datamesh

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/documents/Proxy-Guide.md

An example Cloudflare Worker that acts as a reverse proxy for the Datamesh API. It forwards requests, injects the Datamesh token from environment secrets, and adds permissive CORS headers for browser applications.

```javascript
// Example Cloudflare Worker reverse proxy
// Add your datamesh token as a secret in the Cloudflare worker environment

const DATAMESH = "https://datamesh.oceanum.io";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const DATAMESH_TOKEN = env.DATAMESH_TOKEN;

    // Build the upstream request URL
    const datameshUrl = new URL(url.pathname + url.search, DATAMESH);

    // Clone request and forward body/headers/method
    const modifiedRequest = new Request(datameshUrl.toString(), {
      method: request.method,
      headers: request.headers,
      body: request.body,
    });

    // Inject/overwrite the token
    modifiedRequest.headers.set("x-DATAMESH-TOKEN", `${DATAMESH_TOKEN}`);

    // Forward
    const response = await fetch(modifiedRequest);

    // Add CORS headers for the browser
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: {
        ...response.headers,
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization",
      },
    });
  },
};
```

--------------------------------

### Create Dataset from Zarr Store

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Dataset.md

Creates a Dataset instance by connecting to a Zarr store via HTTP. Requires the store URL, authentication headers, and optional Zarr options.

```typescript
static zarr(url: string, authHeaders: Record<string, string>, options: ZarrOptions = {}): Promise<Dataset<HttpZarr>>
```

--------------------------------

### Cloudflare Worker Proxy for Datamesh

Source: https://github.com/oceanum-io/oceanum-js/blob/main/packages/datamesh/proxy/guide.md

A Cloudflare Worker script that acts as a reverse proxy for the Datamesh API. It forwards requests, injects the Datamesh token from environment secrets, and adds permissive CORS headers for browser applications.

```javascript
// Example Cloudflare Worker reverse proxy
// Add your datamesh token as a secret in the Cloudflare worker environment

const DATAMESH = "https://datamesh.oceanum.io";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const DATAMESH_TOKEN = env.DATAMESH_TOKEN;

    // Build the upstream request URL
    const datameshUrl = new URL(url.pathname + url.search, DATAMESH);

    // Clone request and forward body/headers/method
    const modifiedRequest = new Request(datameshUrl.toString(), {
      method: request.method,
      headers: request.headers,
      body: request.body,
    });

    // Inject/overwrite the token
    modifiedRequest.headers.set("x-DATAMESH-TOKEN", `${DATAMESH_TOKEN}`);

    // Forward
    const response = await fetch(modifiedRequest);

    // Add CORS headers for the browser
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: {
        ...response.headers,
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers":
          "Content-Type, Authorization, x-requested-with, x-datamesh-token",
      },
    });
  },
};
```

--------------------------------

### React to Eidos Spec Mutations in JavaScript

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/api.md

Illustrates how to directly mutate Eidos specification properties to update the visualization reactively. Examples include direct property assignment, array operations, nested object updates, and bulk updates using Object.assign.

```javascript
// Direct property assignment
eidos.name = 'New Name';

// Array operations
eidos.root.children.push(newLayer);
eidos.data.splice(0, 1); // Remove first data source

// Nested object updates
eidos.root.children[0].visible = false;
eidos.data[0].url = 'https://new-url.com/data.json';

// Bulk updates
Object.assign(eidos.root, {
  backgroundColor: '#fff',
  showGrid: true
});
```

--------------------------------

### Basic EIDOS Embedding in Vanilla JavaScript

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Demonstrates how to embed EIDOS into a plain HTML page using vanilla JavaScript. It includes setting up a container, defining a specification, and initializing the EIDOS instance with an event listener and a delayed layer addition.

```javascript
import { embed } from '@oceanum/eidos';

const spec = {
  id: 'vanilla-demo',
  name: 'Vanilla JS Demo',
  root: {
    id: 'root',
    nodeType: 'world',
    children: []
  },
  data: [],
  transforms: []
};

async function initEidos() {
  const container = document.getElementById('eidos-container');
  
  try {
    const eidos = await embed(container, spec, (event) => {
      console.log('EIDOS event:', event);
    });
    
    console.log('EIDOS instance created:', eidos);
    
    // Example: Add a layer after 2 seconds
    setTimeout(() => {
      eidos.root.children.push({
        id: 'demo-layer',
        nodeType: 'worldlayer',
        layerType: 'track'
      });
      console.log('Layer added');
    }, 2000);
    
  } catch (error) {
    console.error('Failed to create EIDOS:', error);
    container.innerHTML = `<p>Error: ${error.message}</p>`;
  }
}

// Initialize when DOM is loaded
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initEidos);
} else {
  initEidos();
}
```

--------------------------------

### Handle Eidos Ready State

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Updates the UI to reflect that the Eidos component is ready. This includes setting the status text, clearing loading messages, enabling controls, setting the initial title, and updating the layer count.

```javascript
onEidosReady() {
        this.status.textContent = 'Ready';
        this.container.innerHTML = ''; // Remove loading message
        
        // Enable controls
        this.addLayerBtn.disabled = false;
        this.addGriddedBtn.disabled = false;
        this.updateTitleBtn.disabled = false;
        this.titleInput.disabled = false;
        this.dataUrlInput.disabled = false;
        
        // Set initial title
        this.titleInput.value = this.eidos.name;
        
        this.updateLayerCount();
        console.log('EIDOS ready:', this.eidos);
      }
```

--------------------------------

### Implement Safe Eidos Embedding with Error Handling

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Demonstrates a JavaScript class `EidosErrorHandler` with a static method `safeEmbed` to safely initialize Eidos visualizations. It includes a `handleError` method for logging and displaying user-friendly error messages within the container, and a `getUserFriendlyMessage` helper to map specific error types to clearer messages.

```javascript
// error-handling.js
import { embed } from '@oceanum/eidos';

class EidosErrorHandler {
  static async safeEmbed(container, spec, onEvent, renderer) {
    try {
      return await embed(container, spec, onEvent, renderer);
    } catch (error) {
      this.handleError(error, container);
      throw error;
    }
  }

  static handleError(error, container) {
    console.error('EIDOS Error:', error);
    
    // Display user-friendly error message
    container.innerHTML = `
      <div style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 20px;
        background: #fee;
        border: 1px solid #fcc;
        border-radius: 4px;
        color: #c66;
      ">
        <div style="text-align: center;">
          <h3>Visualization Error</h3>
          <p>${this.getUserFriendlyMessage(error)}</p>
          <details style="margin-top: 10px;">
            <summary>Technical Details</summary>
            <pre style="margin-top: 10px; font-size: 12px;">${error.message}</pre>
          </details>
        </div>
      </div>
    `;
  }

  static getUserFriendlyMessage(error) {
    if (error.message.includes('validation failed')) {
      return 'The visualization specification is invalid. Please check your data format.';
    }
    if (error.message.includes('network') || error.message.includes('fetch')) {
      return 'Unable to connect to the visualization server. Please check your internet connection.';
    }
    if (error.message.includes('timeout')) {
      return 'The visualization is taking too long to load. Please try again.';
    }
    return 'An unexpected error occurred while loading the visualization.';
  }
}

export { EidosErrorHandler };
```

--------------------------------

### Initialize Eidos App and Event Listeners

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/eidos/vanilla.md

Sets up event listeners for UI elements to interact with the Eidos visualization. This includes buttons for adding layers, updating titles, and clearing events, as well as input fields for titles and data URLs.

```javascript
this.addLayerBtn.addEventListener('click', () => this.addTrackLayer());
        this.addGriddedBtn.addEventListener('click', () => this.addGriddedLayer());
        this.updateTitleBtn.addEventListener('click', () => this.updateTitle());
        this.clearEventsBtn.addEventListener('click', () => this.clearEvents());
        
        this.titleInput.addEventListener('input', (e) => {
          if (this.eidos) {
            this.eidos.name = e.target.value;
          }
        });
        
        this.titleInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter') {
            this.updateTitle();
          }
        });
```

--------------------------------

### Initialize Datamesh Connector with Proxy (TypeScript)

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/README.md

Shows how to initialize the Datamesh Connector in TypeScript when using a proxy. This is recommended for browser applications to keep the Datamesh token secret. It requires specifying the proxy service and gateway URLs.

```typescript
import { Connector } from "@oceanum/datamesh";

const PROXY_URL = "https://your-proxy.workers.dev"; // or your own domain

const datamesh = new Connector("proxy", {
  service: PROXY_URL,
  gateway: PROXY_URL,
});
```

--------------------------------

### Instantiate Datamesh Connector

Source: https://github.com/oceanum-io/oceanum-js/blob/main/docs/datamesh/index/classes/Connector.md

Initializes a new Connector instance for the Datamesh service. Requires an access token and supports optional configuration for gateway, JWT authentication, caching, service URL, and session duration.

```TypeScript
new Connector(token, {
  gateway?: "https://gateway.<datamesh_service_domain>",
  jwtAuth?: "JWT for Oceanum service",
  nocache?: boolean,
  service?: "https://datamesh.oceanum.io",
  sessionDuration?: number
})
```