@ankhorage/zora 20.1.4 → 20.2.0

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.ts

@@ -0,0 +1,80 @@
+import type { Core } from 'cytoscape';
+
+import { fitGraphViewport } from './fitGraphViewport';
+import { scheduleGraphFrame } from './scheduleGraphFrame';
+
+interface CreateGraphResizeObserverInput {
+  readonly container: unknown;
+  readonly cy: Core;
+  readonly fitPaddingRef: { current: number };
+  readonly layoutRunningRef: { current: boolean };
+  readonly readyRef: { current: boolean };
+  readonly onViewportSettled: () => void;
+}
+
+export interface GraphResizeObserver {
+  disconnect(): void;
+}
+
+/*** Observe settled container resizing without racing an active layout generation. */
+export function createGraphResizeObserver(
+  input: CreateGraphResizeObserverInput,
+): GraphResizeObserver | null {
+  const Observer = readResizeObserverConstructor();
+  if (Observer === null) return null;
+  const sizeRef = { height: -1, width: -1 };
+
+  const observer = new Observer((entries) => {
+    const entry = entries.at(0);
+    if (entry === undefined || !hasSizeChanged(sizeRef, entry.contentRect)) return;
+    sizeRef.height = entry.contentRect.height;
+    sizeRef.width = entry.contentRect.width;
+    if (!input.readyRef.current || input.layoutRunningRef.current) return;
+    scheduleResizeFit(input);
+  });
+  observer.observe(input.container);
+  return observer;
+}
+
+/*** Fit one genuine resize only after the active layout has settled. */
+function scheduleResizeFit(input: CreateGraphResizeObserverInput) {
+  scheduleGraphFrame(() => {
+    if (input.cy.destroyed() || input.layoutRunningRef.current) return;
+    input.cy.resize();
+    fitGraphViewport(input.cy, { padding: input.fitPaddingRef.current });
+    input.onViewportSettled();
+  });
+}
+
+/*** Return whether ResizeObserver reported a genuinely different container size. */
+function hasSizeChanged(
+  previous: { readonly height: number; readonly width: number },
+  next: { readonly height: number; readonly width: number },
+): boolean {
+  return previous.height !== next.height || previous.width !== next.width;
+}
+
+/*** Read ResizeObserver without imposing DOM library types on the package target. */
+function readResizeObserverConstructor(): ResizeObserverConstructorLike | null {
+  const value = (
+    globalThis as unknown as {
+      ResizeObserver?: ResizeObserverConstructorLike;
+    }
+  ).ResizeObserver;
+  return value ?? null;
+}
+
+interface ResizeObserverEntryLike {
+  readonly contentRect: {
+    readonly height: number;
+    readonly width: number;
+  };
+}
+
+interface ResizeObserverLike extends GraphResizeObserver {
+  observe(target: unknown): void;
+}
+
+type ResizeObserverConstructorLike = new (
+  callback: (entries: readonly ResizeObserverEntryLike[]) => void,
+) => ResizeObserverLike;

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphRuntime.ts

