### Install and Start Embed Widget Server (npm)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/embed-widget/README.md

Installs project dependencies and starts the development server for the embedded Deephaven widget. This requires Node.js and npm to be installed.

```bash
npm install
npm start
```

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

### Install @deephaven/jsapi-bootstrap

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-bootstrap/README.md

Installs the @deephaven/jsapi-bootstrap package using npm. This is the initial step before using the library in your project.

```bash
npm install --save @deephaven/jsapi-bootstrap
```

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

### Install @deephaven/grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/README.md

Installs the @deephaven/grid package using npm. This is the initial step to integrate the grid component into your project.

```bash
npm install --save @deephaven/grid
```

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

### Install and Import @deephaven/golden-layout

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/golden-layout/README.md

Installs the @deephaven/golden-layout package using npm and shows how to import it into your project.

```bash
npm install @deephaven/golden-layout
```

```javascript
import GoldenLayout from @deephaven/golden-layout
```

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

### Install ESLint Dependencies (npm)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/eslint-config/README.md

Installs the necessary ESLint and Deephaven ESLint configuration packages as development dependencies. Ensure all peer dependencies are also installed.

```bash
npm install --save-dev eslint @deephaven/eslint-config
```

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

### Start Deephaven Server for E2E Tests

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Starts the Deephaven server with anonymous authentication and a specified application directory, required for running end-to-end tests locally.

```bash
START_OPTS="-DAuthHandlers=io.deephaven.auth.AnonymousAuthenticationHandler -Ddeephaven.application.dir=/path/to/web-client-ui/tests/docker-scripts/data/app.d" ./gradlew server-jetty-app:run
```

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

### Install @deephaven/log Package

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/log/README.md

This snippet shows the command to install the @deephaven/log library as a dependency for your project using npm.

```bash
npm install --save @deephaven/log
```

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

### Install @deephaven/dashboard-core-plugins

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/dashboard-core-plugins/README.md

Installs the @deephaven/dashboard-core-plugins package using npm. This is the first step to integrating core Deephaven dashboard functionalities into your project.

```bash
npm install --save @deephaven/dashboard-core-plugins
```

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

### Install Nightly Release (npm)

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Installs the nightly build of the @deephaven/grid package. This allows developers to use the latest, potentially unstable, features. Stability is not guaranteed with nightly releases.

```shell
npm install --save @deephaven/grid@nightly
```

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

### Install @deephaven/file-explorer using npm

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/file-explorer/README.md

This command installs the @deephaven/file-explorer package as a dependency for your project. Ensure you have npm or a compatible package manager installed.

```bash
npm install --save @deephaven/file-explorer
```

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

### Install @deephaven/auth-plugins

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/auth-plugins/README.md

This command installs the @deephaven/auth-plugins package using npm. It is a dependency for using the authentication plugins within a Deephaven web application.

```bash
npm install --save @deephaven/auth-plugins
```

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

### Install JSAPI Shim using npm

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-shim/README.md

This command installs the @deephaven/jsapi-shim package as a dependency for your project.

```bash
npm install --save @deephaven/jsapi-shim
```

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

### Install @deephaven/iris-grid Package

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/iris-grid/README.md

This command installs the @deephaven/iris-grid package as a dependency for your project. It is required before you can import and use the IrisGrid component.

```bash
npm install --save @deephaven/iris-grid
```

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

### Standalone Grid Setup with StaticDataGridModel (JavaScript/TypeScript)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/README.md

Demonstrates how to set up a standalone Deephaven data grid using the '@deephaven/grid' package. It initializes the grid with a 'StaticDataGridModel', providing sample data and column headers. This snippet is suitable for use cases where you manage your own data model and backend.

```javascript
import React, { useState } from 'react';
import { Grid, StaticDataGridModel } from '@deephaven/grid';

const GridExample = () => {
  const [model] = useState(
    new StaticDataGridModel(
      [
        ['Matthew Austins', 'Toronto', 35, 22],
        ['Doug Millgore', 'Toronto', 14, 33],
        ['Bart Marchant', 'Boston', 20, 14],
        ['Luigi Dabest', 'Pittsburgh', 66, 33],
      ],
      ['Name', 'Team', 'Goals', 'Assists']
    )
  );

  return <Grid model={model} />;
};

export default GridExample;
```

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

### Install @deephaven/jsapi-nodejs Package

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-nodejs/README.md

Installs the @deephaven/jsapi-nodejs package using npm. This command adds the necessary dependencies to your project for using Deephaven Jsapi in a Node.js application.

```bash
npm install --save @deephaven/jsapi-nodejs
```

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

### Install @deephaven/dashboard using npm

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/dashboard/README.md

Installs the @deephaven/dashboard package and its dependencies using npm. This is the first step to using the dashboard component in your React application.

```bash
npm install --save @deephaven/dashboard
```

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

### Install and Use Deephaven React Components

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/components/README.md

