State Explorer: A Zoomable Timeline for React

I turned an old Azure visualization idea into an open-source React component. The useful part is the little window at the bottom.

Imagine an API that was healthy all morning, degraded for five minutes, then healthy again. On a chart showing six hours, that five-minute interval is easy to skim past. A table gives you the exact timestamps, but makes it harder to see how that incident fits into the rest of the day.

I wanted both views at once: the whole story and a close look at the interesting bit.

The lower timeline keeps the full history in view. Drag its blue window to move through time, or resize an edge to zoom into the detail chart above.

Try the live demo — move the window, pull its left or right edge, and hover an interval. The demo has service health, build pipelines, and device states, all using the same component.

The zoom window

The bottom overview shows the full time range. The blue window inside it selects the period shown in the larger chart above. Drag the middle to move to another period without changing its duration. Drag either edge to widen or narrow the period. The upper chart updates so you can inspect state changes that were hard to make out at full scale.

It feels a little like sliding a magnifying glass over the timeline. Except the magnifying glass has handles, and thankfully doesn’t roll off your desk.

Hover or focus a state interval to see its state and original start and end times. Reset view takes you back to the starting range. The window also has keyboard controls, so dragging isn’t the only way to navigate.

An idea from 2015

In 2015, I joined an internal Azure project that collected logs, metrics, and errors from resources such as virtual machines. We needed an availability page, and I kept coming back to the same question: how do you show a full day of history and still let someone investigate a brief outage?

I spent a lot of time on that question. I even missed a Thanksgiving trip to California with friends while working through the design. Eventually I built a two-level timeline with jQuery and D3.js: full history below, selected detail above. The project later moved to Angular, and I rebuilt the component for it.

The earlier Availability Explorer. I kept a simplified standalone version and its demo on GitHub.

In 2021, I heard that the component was still being used. That was a lovely surprise. The code had changed, but the interaction had proved useful for years.

State Explorer is a new implementation of that idea, built for more than availability data. Its TypeScript core handles time intervals and projection; its React package renders the SVG timeline and overview navigator. Your app supplies the entities, state intervals, and colors.

Try it

Install the two packages in a React 18 or 19 application:

npm install @state-explorer/core @state-explorer/react

Here is a small example with one five-minute degraded interval:

import { useState } from "react";
import { StateTimeline } from "@state-explorer/react";
import type { Entity, StateInterval, TimeRange } from "@state-explorer/core";

const at = (time: string) => Date.parse(`2026-09-10T${time}:00Z`);
const domain: TimeRange = { start: at("08:00"), end: at("14:00") };
const entities: Entity[] = [{ id: "api", label: "API" }];
const intervals: StateInterval<"healthy" | "degraded">[] = [
  { entityId: "api", start: at("08:00"), end: at("10:20"), state: "healthy" },
  { entityId: "api", start: at("10:20"), end: at("10:25"), state: "degraded" },
  { entityId: "api", start: at("10:25"), end: at("14:00"), state: "healthy" },
];

export function Example() {
  const [viewport, setViewport] = useState<TimeRange>({
    start: at("10:00"), end: at("12:00"),
  });
  return (
    <StateTimeline
      entities={entities}
      intervals={intervals}
      domain={domain}
      viewport={viewport}
      onViewportChange={setViewport}
      label="API state history"
      getStateAppearance={interval => interval.state === "healthy"
        ? { fill: "#167d73", label: "Healthy" }
        : { fill: "#b87916", label: "Degraded" }}
    />
  );
}

The overview covers 08:00–14:00 UTC; the detail chart starts at 10:00–12:00. The five-minute change is at 10:20. The viewport is controlled by your app: moving or resizing the window calls onViewportChange, and the chart follows the range you pass back. You can also constrain or reject a proposed range. See the checked Quick Start for a larger two-entity example.

Scope and limits

State Explorer is useful when several entities move through discrete states over time: healthy/degraded/down, queued/building/deployed, online/offline, and similar histories. It doesn’t fetch data or decide what a gap means. You provide the intervals; it shows them on a shared time axis. There is no aggregation or virtualization yet, and the 0.1.x API is experimental. Large-data performance, physical touch devices, other browser engines, and real screen readers still need broader validation.

I would love to hear where a view like this helps, and where it gets in the way. Play with the demo, explore the source and docs, or open an issue with a real use case.