@@ -0,0 +1,301 @@
+import cytoscape, { type Core, type CytoscapeOptions } from 'cytoscape';
+import elk from 'cytoscape-elk';
+
+import { bindGraphEvents } from './bindGraphEvents';
+import { createGraphController } from './createGraphController';
+import { createGraphResizeObserver, type GraphResizeObserver } from './createGraphResizeObserver';
+import { fitGraphViewport } from './fitGraphViewport';
+import type {
+  GraphViewCallbacks,
+  GraphViewEdge,
+  GraphViewElementEventType,
+  GraphViewLayoutName,
+  GraphViewNode,
+  GraphViewRenderedNode,
+  GraphViewSize,
+  GraphViewStyleRule,
+} from './GraphView';
+import { readGraphRenderedNodes } from './readGraphRenderedNodes';
+import { runGraphLayout } from './runGraphLayout';
+import { scheduleGraphFrame } from './scheduleGraphFrame';
+import { syncGraphElements } from './syncGraphElements';
+
+cytoscape.use(elk as cytoscape.Ext);
+
+type GraphContainer = NonNullable<CytoscapeOptions['container']>;
+type RenderedNodeListener = (nodes: readonly GraphViewRenderedNode[]) => void;
+
+interface GraphRuntimeUpdate {
+  readonly edges: readonly GraphViewEdge[];
+  readonly fitPadding?: number;
+  readonly layout?: GraphViewLayoutName;
+  readonly layoutOptions?: Readonly<Record<string, unknown>>;
+  readonly maxZoom?: number;
+  readonly minZoom?: number;
+  readonly nodes: readonly GraphViewNode[];
+  readonly richNodeRendering: boolean;
+  readonly spacingFactor?: number;
+  readonly styleRules?: readonly GraphViewStyleRule[];
+}
+
+export interface GraphRuntime {
+  destroy(): void;
+  handleOverlayNodeEvent(id: string, type: GraphViewElementEventType): void;
+  setNodeSize(id: string, size: GraphViewSize): void;
+  setSelectedNodeIds(nodeIds: readonly string[] | undefined): void;
+  subscribeRenderedNodes(listener: RenderedNodeListener): () => void;
+  update(input: GraphRuntimeUpdate): void;
+}
+
+interface GraphRuntimeState {
+  readonly callbacksRef: { current: GraphViewCallbacks };
+  readonly controller: ReturnType<typeof createGraphController>;
+  readonly cy: Core;
+  readonly fitPaddingRef: { current: number };
+  readonly generationRef: { current: number };
+  readonly hoveredNodeIds: Set<string>;
+  readonly latestUpdateRef: { current: GraphRuntimeUpdate | null };
+  readonly layoutRef: { current: ReturnType<typeof runGraphLayout> | null };
+  readonly layoutRunningRef: { current: boolean };
+  readonly nodeSizes: Map<string, GraphViewSize>;
+  readonly readyRef: { current: boolean };
+  readonly relayoutScheduledRef: { current: boolean };
+  readonly renderedNodeListeners: Set<RenderedNodeListener>;
+  readonly resizeObserver: GraphResizeObserver | null;
+  readonly unbindEvents: () => void;
+}
+
+/*** Create one Cytoscape runtime that exclusively owns layout, fit, resize, and disposal. */
+export function createGraphRuntime(
+  container: GraphContainer,
+  callbacksRef: { current: GraphViewCallbacks },
+): GraphRuntime {
+  const cy = cytoscape({
+    container,
+    elements: [],
+    minZoom: 0.05,
+    maxZoom: 2,
+    selectionType: 'additive',
+    userPanningEnabled: true,
+  });
+  const state = createRuntimeState(cy, container, callbacksRef);
+
+  return {
+    destroy: () => destroyRuntime(state),
+    handleOverlayNodeEvent: (id, type) => handleOverlayNodeEvent(state, id, type),
+    setNodeSize: (id, size) => setNodeSize(state, id, size),
+    setSelectedNodeIds: (nodeIds) => setSelectedNodeIds(state, nodeIds),
+    subscribeRenderedNodes: (listener) => subscribeRenderedNodes(state, listener),
+    update: (input) => updateRuntime(state, input),
+  };
+}
+
+/*** Build the mutable state shared by the single graph-runtime owner. */
+function createRuntimeState(
+  cy: Core,
+  container: GraphContainer,
+  callbacksRef: { current: GraphViewCallbacks },
+): GraphRuntimeState {
+  const fitPaddingRef = { current: 50 };
+  const controller = createGraphController(cy, fitPaddingRef);
+  const layoutRunningRef = { current: false };
+  const readyRef = { current: false };
+  const renderedNodeListeners = new Set<RenderedNodeListener>();
+  const stateBase = {
+    callbacksRef,
+    controller,
+    cy,
+    fitPaddingRef,
+    generationRef: { current: 0 },
+    hoveredNodeIds: new Set<string>(),
+    latestUpdateRef: { current: null as GraphRuntimeUpdate | null },
+    layoutRef: { current: null as ReturnType<typeof runGraphLayout> | null },
+    layoutRunningRef,
+    nodeSizes: new Map<string, GraphViewSize>(),
+    readyRef,
+    relayoutScheduledRef: { current: false },
+    renderedNodeListeners,
+  };
+  const unbindEvents = bindGraphEvents(cy, callbacksRef, controller, () =>
+    emitRenderedNodes(stateBase),
+  );
+  const resizeObserver = createGraphResizeObserver({
+    container,
+    cy,
+    fitPaddingRef,
+    layoutRunningRef,
+    onViewportSettled: () => emitRenderedNodes(stateBase),
+    readyRef,
+  });
+
+  return { ...stateBase, resizeObserver, unbindEvents };
+}
+
+/*** Apply one graph update and start exactly one new layout generation. */
+function updateRuntime(state: GraphRuntimeState, input: GraphRuntimeUpdate) {
+  if (state.cy.destroyed()) return;
+  stopCurrentLayout(state);
+  state.latestUpdateRef.current = input;
+  state.fitPaddingRef.current = input.fitPadding ?? 50;
+  state.cy.minZoom(input.minZoom ?? 0.05);
+  state.cy.maxZoom(input.maxZoom ?? 2);
+  syncGraphElements(state.cy, input.nodes, input.edges);
+  applyGraphStyles(state.cy, input.styleRules, input.richNodeRendering);
+  applyKnownNodeSizes(state);
+  startCurrentLayout(state, input);
+}
+
+/*** Start a generation-safe layout whose completion is the only normal automatic fit trigger. */
+function startCurrentLayout(state: GraphRuntimeState, input: GraphRuntimeUpdate) {
+  const generation = state.generationRef.current + 1;
+  state.generationRef.current = generation;
+  state.layoutRunningRef.current = true;
+  state.cy.resize();
+  state.layoutRef.current = runGraphLayout(
+    state.cy,
+    {
+      layout: input.layout ?? 'concentric',
+      layoutOptions: input.layoutOptions,
+      spacingFactor: input.spacingFactor ?? 1,
+    },
+    () => completeCurrentLayout(state, generation),
+  );
+}
+
+/*** Settle only the latest layout generation and fit once from node bounds. */
+function completeCurrentLayout(state: GraphRuntimeState, generation: number) {
+  state.layoutRef.current = null;
+  scheduleGraphFrame(() => {
+    if (state.cy.destroyed() || generation !== state.generationRef.current) return;
+    state.cy.resize();
+    state.layoutRunningRef.current = false;
+    if (!hasUsableViewport(state.cy)) return;
+    fitGraphViewport(state.cy, { padding: state.fitPaddingRef.current });
+    emitRenderedNodes(state);
+
+    if (!state.readyRef.current) {
+      state.readyRef.current = true;
+      state.callbacksRef.current.onReady?.(state.controller);
+    }
+    state.callbacksRef.current.onLayoutComplete?.(state.controller);
+  });
+}
+
+/*** Stop the current layout and invalidate every stale completion callback. */
+function stopCurrentLayout(state: GraphRuntimeState) {
+  state.generationRef.current += 1;
+  state.layoutRunningRef.current = false;
+  state.layoutRef.current?.stop();
+  state.layoutRef.current = null;
+}
+
+/*** Apply consumer styles and hide native node paint only when React rich nodes are active. */
+function applyGraphStyles(
+  cy: Core,
+  rules: readonly GraphViewStyleRule[] | undefined,
+  richNodeRendering: boolean,
+) {
+  const styles = [...(rules ?? [])];
+  if (richNodeRendering) {
+    styles.push({
+      selector: 'node',
+      style: {
+        'background-opacity': 0,
+        'border-width': 0,
+        label: '',
+        'overlay-opacity': 0,
+      },
+    });
+  }
+  if (styles.length > 0) cy.style(styles).update();
+}
+
+/*** Synchronize controlled selection without rerunning layout. */
+function setSelectedNodeIds(state: GraphRuntimeState, nodeIds: readonly string[] | undefined) {
+  if (state.cy.destroyed() || nodeIds === undefined) return;
+  const selectedIds = new Set(nodeIds);
+  state.cy.nodes().forEach((node) => {
+    if (selectedIds.has(node.id())) node.select();
+    else node.unselect();
+  });
+  emitRenderedNodes(state);
+}
+
+/*** Persist one rich-node size and schedule at most one relayout for changed geometry. */
+function setNodeSize(state: GraphRuntimeState, id: string, size: GraphViewSize) {
+  const previous = state.nodeSizes.get(id);
+  if (previous?.width === size.width && previous.height === size.height) return;
+  state.nodeSizes.set(id, size);
+  applyNodeSize(state.cy, id, size);
+  scheduleMeasuredNodeRelayout(state);
+}
+
+/*** Apply every known rich-node size after Cytoscape elements are replaced. */
+function applyKnownNodeSizes(state: GraphRuntimeState) {
+  for (const [id, size] of state.nodeSizes) applyNodeSize(state.cy, id, size);
+}
+
+/*** Apply one measured model-space size as a Cytoscape per-node style bypass. */
+function applyNodeSize(cy: Core, id: string, size: GraphViewSize) {
+  const node = cy.getElementById(id);
+  if (node.empty()) return;
+  node.style({ height: size.height, width: size.width });
+}
+
+/*** Coalesce DOM measurements into one follow-up layout generation. */
+function scheduleMeasuredNodeRelayout(state: GraphRuntimeState) {
+  if (state.relayoutScheduledRef.current) return;
+  state.relayoutScheduledRef.current = true;
+  scheduleGraphFrame(() => {
+    state.relayoutScheduledRef.current = false;
+    const input = state.latestUpdateRef.current;
+    if (input === null || state.cy.destroyed()) return;
+    stopCurrentLayout(state);
+    startCurrentLayout(state, input);
+  });
+}
+
+/*** Subscribe one React overlay to rendered node state without exposing the Cytoscape core. */
+function subscribeRenderedNodes(state: GraphRuntimeState, listener: RenderedNodeListener) {
+  state.renderedNodeListeners.add(listener);
+  listener(readGraphRenderedNodes(state.cy, state.hoveredNodeIds));
+  return () => {
+    state.renderedNodeListeners.delete(listener);
+  };
+}
+
+/*** Publish current rendered node positions only to active rich-node subscribers. */
+function emitRenderedNodes(
+  state: Pick<GraphRuntimeState, 'cy' | 'hoveredNodeIds' | 'renderedNodeListeners'>,
+) {
+  if (state.renderedNodeListeners.size === 0) return;
+  const nodes = readGraphRenderedNodes(state.cy, state.hoveredNodeIds);
+  for (const listener of state.renderedNodeListeners) listener(nodes);
+}
+
+/*** Translate one rich-overlay event back into normal graph selection and callbacks. */
+function handleOverlayNodeEvent(
+  state: GraphRuntimeState,
+  id: string,
+  type: GraphViewElementEventType,
+) {
+  if (type === 'pointer-enter') state.hoveredNodeIds.add(id);
+  if (type === 'pointer-leave') state.hoveredNodeIds.delete(id);
+  if (type === 'press') state.cy.getElementById(id).select();
+  state.callbacksRef.current.onNodeEvent?.({ id, type });
+  emitRenderedNodes(state);
+}
+
+/*** Return whether Cytoscape currently has dimensions suitable for fitting. */
+function hasUsableViewport(cy: Core): boolean {
+  return cy.width() > 0 && cy.height() > 0;
+}
+
+/*** Dispose all runtime resources in the reverse order they were acquired. */
+function destroyRuntime(state: GraphRuntimeState) {
+  state.resizeObserver?.disconnect();
+  stopCurrentLayout(state);
+  state.unbindEvents();
+  state.renderedNodeListeners.clear();
+  if (!state.cy.destroyed()) state.cy.destroy();
+}