Installs the @deephaven/components package using npm and demonstrates how to import and render a Button component within a ThemeProvider. It also shows the inclusion of base stylesheet.

```bash
npm install --save @deephaven/components
```

```javascript
import React from "react";
import ReactDOM from "react-dom";
import { Button, ThemeProvider } from "@deephaven/components";
import "@deephaven/components/scss/BaseStyleSheet.scss";

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider themes={[]}>
      <Button kind="primary">Hello</Button>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

```

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

### Conventional Commit Specification Example

Source: https://github.com/deephaven/web-client-ui/blob/main/CONTRIBUTING.md

An example illustrating the structure of a conventional commit message, including the type, scope (optional), and subject. It also shows how to include a BREAKING CHANGE footer for API modifications.

```markdown
feat(api): add new endpoint for user data

This commit introduces a new API endpoint to retrieve user-specific data.

BREAKING CHANGE: The previous endpoint for user data has been deprecated and replaced with this new, more comprehensive endpoint. Users must update their calls to use the new structure.
```

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

### Usage Example for Deephaven Dashboard Core Plugins (React)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/dashboard-core-plugins/README.md

Demonstrates how to import and use core Deephaven dashboard plugins within a React component. It shows the inclusion of GridPlugin, ChartPlugin, and a custom plugin.

```jsx
import React, { Component } from 'react';
import Dashboard from '@deephaven/dashboard';
import { GridPlugin, ChartPlugin } from '@deephaven/dashboard';
import MyDashboardPlugin from './MyDashboardPlugin';

class Example extends Component {
  render() {
    return (
      <Dashboard>
        <GridPlugin />
        <ChartPlugin />
        <MyDashboardPlugin />
      </Dashboard>
    );
  }
}
```

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

### Mock Deephaven Core API

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Starts a mock API implementation for testing specific scenarios without a live backend. This mock is located in public/__mocks__/dh-core.js and is also used for unit tests. It's recommended to add stubs for new API functions to prevent breakage.

```shell
npm run mock
```

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

### Usage of FileExplorer React Component

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/file-explorer/README.md

Example demonstrating how to integrate the FileExplorer component into a React application. It requires a custom implementation of the FileStorage interface and provides an onSelect callback for handling user interactions.

```jsx
import React, { Component } from 'react';
import FileExplorer, { FileStorage } from '@deephaven/file-explorer';

class MyFileStorage implements FileStorage {
  // Must implement all menthods...
}

const storage = new MyFileStorage();

class Example extends Component {
  render() {
    return (
      <FileExplorer
        storage={storage}
        onSelect={item => console.log('Item selected', item)}
      />
    );
  }
}
```

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

### Import and Use JSAPI Shim in JavaScript

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-shim/README.md

This JavaScript code demonstrates how to import the `dh` object and `PropTypes` from the jsapi-shim package. It shows how to add an event listener for command start events on a Deephaven IDE session and defines the expected prop types for a React component.

```javascript
import dh, { PropTypes as APIPropTypes } from '@deephaven/jsapi-shim'

class MyComponent {
  componentDidMount() {
    const { session } = this.props;
    session.addEventListener(
      dh.IdeSession.EVENT_COMMANDSTARTED,
      event => {
        console.log('Command started event', event);
      }
    );
  }

  render() {
    return null;
  }
}

MyComponent.proptypes = {
  session: APIPropTypes.IdeSession.isRequired,
}

export default MyComponent;
```

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

### Respond to Selection Changes in Deephaven Grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example demonstrates how to respond to user selection changes in Deephaven Grid. The `onSelectionChanged` callback is triggered whenever the selection in the grid is updated. It receives an array of selection ranges and logs them to the console. The example also includes logic to extract and log the data from the selected cells, assuming specific columns for keys.

```jsx
function Example() {
  const model = useMemo(
    () => new MockGridModel({ rowCount: 100, columnCount: 10 }),
    []
  );

  return (
    <Grid
      model={model}
      onSelectionChanged={(ranges) => {
        const selectedData: unknown[][] = [];
        ranges.forEach(range => {
          for (let r = range.startRow; r <= range.endRow; r++) {
            // Assuming keys are the 0th and 1st column
            selectedData.push([model.textForCell(0, r), model.textForCell(1, r)])
          }
        });
        console.log('User selected new range:', ranges)
      }}
    />
  );
}
```

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

### Monitor Viewport Changes in Deephaven Grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example shows how to monitor viewport changes in Deephaven Grid, such as scrolling or shifts in view. The `onViewChanged` callback is invoked whenever the viewport is updated, providing metrics about the current view. This is useful for performance optimizations or implementing lazy loading strategies. The `useMemo` hook ensures efficient initialization of the `MockGridModel`.

```jsx
function Example() {
  const model = useMemo(() => new MockGridModel({ rowCount: 1000 }), []);

  return (
    <Grid
      model={model}
      onViewChanged={metrics => console.log('Viewport updated:', metrics)}
    />
  );
}
```

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

### Import and Use Icons with Font Awesome React

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/icons/README.md

