Search

Login

Save/Load Snapshot

Log in to view live example
Save/Load Snapshot
Scroll to example

After interacting with the timeline, click the "Save" button to save a snapshot of its current state.

You can subsequently restore the timeline to that state using the "Load Snapshot" drop-down.

We're using serialize() to create a snapshot, and then restoring it using load().

See Also

After interacting with the timeline, click the "Save" button to save a snapshot of its current state.

You can subsequently restore the timeline to that state using the "Load Snapshot" drop-down.

We're using serialize() to create a snapshot, and then restoring it using the spread operator and onTimelineChange (to also capture user state changes).

See Also

import { createTimeline } from "kronograph";
import data, { createPresetSnapshots } from "./data";

const timeline = createTimeline("my-timeline");

// Timeline options
const timelineOptions = {
  events: {
    heatmapThreshold: 20,
    heatmapValue: null,
    heatmapDirection: "any",
  },
};
timeline.options(timelineOptions);
timeline.set(data);
timeline.fit();

// ------------------------
// VIEW SNAPSHOT MANAGEMENT
// ------------------------

let savedViewCounter = 1;
const savedViews = {};

// Capture initial snapshot and assign preset snapshots
const initialSnapshot = timeline.serialize();
const presetSnapshots = createPresetSnapshots(initialSnapshot);
const snapshotSelect = document.getElementById("load-select");

// Save View
document.getElementById("save-btn").addEventListener("click", () => {
  const snapshot = timeline.serialize();
  const name = `Saved View ${savedViewCounter++}`;
  savedViews[name] = snapshot;

  // Add the view to the dropdown
  const dropdown = document.getElementById("load-select");
  const newView = document.createElement("option");
  newView.value = name;
  newView.textContent = name;
  dropdown.prepend(newView);
});

// Reset View
document.getElementById("reset-btn").addEventListener("click", () => {
  snapshotSelect.value = "";
  // The initial view must be captured
  if (!initialSnapshot) {
    return;
  }

  timeline.load(initialSnapshot);
});

// Restore Snapshot Dropdown
document.getElementById("load-select").addEventListener("change", (e) => {
  const key = e.target.value;
  if (!key) {
    return;
  }

  // Restore saved view
  if (savedViews[key]) {
    timeline.load(savedViews[key]);
    return;
  }

  // Restore preset view
  if (presetSnapshots[key]) {
    const snap = presetSnapshots[key]();
    if (snap) {
      timeline.load(snap);
    }
    return;
  }
});
export default {
  entities: {
    "Aurora Bancorp": {
      color: "#4e79a7",
    },
    "Better Life Bank": {
      color: "#f28e2c",
    },
    "Ace Financial Group": {
      color: "#e15759",
    },
    "Grand Mutual Bank": {
      color: "#76b7b2",
    },
    "Felicity Financial Services": {
      color: "#59a14f",
    },
  },
  events: {
    event0: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 103,
      },
      time: 1_716_845_042_401.983,
    },
    event1: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1522,
      },
      time: 1_704_300_247_970.444,
    },
    event2: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2519,
      },
      time: 1_704_826_361_998.4548,
    },
    event3: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1744,
      },
      time: 1_721_561_387_584.9785,
    },
    event4: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1292,
      },
      time: 1_721_436_187_577.0662,
    },
    event5: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1913,
      },
      time: 1_715_184_891_178.0125,
    },
    event6: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1379,
      },
      time: 1_720_022_197_785.7358,
    },
    event7: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2108,
      },
      time: 1_713_047_293_850.0168,
    },
    event8: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 39_987,
      },
      time: 1_719_556_922_296.1238,
    },
    event9: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 6269,
      },
      time: 1_717_726_178_569.1255,
    },
    event10: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4629,
      },
      time: 1_718_167_137_411.861,
    },
    event11: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4112,
      },
      time: 1_719_690_540_773.6128,
    },
    event12: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 44_477,
      },
      time: 1_718_653_783_292.392,
    },
    event13: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 86_674,
      },
      time: 1_719_055_763_972.7158,
    },
    event14: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 96_953,
      },
      time: 1_718_812_764_374.0154,
    },
    event15: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 57_831,
      },
      time: 1_717_355_969_771.8218,
    },
    event16: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 1992,
      },
      time: 1_721_029_217_990.7224,
    },
    event17: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 471,
      },
      time: 1_722_545_977_814.828,
    },
    event18: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 2274,
      },
      time: 1_712_785_338_304.0298,
    },
    event19: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 3067,
      },
      time: 1_706_715_885_813.1304,
    },
    event20: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 670,
      },
      time: 1_705_034_721_408.0198,
    },
    event21: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 648,
      },
      time: 1_719_489_884_462.4038,
    },
    event22: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 325,
      },
      time: 1_721_614_571_235.6663,
    },
    event23: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 851,
      },
      time: 1_705_237_236_251.1895,
    },
    event24: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3121,
      },
      time: 1_721_380_170_448.32,
    },
    event25: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1778,
      },
      time: 1_719_476_838_892.334,
    },
    event26: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3781,
      },
      time: 1_714_459_016_034.4941,
    },
    event27: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1165,
      },
      time: 1_713_136_401_986.9214,
    },
    event28: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 2237,
      },
      time: 1_712_559_528_845.578,
    },
    event29: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1535,
      },
      time: 1_720_931_783_679.7734,
    },
    event30: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1622,
      },
      time: 1_721_528_143_853.7964,
    },
    event31: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 523,
      },
      time: 1_709_514_478_039.349,
    },
    event32: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1257,
      },
      time: 1_715_409_427_247.5706,
    },
    event33: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 736,
      },
      time: 1_707_482_336_867.2246,
    },
    event34: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 184,
      },
      time: 1_725_199_319_145.929,
    },
    event35: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1058,
      },
      time: 1_713_232_568_113.0273,
    },
    event36: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1429,
      },
      time: 1_721_868_788_309.195,
    },
    event37: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1197,
      },
      time: 1_707_839_323_010.2188,
    },
    event38: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2522,
      },
      time: 1_717_712_034_817.7363,
    },
    event39: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 3094,
      },
      time: 1_724_919_209_625.5513,
    },
    event40: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1121,
      },
      time: 1_718_493_292_818.4546,
    },
    event41: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2878,
      },
      time: 1_714_709_244_615.406,
    },
    event42: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1504,
      },
      time: 1_715_372_672_224.4255,
    },
    event43: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 320,
      },
      time: 1_710_331_215_554.826,
    },
    event44: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1906,
      },
      time: 1_710_184_345_462.6362,
    },
    event45: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1246,
      },
      time: 1_725_198_486_655.9883,
    },
    event46: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1476,
      },
      time: 1_706_451_804_586.463,
    },
    event47: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 192,
      },
      time: 1_723_811_742_494.3857,
    },
  },
  eventTypes: {
    default: {
      lineWidth: 2,
      color: "#00a2ed",
    },
  },
};