package/src/features/graph-view/adapters/inbound/web-artifact/createRenderableGraphElements.test.ts

@@ -0,0 +1,49 @@
+import { expect, test } from 'bun:test';
+
+import { createRenderableGraphElements } from './createRenderableGraphElements';
+import type { GraphViewEdge, GraphViewNode } from './GraphView';
+
+test('omits compound ancestor and descendant edges without mutating source graph data', () => {
+  const nodes: readonly GraphViewNode[] = [
+    { id: 'projectadministration' },
+    { id: 'projectadministration.domain', parentId: 'projectadministration' },
+    { id: 'other' },
+  ];
+  const edges: readonly GraphViewEdge[] = [
+    {
+      id: 'invalid',
+      source: 'projectadministration',
+      target: 'projectadministration.domain',
+    },
+    {
+      id: 'valid',
+      source: 'projectadministration.domain',
+      target: 'other',
+    },
+  ];
+
+  const elements = createRenderableGraphElements(nodes, edges);
+  const renderedEdgeIds = elements
+    .filter((element) => element.group === 'edges')
+    .map((element) => element.data.id);
+
+  expect(renderedEdgeIds).toEqual(['valid']);
+  expect(edges).toHaveLength(2);
+});
+
+test('keeps ordinary edges across unrelated compound branches', () => {
+  const nodes: readonly GraphViewNode[] = [
+    { id: 'a' },
+    { id: 'a.child', parentId: 'a' },
+    { id: 'b' },
+    { id: 'b.child', parentId: 'b' },
+  ];
+  const edges: readonly GraphViewEdge[] = [{ id: 'cross', source: 'a.child', target: 'b.child' }];
+
+  const elements = createRenderableGraphElements(nodes, edges);
+  const renderedEdgeIds = elements
+    .filter((element) => element.group === 'edges')
+    .map((element) => element.data.id);
+
+  expect(renderedEdgeIds).toEqual(['cross']);
+});