Demonstrates how to install the necessary packages and import custom icons from '@deephaven/icons' to be used with Font Awesome's React component. This allows for seamless integration of Deephaven's specific icons alongside standard Font Awesome icons.

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {vsAccount, dhTruck} from `@deephaven/icons`;

[...] 
<FontAwesomeIcon icon="vsAccount" />
<FontAwesomeIcon icon="dhTruck" />
```

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

### Customize Grid Mouse and Keyboard Events with Custom Handlers

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example demonstrates how to create custom mouse and keyboard handlers for Deephaven Grid. The `CustomMouseHandler` triggers an alert on double-click, and `CustomKeyHandler` triggers an alert when a key is pressed. These custom handlers can be used to define specific behaviors for user interactions within the grid. Dependencies include `MockGridModel`, `GridMouseHandler`, and `KeyHandler`.

```jsx
const model = new MockGridModel();
class CustomMouseHandler extends GridMouseHandler {
  onDoubleClick(gridPoint) {
    alert(`Double clicked: (${gridPoint.column}, ${gridPoint.row})`);
    return true;
  }
}
class CustomKeyHandler extends KeyHandler {
  onDown(event) {
    alert(`Key pressed: ${event.key}`);
    return true;
  }
}
const myMouseHandler = new CustomMouseHandler();
const myKeyHandler = new CustomKeyHandler();
render(
  <Grid
    model={model}
    mouseHandlers={[myMouseHandler]}
    keyHandlers={[myKeyHandler]}
  />
);
```

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

### Customize Grid Rendering with CustomGridRenderer

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/display-data/custom-renderer.md

This example shows how to extend the GridRenderer class and override the drawCanvas method to gain full control over the grid's rendering pipeline. It demonstrates rendering specific parts of the grid by selectively calling superclass methods.

```jsx
const model = new MockGridModel();

class CustomGridRenderer extends GridRenderer {
  drawCanvas(state: GridRenderState): void {
    const { context } = state;

    context.save();

    this.configureContext(context, state);

    this.drawBackground(context, state);

    this.drawGrid(context, state);

    this.drawHeaders(context, state);

    this.drawFooters(context, state);

    this.drawDraggingColumn(context, state);

    this.drawDraggingRow(context, state);

    // this.drawScrollBars(context, state);

    context.restore();
  }
}

const myRenderer = new CustomGridRenderer();

render(<Grid model={model} renderer={myRenderer} />);
```

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

### Customize Canvas Rendering with JSX

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/canvas-options.md

This example demonstrates how to customize canvas rendering options within a React component using the `canvasOptions` prop. It includes setting background color and transparency. The `StaticDataGridModel` is used to define the grid data.

```jsx
function Example() {
  const model = useMemo(
    () =>
      new StaticDataGridModel(
        [
          ['Matthew Austins', 'Toronto', 35, 22],
          ['Doug Millgore', 'Toronto', 14, 33],
          ['Bart Marchant', 'Boston', 20, 14],
          ['Luigi Dabest', 'Pittsburgh', 66, 33],
        ],
        ['Name', 'Team', 'Goals', 'Assists']
      ),
    []
  );

  return (
    <div
      style={{
        position: 'relative',
      }}
    >
      <div
        style={{
          position: 'absolute',
          width: '160px',
          height: '160px',
          backgroundColor: 'blue',
          borderRadius: '50%',
          top: '50px',
          left: '200px',
          zIndex: 0,
        }}
      />
      <div
        style={{
          position: 'absolute',
          width: '160px',
          height: '160px',
          backgroundColor: 'green',
          top: '120px',
          right: '150px',
          zIndex: 0,
        }}
      />
      <Grid
        model={model}
        canvasOptions={{ alpha: true }}
        theme={{ backgroundColor: '#00000022' }}
        style={{ position: 'relative', zIndex: 1 }}
      />
    </div>
  );
}
```

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

### Handle Token Clicks in Deephaven Grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example demonstrates handling token clicks within Deephaven Grid cells. The `onTokenClicked` callback is triggered when a user interacts with a recognized token (like email addresses or URLs) within a cell. This callback allows custom actions to be performed based on the clicked token. The `useMemo` hook is used for efficient `MockGridModel` initialization.

```jsx
function Example() {
  const model = useMemo(() => new MockGridModel({ rowCount: 50 }), []);

  return (
    <Grid
      model={model}
      onTokenClicked={token => console.log('User clicked a token:', token)}
    />
  );
}
```

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

### Track Row Movement in Deephaven Grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example shows how to track row reordering in Deephaven Grid. `onMovedRowsChanged` provides continuous updates as rows are dragged, logging the current state of the moved rows. `onMoveRowComplete` is called once the row move operation is finished, logging the final state. The `useMemo` hook is used for efficient `MockGridModel` initialization.

```jsx
function Example() {
  const model = useMemo(() => new MockGridModel({ rowCount: 100 }), []);

  return (
    <Grid
      model={model}
      onMovedRowsChanged={movedRows => console.log('Dragging rows:', movedRows)}
      onMoveRowComplete={movedRows =>
        console.log('Finished moving rows:', movedRows)
      }
    />
  );
}
```

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

### Simulate Async Data Loading for Grid (React/JSX)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/display-data/asynchronous.md

This example demonstrates how to simulate asynchronous data loading for a Deephaven grid component using React. It utilizes a timeout to mimic network latency and updates the ViewportDataGridModel with the fetched data. The grid is then refreshed to display the new data. Dependencies include React hooks like useMemo, useRef, useState, and useEffect, along with Deephaven's ViewportDataGridModel and Grid components.

```jsx
/**
 * An example showing data loading asynchronously for a grid.
 */