export function createPresetSnapshots(initialSnapshot) {
  // Snapshots can be taken only after the initial render
  if (!initialSnapshot) {
    return null;
  }

  const presetSnapshots = {
    "preset-1": () => {
      // Create a deep clone of the initial snapshot
      const snap = structuredClone(initialSnapshot);

      // Override annotations
      snap.annotations = {
        myAnnotation: {
          label: "These transactions have warnings",
          subject: ["event37", "event0"],
        },
      };

      // Override reveal
      snap.reveal = ["event0", "event37"];

      // Override range (zoom window)
      snap.range = {
        start: new Date("2023-12-22T14:28:14.411Z"),
        end: new Date("2024-09-13T15:17:52.704Z"),
        startNanoseconds: 0,
        endNanoseconds: 0,
      };

      return snap;
    },

    "preset-2": () => {
      const snap = structuredClone(initialSnapshot);

      // Override range (zoom window)
      snap.range = {
        start: new Date("2024-04-19T03:43:05.156Z"),
        end: new Date("2024-05-15T03:13:14.663Z"),
        startNanoseconds: 0,
        endNanoseconds: 0,
      };

      snap.focus = ["Felicity Financial Services"];

      snap.markers = [
        { label: "Marker 1", time: new Date("2024-05-10T03:13:14.663Z") },
      ];

      return snap;
    },
  };

  return presetSnapshots;
}
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css">
  </head>
  <body>
    <div class="story">
      <div class="story__timeline" id="my-timeline"></div>
      <div class="story__controls story__controls--row">
        <div class="story__controls__item">
          <button id="save-btn" class="button">Save</button>
          <button id="reset-btn" class="button">Reset</button>
        </div>
        <div class="story__controls__item">
          <label for="load-select">Load Snapshot</label>
          <select id="load-select" class="select">
            <option value="preset-2">Preset 2</option>
            <option value="preset-1">Preset 1</option>
            <option value="" selected disabled>Select snapshot...</option>
          </select>
        </div>
      </div>
    </div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
import React, { useState, useRef, useEffect } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data, { createPresetSnapshots } from "./data";

const options = {
  events: {
    heatmapThreshold: 20,
    heatmapValue: null,
    heatmapDirection: "any",
  },
};