package/src/features/graph-view/adapters/inbound/web-artifact/createRenderableGraphElements.ts

@@ -0,0 +1,72 @@
+import type { ElementDefinition } from 'cytoscape';
+
+import type { GraphViewEdge, GraphViewNode } from './GraphView';
+
+/*** Convert plain graph data into renderable Cytoscape elements without impossible compound edges. */
+export function createRenderableGraphElements(
+  nodes: readonly GraphViewNode[],
+  edges: readonly GraphViewEdge[],
+): ElementDefinition[] {
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const parentById = new Map(
+    nodes.flatMap((node) => (node.parentId ? [[node.id, node.parentId] as const] : [])),
+  );
+  const nodeElements: ElementDefinition[] = nodes.map((node) => ({
+    group: 'nodes',
+    classes: node.classes,
+    data: {
+      ...(node.data ?? {}),
+      id: node.id,
+      label: node.label ?? node.id,
+      ...(node.parentId ? { parent: node.parentId } : {}),
+    },
+  }));
+  const edgeElements = edges.flatMap((edge, index) =>
+    createEdgeElement(edge, index, nodeIds, parentById),
+  );
+
+  return [...nodeElements, ...edgeElements];
+}
+
+/*** Build one edge unless one endpoint owns the other in the compound hierarchy. */
+function createEdgeElement(
+  edge: GraphViewEdge,
+  index: number,
+  nodeIds: ReadonlySet<string>,
+  parentById: ReadonlyMap<string, string>,
+): ElementDefinition[] {
+  if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) return [];
+  if (isAncestor(edge.source, edge.target, parentById)) return [];
+  if (isAncestor(edge.target, edge.source, parentById)) return [];
+
+  return [
+    {
+      group: 'edges',
+      classes: edge.classes,
+      data: {
+        ...(edge.data ?? {}),
+        id: edge.id ?? `${edge.source}->${edge.target}:${index}`,
+        source: edge.source,
+        target: edge.target,
+      },
+    },
+  ];
+}
+
+/*** Return whether a node appears in another node's compound parent chain. */
+function isAncestor(
+  possibleAncestor: string,
+  nodeId: string,
+  parentById: ReadonlyMap<string, string>,
+): boolean {
+  const visited = new Set<string>();
+  let current = parentById.get(nodeId);
+
+  while (current !== undefined && !visited.has(current)) {
+    if (current === possibleAncestor) return true;
+    visited.add(current);
+    current = parentById.get(current);
+  }
+
+  return false;
+}