function AsyncExample() {
  // Use a Viewport data model that we update asynchronously to display the data
  const model = useMemo(
    () => new ViewportDataGridModel(1000000000, 1000000),
    []
  );
  const grid = useRef();

  // The current viewport
  const [viewport, setViewport] = useState({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  });

  const handleViewChanged = useCallback(metrics => {
    // Pull out the viewport from the metrics
    const { top, bottom, left, right } = metrics;
    setViewport({ top, bottom, left, right });
  }, []);

  const { top, bottom, left, right } = viewport;
  useEffect(() => {
    let isCancelled = false;

    // Simulate fetching data asynchronously by using a timeout
    setTimeout(() => {
      if (isCancelled) return;

      // Generate the data for the viewport
      const data = [];
      for (let i = top; i <= bottom; i += 1) {
        const rowData = [];
        for (let j = left; j <= right; j += 1) {
          rowData.push(`${i},${j}`);
        }
        data.push(rowData);
      }
      model.viewportData = {
        rowOffset: top,
        columnOffset: left,
        data,
      };

      // Refresh the grid
      grid.current.forceUpdate();
    }, 250);
    return () => {
      isCancelled = true;
    };
  }, [top, bottom, left, right, model]);

  return <Grid model={model} onViewChanged={handleViewChanged} ref={grid} />;
}

```

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

### Pass Custom Values to GridRenderer using stateOverride

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/display-data/custom-renderer.md

This example illustrates how to use the stateOverride prop to pass custom data into a GridRenderer. The stateOverride object is merged into the render state, making custom values accessible within any renderer method, such as for dynamic styling or rendering flags.

```jsx
const model = new MockGridModel();

class CustomGridRenderer extends GridRenderer {
  drawCanvas(state: GridRenderState): void {
    const { context, width, height, stateOverride } = state;

    context.save();

    this.configureContext(context, state);
    this.drawBackground(context, state);
    this.drawGrid(context, state);
    this.drawHeaders(context, state);
    this.drawFooters(context, state);
    this.drawDraggingColumn(context, state);
    this.drawDraggingRow(context, state);

    context.restore();
  }
}

const myRenderer = new CustomGridRenderer();

render(
  <Grid
    model={model}
    renderer={myRenderer}
    stateOverride={{ highlight: true }}
  />
);
```

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

### Track Column Movement in Deephaven Grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example demonstrates how to track column drag operations in Deephaven Grid using callbacks. `onMovedColumnsChanged` fires continuously during the drag, logging the current state of moved columns. `onMoveColumnComplete` fires once when the column move operation is finished, logging the final state of the moved columns. The `useMemo` hook is used to memoize the `MockGridModel`.

```jsx
function Example() {
  const model = useMemo(() => new MockGridModel({ columnCount: 10 }), []);

  return (
    <Grid
      model={model}
      onMovedColumnsChanged={movedColumns =>
        console.log('Dragging columns:', movedColumns)
      }
      onMoveColumnComplete={movedColumns =>
        console.log('Finished moving columns:', movedColumns)
      }
    />
  );
}
```

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

### Override Grid Default Mouse Event Behavior

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/interaction.md

This example shows how to override the default cell selection behavior in Deephaven Grid by implementing a custom mouse handler. The `CustomMouseHandler` checks if the clicked cell is in an even column or row. If it is, an alert is displayed, and the default behavior is prevented by returning `true`. Otherwise, it returns `false`, allowing the default behavior to proceed. The `order` property ensures this handler is processed before the default handler.

```jsx
const model = new MockGridModel();
class CustomMouseHandler extends GridMouseHandler {
  onDown(gridPoint) {
    if (gridPoint.column % 2 === 0 || gridPoint.row % 2 === 0) {
      alert(
        `Clicked even column or row: (${gridPoint.column}, ${gridPoint.row})`
      );
      return true;
    }
    return false;
  }
}

