useSweep

Fetches hyperparameter sweep data for parallel coordinates visualization.

Overview

The useSweep hook provides filtering and querying capabilities for hyperparameter sweep data, designed for parallel coordinates charts and other multi-dimensional visualizations.

Hook Interface

export type UseSweepHook = <T = any>(query: {
  prefix?: string;
  glob?: string;
  filters?: Record<string, any>;
}) => {
  data: T[];
  loading: boolean;
  error: Error | null;
};

Reference Implementation

1. Define the fetch function

The fetch function handles the data retrieval logic:

async function fetchSweep<T = any>(query: {
  prefix?: string;
  glob?: string;
  filters?: Record<string, any>;
}): Promise<T[]> {
  const response = await fetch("/api/sweep", {
    method: "POST",
    body: JSON.stringify(query),
  });
  return await response.json();
}

2. Pass to SweepDataProvider

The provider builds the internal useSweep hook using your fetch function:

<SweepDataProvider fetchSweep={fetchSweep}>
  <YourCharts />
</SweepDataProvider>

3. Internal hook implementation

The provider internally creates the useSweep hook with loading and error states:

// Inside SweepDataProvider
function useSweep<T = any>(query: {
  prefix?: string;
  glob?: string;
  filters?: Record<string, any>;
}) {
  const [data, setData] = useState<T[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        setLoading(true);
        setError(null);
        const result = await fetchSweep<T>(query);
        if (!cancelled) setData(result);
      } catch (err) {
        if (!cancelled) setError(err as Error);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();
    return () => { cancelled = true; };
  }, [query]);

  return { data, loading, error };
}

Usage Examples

All Configurations

const { data } = useSweep({ prefix: "sweep" });

Filter by Layer Count

const { data } = useSweep({
  prefix: "sweep",
  filters: { num_layers: 3 }
});

Filter by Learning Rate

const { data } = useSweep({
  prefix: "sweep",
  filters: { lr: 0.001 }
});

Hyperparameter Sweep Example Data

Hyperparameter configurations for parallel coordinates visualization.

Data Structure

export interface HyperparameterRun {
  from: string;
  lr: number;
  batch_size: number;
  hidden_dim: number;
  num_layers: number;
  gamma: number;
  tau: number;
  entropy_coef: number;
  "eval.reward": number;
  "eval.success_rate": number;
  converged_step: number;
}

export const hyperparameterRuns: HyperparameterRun[] = [...];

Contents

• 15 configurations exploring parameter space
• lr: 0.0001 to 0.01
• batch_size: 32, 64, 128, 256
• hidden_dim: 128 to 512
• Performance metrics for each configuration

Helper Functions

getNestedValue

Access nested object properties via dot notation.

function getNestedValue(obj: any, path: string): any {
  return path.split('.').reduce((acc, key) => acc?.[key], obj);
}

// Examples:
getNestedValue(run, "metrics.reward")     // run.metrics.reward
getNestedValue(run, "eval.success_rate")  // run.eval.success_rate

Custom Backend Integration

Replace the example fixtures with your own data source:

// API backend
export function useSweep<T = any>(query: {
  prefix?: string;
  glob?: string;
  filters?: Record<string, any>;
}) {
  const [data, setData] = useState<T[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch('/api/sweep', {
          method: 'POST',
          body: JSON.stringify(query)
        });
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [query]);

  return { data, loading, error };
}

Related Documentation

• Data Hooks Overview - Data providers and hook system
• Parallel Coordinates Chart - Using sweep data for parallel coordinates
• Data Query Examples - Query patterns and examples
• Data Structure & Format Guide - Columnar data format specification