package/src/features/graph-view/adapters/inbound/web-artifact/fitGraphViewport.ts

@@ -0,0 +1,20 @@
+import type { Core } from 'cytoscape';
+
+import type { GraphViewFitOptions } from './GraphView';
+
+/*** Fit the requested visible nodes and never include edge geometry in viewport bounds. */
+export function fitGraphViewport(cy: Core, options: GraphViewFitOptions = {}): boolean {
+  if (cy.destroyed()) return false;
+  const nodes = getFitNodes(cy, options.nodeIds);
+  if (nodes.empty()) return false;
+
+  cy.fit(nodes, options.padding ?? 50);
+  return true;
+}
+
+/*** Resolve an optional node-id target without ever adding edges to the fit collection. */
+function getFitNodes(cy: Core, nodeIds: readonly string[] | undefined) {
+  if (nodeIds === undefined || nodeIds.length === 0) return cy.nodes();
+  const requestedIds = new Set(nodeIds);
+  return cy.nodes().filter((node) => requestedIds.has(node.id()));
+}

package/src/features/graph-view/adapters/inbound/web-artifact/readGraphRenderedNodes.ts

@@ -0,0 +1,20 @@
+import type { Core } from 'cytoscape';
+
+import type { GraphViewRenderedNode } from './GraphView';
+
+/*** Read React-overlay node state from Cytoscape's authoritative rendered positions. */
+export function readGraphRenderedNodes(
+  cy: Core,
+  hoveredNodeIds: ReadonlySet<string>,
+): readonly GraphViewRenderedNode[] {
+  if (cy.destroyed()) return [];
+  const zoom = cy.zoom();
+
+  return cy.nodes().map((node) => ({
+    hovered: hoveredNodeIds.has(node.id()),
+    id: node.id(),
+    position: node.renderedPosition(),
+    selected: node.selected(),
+    zoom,
+  }));
+}