// Set order to 10 to ensure this handler is called before the default handler
const myMouseHandler = new CustomMouseHandler(50);
render(<Grid model={model} mouseHandlers={[myMouseHandler]} />);
```

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

### Bump Version, Update Changelog, Create GitHub Release (npm)

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Automates the process of version bumping, changelog generation, and creating a GitHub release. Requires a GitHub Personal Access Token with repository read/write access and specifies the git remote to use.

```shell
GH_TOKEN=<token> npm run version-bump -- --git-remote origin
```

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

### Update End-to-End Snapshots for CI

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Updates end-to-end snapshots using a Docker image to ensure consistency with the CI environment, especially when differences in OS or system fonts exist.

```bash
npm run e2e:update-ci-snapshots
```

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

### Build @deephaven/golden-layout

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/golden-layout/README.md

Builds the @deephaven/golden-layout package, converting SCSS to CSS and combining JS files into the dist folder.

```bash
npm run build
```

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

### Initialize Redux Store Structure

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Illustrates the typical structure of Redux reducers for managing application state. The actual implementation details and stored data can be found within src/redux/reducers/index.js and its individual reducer files. This structure is for the current session's data.

```javascript
src/redux/reducers/index.js
```

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

### Basic Usage of @deephaven/log

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/log/README.md

Demonstrates how to import and use the logging functionalities provided by the @deephaven/log library. It covers setting the log level, logging messages directly, creating and using log modules, and utilizing various logging methods (debug, info, warn, error).

```javascript
import Log from '@deephaven/log'
import { LoggerLevel } from '@deephaven/log'

// Set the level of logging you want in your app (default is INFO).
Log.setLogLevel(LoggerLevel.DEBUG2);

// Log messages directly
Log.info('basic info level log message');

// Create a log module
const log = Log.module('MyModuleName');

// Use different logging methods
log.debug2('debug2 level log message');
log.debug('debug level log message');
log.info('info level log message');
log.log('alias for log.info');
log.warn('warning level log message');
log.error('error level log message');
```

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

### Analyze Bundle Size with Source Map Explorer

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

This snippet demonstrates how to analyze the size of JavaScript bundles produced by the build process. It first builds a production bundle and then uses 'source-map-explorer' to visualize the composition of the bundle, helping identify large components. This is useful when adding new features to optimize package size.

```bash
npm run build
npx source-map-explorer 'packages/code-studio/build/static/js/*.js'
```

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

### Run Playwright Codegen for Test Creation

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Launches Playwright's codegen tool, which records user interactions in the browser and generates corresponding test code, aiding in the creation of new end-to-end tests.

```bash
npm run e2e:codegen
```

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

### Run Jest Unit Tests with Coverage

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

This command executes Jest unit tests and collects code coverage information. The `-- --coverage` flag instructs Jest to generate a coverage report, which is useful for assessing the thoroughness of test suites.

```bash
npm test -- --coverage
```

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

### Usage: Context-based API Loading with JavaScript

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-bootstrap/README.md

Demonstrates how to use the `ApiBootstrap` component and the `useApi` hook to load and access the JS API within a React component's context. It requires providing the `apiUrl` to `ApiBootstrap`.

```javascript
import { ApiBootstrap, useApi } from '@deephaven/jsapi-bootstrap';

function MyComponent() {
  const api = useApi();

  ...
}

<ApiBootstrap apiUrl={API_URL}>
  <MyComponent />
</ApiBootstrap>;
```

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

### Test @deephaven/golden-layout

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/golden-layout/README.md

Runs tests for the @deephaven/golden-layout package in watch mode or for continuous integration.

```bash
npm test
npm run test:ci
```

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

### Usage: Global API Loading (Legacy) with JavaScript

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-bootstrap/README.md

Illustrates the pattern for using `ApiBootstrap` to set the JS API globally, maintaining legacy behavior. This approach requires lazy loading components to ensure the API is available before they are imported and used. The `setGlobally` prop is crucial for this functionality.

```javascript
// App.tsx
import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';

const MyComponent = React.lazy(() => import('./MyComponent'));

<ApiBootstrap apiUrl={API_URL} setGlobally>
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
</ApiBootstrap>;

// MyComponent.tsx
import dh from '@deephaven/jsapi-shim';
function MyComponent() {
  const client = new dh.CoreClient(...);

  ...
}
```

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

### Run E2E Tests in Docker (npm)

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Executes End-to-End tests within a Docker container for CI-like testing. This ensures tests run in an isolated environment, mirroring CI conditions. No external dependencies are required as they are managed within the Docker image.

```shell
npm run e2e:docker
```

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

### Run End-to-End Tests in Headed Mode

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Executes end-to-end tests in a visible browser window, useful for debugging. It ignores snapshots, allowing tests to continue even if a snapshot comparison fails.

```bash
npm run e2e:headed -- ./tests/table.spec.ts
```

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

### Update End-to-End Snapshots Locally

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Updates the visual regression snapshots for end-to-end tests on the local machine. This command should be run after making changes that affect UI appearance.

```bash
npm run e2e:update-snapshots
```

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

### Import and Use IrisGrid Component

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/iris-grid/README.md

This code demonstrates how to import the necessary components from '@deephaven/iris-grid' and '@deephaven/jsapi-bootstrap'. It shows the asynchronous creation of an IrisGridModel using `IrisGridModelFactory.makeModel` and its subsequent use within the `IrisGrid` component in a React render function.

```javascript
import { useApi } from '@deephaven/jsapi-bootstrap';
import { IrisGrid, IrisGridModelFactory } from '@deephaven/iris-grid';