export const Demo = () => {
  const timelineRef = useRef(null);
  const initialSnapshotRef = useRef(null);
  const presetSnapshotsRef = useRef(null);
  const [currentState, setCurrentState] = useState(null);
  const [savedViews, setSavedViews] = useState({});
  const [savedViewsCounter, setSavedViewsCounter] = useState(1);
  const [selectedSnapshot, setSelectedSnapshot] = useState("");

  // Assign the initial and preset snapshots
  useEffect(() => {
    // The initial snapshot must be captured
    if (!timelineRef.current || initialSnapshotRef.current) {
      return;
    }
    const snapshot = timelineRef.current.serialize();
    initialSnapshotRef.current = snapshot;
    presetSnapshotsRef.current = createPresetSnapshots(snapshot);
  }, []);

  // Save view
  function onSave() {
    const snapshot = timelineRef.current.serialize();
    const name = `Saved View ${savedViewsCounter}`;

    setSavedViews((prev) => {
      return {
        [name]: snapshot,
        ...prev,
      };
    });
    setSavedViewsCounter((c) => c + 1);
  }

  // Reset View
  function onReset() {
    setSelectedSnapshot("");
    // Initial view must be captured
    if (!initialSnapshotRef.current) {
      return;
    }
    setCurrentState(initialSnapshotRef.current);
  }

  function onDropdownChange(e) {
    const key = e.target.value;

    if (key) {
      setSelectedSnapshot(key);
    }

    // Restore a saved view
    if (savedViews[key]) {
      setCurrentState(savedViews[key]);
      return;
    }

    // Restore a preset view
    if (presetSnapshotsRef.current[key]) {
      const snap = presetSnapshotsRef.current[key]();
      if (snap) {
        setCurrentState(snap);
      }
      return;
    }
  }

  return (
    <div className="story">
      <Timeline
        {...currentState}
        className="story__timeline"
        ref={timelineRef}
        entities={data.entities}
        events={data.events}
        eventTypes={data.eventTypes}
        options={options}
        // To be able to restore views, the timeline components are controlled
        onTimelineChange={({ why }) => {
          if (why === "user") {
            setCurrentState(timelineRef.current.serialize());
          }
        }}
      />

      <div className="story__controls story__controls--row">
        <div className="story__controls__item">
          <button id="save-btn" className="button" onClick={onSave}>
            Save
          </button>
          <button id="reset-btn" className="button" onClick={onReset}>
            Reset
          </button>
        </div>

        <div className="story__controls__item">
          <label htmlFor="restore-select">Load Snapshot</label>
          <select
            id="restore-select"
            className="select"
            value={selectedSnapshot}
            onChange={onDropdownChange}
          >
            {Object.keys(savedViews).map((name) => (
              <option key={name} value={name}>
                {name}
              </option>
            ))}
            <option value="preset-2">Preset 2</option>
            <option value="preset-1">Preset 1</option>
            <option value="" disabled>
              Select snapshot...
            </option>
          </select>
        </div>
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export default {
  entities: {
    "Aurora Bancorp": {
      color: "#4e79a7",
    },
    "Better Life Bank": {
      color: "#f28e2c",
    },
    "Ace Financial Group": {
      color: "#e15759",
    },
    "Grand Mutual Bank": {
      color: "#76b7b2",
    },
    "Felicity Financial Services": {
      color: "#59a14f",
    },
  },
  events: {
    event0: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 103,
      },
      time: 1_716_845_042_401.983,
    },
    event1: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1522,
      },
      time: 1_704_300_247_970.444,
    },
    event2: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2519,
      },
      time: 1_704_826_361_998.4548,
    },
    event3: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1744,
      },
      time: 1_721_561_387_584.9785,
    },
    event4: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1292,
      },
      time: 1_721_436_187_577.0662,
    },
    event5: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1913,
      },
      time: 1_715_184_891_178.0125,
    },
    event6: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 1379,
      },
      time: 1_720_022_197_785.7358,
    },
    event7: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Better Life Bank",
      },
      data: {
        amount: 2108,
      },
      time: 1_713_047_293_850.0168,
    },
    event8: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 39_987,
      },
      time: 1_719_556_922_296.1238,
    },
    event9: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 6269,
      },
      time: 1_717_726_178_569.1255,
    },
    event10: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4629,
      },
      time: 1_718_167_137_411.861,
    },
    event11: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 4112,
      },
      time: 1_719_690_540_773.6128,
    },
    event12: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 44_477,
      },
      time: 1_718_653_783_292.392,
    },
    event13: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 86_674,
      },
      time: 1_719_055_763_972.7158,
    },
    event14: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 96_953,
      },
      time: 1_718_812_764_374.0154,
    },
    event15: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 57_831,
      },
      time: 1_717_355_969_771.8218,
    },
    event16: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 1992,
      },
      time: 1_721_029_217_990.7224,
    },
    event17: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 471,
      },
      time: 1_722_545_977_814.828,
    },
    event18: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 2274,
      },
      time: 1_712_785_338_304.0298,
    },
    event19: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 3067,
      },
      time: 1_706_715_885_813.1304,
    },
    event20: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 670,
      },
      time: 1_705_034_721_408.0198,
    },
    event21: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 648,
      },
      time: 1_719_489_884_462.4038,
    },
    event22: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 325,
      },
      time: 1_721_614_571_235.6663,
    },
    event23: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Ace Financial Group",
      },
      data: {
        amount: 851,
      },
      time: 1_705_237_236_251.1895,
    },
    event24: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3121,
      },
      time: 1_721_380_170_448.32,
    },
    event25: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1778,
      },
      time: 1_719_476_838_892.334,
    },
    event26: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 3781,
      },
      time: 1_714_459_016_034.4941,
    },
    event27: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1165,
      },
      time: 1_713_136_401_986.9214,
    },
    event28: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 2237,
      },
      time: 1_712_559_528_845.578,
    },
    event29: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1535,
      },
      time: 1_720_931_783_679.7734,
    },
    event30: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 1622,
      },
      time: 1_721_528_143_853.7964,
    },
    event31: {
      entityIds: {
        from: "Aurora Bancorp",
        to: "Grand Mutual Bank",
      },
      data: {
        amount: 523,
      },
      time: 1_709_514_478_039.349,
    },
    event32: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1257,
      },
      time: 1_715_409_427_247.5706,
    },
    event33: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 736,
      },
      time: 1_707_482_336_867.2246,
    },
    event34: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 184,
      },
      time: 1_725_199_319_145.929,
    },
    event35: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1058,
      },
      time: 1_713_232_568_113.0273,
    },
    event36: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1429,
      },
      time: 1_721_868_788_309.195,
    },
    event37: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1197,
      },
      time: 1_707_839_323_010.2188,
    },
    event38: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2522,
      },
      time: 1_717_712_034_817.7363,
    },
    event39: {
      entityIds: {
        from: "Better Life Bank",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 3094,
      },
      time: 1_724_919_209_625.5513,
    },
    event40: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1121,
      },
      time: 1_718_493_292_818.4546,
    },
    event41: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 2878,
      },
      time: 1_714_709_244_615.406,
    },
    event42: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1504,
      },
      time: 1_715_372_672_224.4255,
    },
    event43: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 320,
      },
      time: 1_710_331_215_554.826,
    },
    event44: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1906,
      },
      time: 1_710_184_345_462.6362,
    },
    event45: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1246,
      },
      time: 1_725_198_486_655.9883,
    },
    event46: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 1476,
      },
      time: 1_706_451_804_586.463,
    },
    event47: {
      entityIds: {
        from: "Ace Financial Group",
        to: "Felicity Financial Services",
      },
      data: {
        amount: 192,
      },
      time: 1_723_811_742_494.3857,
    },
  },
  eventTypes: {
    default: {
      lineWidth: 2,
      color: "#00a2ed",
    },
  },
};