package/src/features/graph-view/adapters/inbound/web-artifact/runGraphLayout.ts

@@ -0,0 +1,53 @@
+import type { Core, LayoutOptions, Layouts } from 'cytoscape';
+
+import type { GraphViewLayoutName } from './GraphView';
+
+interface RunGraphLayoutInput {
+  readonly layout: GraphViewLayoutName;
+  readonly layoutOptions?: Readonly<Record<string, unknown>>;
+  readonly spacingFactor: number;
+}
+
+interface GraphLayoutSession {
+  stop(): void;
+}
+
+/*** Run one Cytoscape layout with automatic fitting disabled and explicit stop ownership. */
+export function runGraphLayout(
+  cy: Core,
+  input: RunGraphLayoutInput,
+  onComplete: () => void,
+): GraphLayoutSession {
+  const layout = cy.layout(createLayoutOptions(input));
+  const handleStop = () => onComplete();
+  cy.one('layoutstop', handleStop);
+  layout.run();
+
+  return {
+    stop() {
+      stopGraphLayout(cy, layout, handleStop);
+    },
+  };
+}
+
+/*** Build layout options while reserving fit ownership for the graph runtime. */
+function createLayoutOptions(input: RunGraphLayoutInput): LayoutOptions {
+  return {
+    ...(input.layoutOptions ?? {}),
+    name: input.layout,
+    spacingFactor: input.spacingFactor,
+    nodeDimensionsIncludeLabels: true,
+    fit: false,
+    animate: false,
+  };
+}
+
+/*** Stop one layout without allowing its stale layout-stop callback to escape. */
+function stopGraphLayout(cy: Core, layout: Layouts, handleStop: () => void) {
+  cy.off('layoutstop', handleStop);
+  try {
+    layout.stop();
+  } catch {
+    // Cytoscape may already have disposed a superseded layout.
+  }
+}

package/src/features/graph-view/adapters/inbound/web-artifact/scheduleGraphFrame.ts

@@ -0,0 +1,13 @@
+/*** Schedule one graph-runtime callback after browser paint with a non-browser fallback. */
+export function scheduleGraphFrame(callback: () => void) {
+  const frame = (
+    globalThis as unknown as {
+      requestAnimationFrame?: (scheduled: () => void) => number;
+    }
+  ).requestAnimationFrame;
+  if (frame) {
+    frame(callback);
+    return;
+  }
+  setTimeout(callback, 0);
+}

package/src/features/graph-view/adapters/inbound/web-artifact/syncGraphElements.ts

@@ -0,0 +1,19 @@
+import type { Core } from 'cytoscape';
+
+import { createRenderableGraphElements } from './createRenderableGraphElements';
+import type { GraphViewEdge, GraphViewNode } from './GraphView';
+
+/*** Replace Cytoscape elements from the current plain graph projection in one batch. */
+export function syncGraphElements(
+  cy: Core,
+  nodes: readonly GraphViewNode[],
+  edges: readonly GraphViewEdge[],
+) {
+  if (cy.destroyed()) return;
+
+  const elements = createRenderableGraphElements(nodes, edges);
+  cy.batch(() => {
+    cy.elements().remove();
+    cy.add(elements);
+  });
+}