// In your initialization, create the model async
const dh = useApi();
const model = await IrisGridModelFactory.makeModel(dh, table);

// In your render function
<IrisGrid dh={dh} model={model} />
```

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

### Display Quadrillions of Rows/Columns with @deephaven/grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/README.md

Shows how to use MockGridModel to display a grid with a virtually unlimited number of rows and columns. This is achieved through virtualization, making it suitable for very large datasets. The grid supports editing and drag-and-drop reordering.

```jsx
import React, { useState } from 'react';
import { Grid, MockGridModel } from '@deephaven/grid';

const GridQuadrillionExample = () => {
  const [model] = useState(
    () =>
      new MockGridModel({
        rowCount: Number.MAX_SAFE_INTEGER,
        columnCount: Number.MAX_SAFE_INTEGER,
        isEditable: true,
      })
  );

  return <Grid model={model} />;
};

export default GridQuadrillionExample;
```

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

### Virtualized Grid Initialization (React)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/display-data/quadrillion.md

This snippet demonstrates how to initialize a virtualized grid using MockGridModel in a React component. It sets the row and column counts to Number.MAX_SAFE_INTEGER and enables editing. The component relies on the 'react' and 'deephaven/grid' libraries.

```jsx
function Example() {
  const model = useMemo(
    () =>
      new MockGridModel({
        rowCount: Number.MAX_SAFE_INTEGER,
        columnCount: Number.MAX_SAFE_INTEGER,
        isEditable: true,
      }),
    []
  );

  return <Grid model={model} />;
}
```

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

### Run End-to-End Tests with Playwright CLI Arguments

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Executes Playwright end-to-end tests, allowing arguments to be passed directly to the Playwright CLI for filtering tests or specifying browsers.

```bash
npm run e2e -- ./tests/table.spec.ts
```

```bash
npm run e2e -- --project firefox ./tests/table.spec.ts
```

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

### Usage: Load Deephaven Jsapi Modules in Node.js

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/jsapi-nodejs/README.md

Demonstrates how to load Deephaven Jsapi modules from a server in a Node.js application using ESM. It handles setting up __dirname for ESM, downloading the Jsapi modules to a specified directory, and initializing a CoreClient for server communication. It also shows how to enable http2 transport and log in anonymously.

```typescript
import fs from 'node:fs';
import path from 'node:path';

import { loadDhModules } from '@deephaven/jsapi-nodejs';

// Needed for esm modules
if (typeof globalThis.__dirname === 'undefined') {
  globalThis.__dirname = import.meta.dirname
}

const tmpDir = path.join(__dirname, 'tmp');

// Download jsapi from a Deephaven server
const dhc = await loadDhModules({
  serverUrl: new URL('http://localhost:10000'),
  storageDir: tmpDir,
  targetModuleType: 'esm', // set to `cjs` to download as a CommonJS module
});

const client = new dhc.CoreClient(serverUrl.href, {
  // Enable http2 transport (this is optional but recommended)
  transportFactory: NodeHttp2gRPCTransport.factory,
})

await client.login({
  type: dhc.CoreClient.LOGIN_TYPE_ANONYMOUS,
})

const cn = await client.getAsIdeConnection()
```

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

### Configure API Server URL

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Sets the VITE_CORE_API_URL environment variable to point the Code Studio to a specific API server. This is useful for development and testing against remote instances. It is typically added to the .env.development.local file.

```shell
VITE_CORE_API_URL=https://www.myserver.com/jsapi
```

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

### Configure Deephaven Core Host URL in .env.local

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

This snippet shows how to configure the Deephaven Core host URL for the web client UI when it differs from the default. This is crucial for correct session websocket and proxying by Vite. The `VITE_PROXY_URL` variable should be set in the `.env.local` file within each package that requires this configuration.

```dotenv
VITE_PROXY_URL=http://<dhc-host>:<port>
```

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

### Clone Deephaven Web Client UI Repository

Source: https://github.com/deephaven/web-client-ui/blob/main/CONTRIBUTING.md

This command clones the Deephaven Web Client UI repository from GitHub. Replace `<username>` with your GitHub username. Ensure you have SSH access configured for GitHub.

```git
git clone git@github.com:<username>/web-client-ui.git
```

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

### Run Debug Jest Tests with VS Code

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

Launches Jest tests with a debugger attached, prompting for a test name or pattern. This allows for interactive debugging of unit tests within VS Code.

```bash
npm run test:debug ThemeUtils
```

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

### Configure ESLint in package.json

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/eslint-config/README.md

Adds the Deephaven ESLint configuration to your project's `package.json` file by extending the `@deephaven/eslint-config`. This enables the predefined linting rules.

```json
"eslintConfig": {
  "extends": "@deephaven/eslint-config"
}
```

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

### Override Vite Config for Local Development

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

This TypeScript code overrides the default Vite configuration for local development. It extends the base Vite configuration and sets up a proxy to redirect '/js-plugins' requests to a local development server running on 'http://localhost:5173'. This allows for seamless local testing of plugins.

```typescript
import { defineConfig as defineConfigBase, UserConfigFn, UserConfig } from 'vite';
import createBaseConfig from './vite.config';