export function createPresetSnapshots(initialSnapshot) {
  // Snapshots can be taken only after the initial render
  if (!initialSnapshot) {
    return null;
  }

  const presetSnapshots = {
    "preset-1": () => {
      // Create a deep clone of the initial snapshot
      const snap = structuredClone(initialSnapshot);

      // Override annotations
      snap.annotations = {
        myAnnotation: {
          label: "These transactions have warnings",
          subject: ["event37", "event0"],
        },
      };

      // Override reveal
      snap.reveal = ["event0", "event37"];

      // Override range (zoom window)
      snap.range = {
        start: new Date("2023-12-22T14:28:14.411Z"),
        end: new Date("2024-09-13T15:17:52.704Z"),
        startNanoseconds: 0,
        endNanoseconds: 0,
      };

      return snap;
    },

    "preset-2": () => {
      const snap = structuredClone(initialSnapshot);

      // Override range (zoom window)
      snap.range = {
        start: new Date("2024-04-19T03:43:05.156Z"),
        end: new Date("2024-05-15T03:13:14.663Z"),
        startNanoseconds: 0,
        endNanoseconds: 0,
      };

      snap.focus = ["Felicity Financial Services"];

      snap.markers = [
        { label: "Marker 1", time: new Date("2024-05-10T03:13:14.663Z") },
      ];

      return snap;
    },
  };

  return presetSnapshots;
}
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css">
  </head>
  <body>
    <div id="my-timeline" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.