const defineConfig = defineConfigBase as UserConfigFn;

export default defineConfig((config: ConfigEnv) => {
  const baseConfig = (createBaseConfig as UserConfigFn)(config) as UserConfig;

  return {
    ...baseConfig,
    server: {
      ...baseConfig.server,
      proxy: {
        ...baseConfig.server?.proxy,
        '/js-plugins': {
          target: 'http://localhost:5173',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/js-plugins/, ''),
        },
      },
    },
  };
});
```

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

### React: Asynchronous Grid Data Loading

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/README.md

This React component demonstrates how to simulate asynchronous data loading for a grid. It uses a `ViewportDataGridModel` and `setTimeout` to mimic fetching data from a server, updating the grid's viewport with new data after a delay. The component relies on React hooks like `useState`, `useRef`, `useEffect`, and `useCallback`.

```jsx
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Grid, ViewportDataGridModel } from '@deephaven/grid';

/**
 * An example showing data loading asnychronously for a grid.
 */
const AsyncExample = () => {
  // Use a Viewport data model that we update asynchronously to display the data
  const [model] = useState(
    () => new ViewportDataGridModel(1_000_000_000, 1_000_000)
  );
  const grid = useRef();

  // The current viewport
  const [viewport, setViewport] = useState({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  });

  const handleViewChanged = useCallback(metrics => {
    // Pull out the viewport from the metrics
    const { top, bottom, left, right } = metrics;
    setViewport({ top, bottom, left, right });
  }, []);

  const { top, bottom, left, right } = viewport;
  useEffect(() => {
    let isCancelled = false;

    // Simulate fetching data asynchronously by using at timeout
    setTimeout(() => {
      if (isCancelled) return;

      // Generate the data for the viewport
      const data = [];
      for (let i = top; i <= bottom; i += 1) {
        const rowData = [];
        for (let j = left; j <= right; j += 1) {
          rowData.push(`${i},${j}`);
        }
        data.push(rowData);
      }
      model.viewportData = {
        rowOffset: top,
        columnOffset: left,
        data,
      };

      // Refresh the grid
      grid.current.forceUpdate();
    }, 250);
    return () => {
      isCancelled = true;
    };
  }, [top, bottom, left, right, model]);

  return <Grid model={model} onViewChanged={handleViewChanged} ref={grid} />;
};

export default AsyncExample;

```

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

### Configure Local Vite Dev Port for JS Plugins

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

This configuration snippet sets the Vite development server port for proxying JavaScript plugin requests. It is used in the `.env.development.local` file to redirect requests to a locally running dev server.

```env
VITE_JS_PLUGINS_DEV_PORT=4100
```

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

### Display Expandable Rows with @deephaven/grid

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/README.md

Illustrates the use of MockTreeGridModel to display hierarchical data with expandable rows. This model is designed for tree-like data structures, allowing users to navigate and interact with nested information.

```jsx
import React, { useState } from 'react';
import { Grid, MockTreeGridModel } from '@deephaven/grid';

const TreeExample = () => {
  const [model] = useState(() => new MockTreeGridModel());

  return <Grid model={model} />;
};

export default TreeExample;
```

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

### Usage of @deephaven/dashboard React Component

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/dashboard/README.md

Demonstrates how to import and use the Dashboard component from '@deephaven/dashboard' in a React application. It shows how to render a custom dashboard plugin within the Dashboard component.

```jsx
import React, { Component } from 'react';
import Dashboard from '@deephaven/dashboard';
import MyDashboardPlugin from './MyDashboardPlugin';

class Example extends Component {
  render() {
    return (
      <Dashboard>
        <MyDashboardPlugin />
      </Dashboard>
    );
  }
}
```

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

### Dashboard Layout with Golden Layout

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Describes the primary application layout using Dashboards, which are top-level tabs. LazyDashboardContainer is used before activation, and upon activation, it loads its layout using Golden Layout. The layout is composed of numerous Panels and listens for TabEvents and Golden Layout EventHub events.

```jsx
src/dashboard/DashboardContainer.jsx
```

```jsx
src/dashboard/LazyDashboardContainer.jsx
```

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

### Intercept Console Logging with LogProxy

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/log/README.md

Shows how to enable the LogProxy to intercept all console messages. This allows for centralized logging and potential redirection or modification of standard console output.

```javascript
import { LogProxy } from '@deephaven/log';

const logProxy = new LogProxy();
logProxy.enable();
```

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

### Local Workspace Storage Implementation

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Provides implementation details for storing workspace data persistently between sessions using the browser's localStorage. The code for this functionality is located in src/dashboard/LocalWorkspaceStorage.ts.

```typescript
src/dashboard/LocalWorkspaceStorage.ts
```

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

### Store Log History with LogHistory

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/log/README.md

Illustrates how to enable LogHistory to store all log messages in memory. This feature requires LogProxy to be enabled first and is useful for later consumption or exporting of log data.

```javascript
import { LogProxy } from '@deephaven/log';
import { LogHistory } from '@deephaven/log';

const logProxy = new LogProxy();
logProxy.enable();

const logHistory = new LogHistory(logProxy);
logHistory.enable();
```

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

### Tab Event Handling

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Illustrates how the DashboardContainer listens for TabEvents from the higher-level application to manage tabs. This is part of the event handling mechanism for the dashboard components.

```javascript
src/main/tabs/TabEvent.js
```

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

### Display Static Data in Deephaven Grid (React)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/display-data/static.md

This snippet shows how to initialize and use the StaticDataGridModel to display a predefined array of data along with column headers in a Deephaven grid. It leverages the `useMemo` hook for efficient model creation.

```jsx
function Example() {
  const model = useMemo(
    () =>
      new StaticDataGridModel(
        [
          ['Matthew Austins', 'Toronto', 35, 22],
          ['Doug Millgore', 'Toronto', 14, 33],
          ['Bart Marchant', 'Boston', 20, 14],
          ['Luigi Dabest', 'Pittsburgh', 66, 33],
        ],
        ['Name', 'Team', 'Goals', 'Assists']
      ),
    []
  );

  return <Grid model={model} />;
}
```

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

### Enable Log Proxy

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/code-studio/README.md

Controls the VITE_ENABLE_LOG_PROXY environment variable to activate a logger proxy. When enabled, it captures log messages for easier export of debug information, though it may affect console line numbers. Defaults to false in development and true in production. Related classes DHLogProxy and DHLogHistory are exposed globally in development.

```shell
VITE_ENABLE_LOG_PROXY=true
```

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

### Configure Log Level for Jest Tests

Source: https://github.com/deephaven/web-client-ui/blob/main/README.md

This command runs Jest unit tests while enabling all log messages from the @deephaven/log package. By setting the `DH_LOG_LEVEL` environment variable to `4`, developers can increase the verbosity of logs during testing to aid in debugging.

```bash
DH_LOG_LEVEL=4 npm test
```

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

### Configure Deephaven Server Address (Environment Variable)

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/embed-widget/README.md

Sets the environment variable VITE_CORE_API_URL to configure the connection to the Deephaven server. This is useful if Deephaven is running on a non-default port or server. Refer to Vite documentation for more configuration methods.

```bash
# Example: .env file
VITE_CORE_API_URL=http://your-deephaven-server:port
```

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

### Extend GridMetricCalculator for Accessibility in JavaScript/TypeScript

Source: https://github.com/deephaven/web-client-ui/blob/main/packages/grid/docs/customize/metric-calculator.md

This snippet demonstrates extending the GridMetricCalculator to implement accessibility features. It overrides methods like getGridX, getGridY, getVisibleRowHeight, and calculateColumnWidth to adjust spacing and sizing for high contrast and larger touch targets. Dependencies include the GridMetricCalculator class itself and a MockGridModel.

```jsx
class AccessibilityGridCalculator extends GridMetricCalculator {
  constructor(options = {}) {
    super(options);
    this.accessibilityMode = options.accessibilityMode || 'normal';
    this.highContrastMode = options.highContrastMode || false;
  }

  getGridX(state) {
    const baseX = super.getGridX(state);

    // Add extra spacing in high contrast mode
    if (this.highContrastMode) {
      return baseX + 4;
    }

    return baseX;
  }

  getGridY(state) {
    const baseY = super.getGridY(state);

    // Add extra spacing in high contrast mode
    if (this.highContrastMode) {
      return baseY + 4;
    }

    return baseY;
  }

  getVisibleRowHeight(row, state) {
    const baseHeight = super.getVisibleRowHeight(row, state);

    // Increase touch targets for accessibility
    if (this.accessibilityMode === 'large') {
      return Math.max(baseHeight, 44); // WCAG recommended minimum
    }

    return baseHeight;
  }

  calculateColumnWidth(column, modelColumn, state, firstColumn, treePaddingX) {
    const baseWidth = super.calculateColumnWidth(
      column,
      modelColumn,
      state,
      firstColumn,
      treePaddingX
    );

    // Add minimum width for accessibility
    if (this.accessibilityMode === 'large') {
      return Math.max(baseWidth, 120);
    }

    return baseWidth;
  }
}

const myGridMetricCalculator = new AccessibilityGridCalculator({
  accessibilityMode: 'large',
  highContrastMode: true,
});
const model = new MockGridModel();

render(<Grid model={model} metricCalculator={myGridMetricCalculator} />);
```