or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-management.mdelement-collections.mdevent-system.mdextensions.mdgraph-algorithms.mdindex.mdlayout-system.mdstyling-system.md
tile.json

element-collections.mddocs/

Element Collections

Powerful collection-based API for selecting, manipulating, and querying nodes and edges. Collections support method chaining and provide comprehensive graph traversal capabilities.

Capabilities

Collection Creation and Selection

Create and filter element collections using CSS-like selectors.

interface Collection {
  /**
   * Filter collection by selector
   * @param selector - CSS-like selector string
   * @returns Filtered collection
   */
  filter(selector: string): Collection;
  
  /**
   * Filter collection by function
   * @param fn - Filter predicate function
   * @returns Filtered collection
   */
  filter(fn: (element: Element, index: number) => boolean): Collection;
  
  /**
   * Exclude elements matching selector
   * @param selector - CSS-like selector string
   * @returns Filtered collection
   */
  not(selector: string): Collection;
  
  /**
   * Get element at specific index
   * @param index - Zero-based index
   * @returns Collection containing single element
   */
  eq(index: number): Collection;
  
  /**
   * Get first element
   * @returns Collection containing first element
   */
  first(): Collection;
  
  /**
   * Get last element
   * @returns Collection containing last element
   */
  last(): Collection;
  
  /**
   * Get slice of collection
   * @param start - Start index
   * @param end - End index (optional)
   * @returns Sliced collection
   */
  slice(start: number, end?: number): Collection;
}

Usage Examples:

// Select nodes with specific class
const importantNodes = cy.nodes('.important');

// Filter by data attribute
const activeUsers = cy.nodes().filter('[active = true]');

// Chain filtering operations
const result = cy.elements()
  .filter('.category1')
  .not('.hidden')
  .first();

// Filter using function
const largeNodes = cy.nodes().filter((node) => {
  return node.data('size') > 10;
});

Data Manipulation

Access and modify element data and properties.

interface Collection {
  /**
   * Get or set element data
   * @param key - Data key (optional)
   * @param value - Data value (optional)
   * @returns Data value, data object, or Collection
   */
  data(key?: string, value?: any): any | Collection;
  
  /**
   * Remove element data
   * @param keys - Keys to remove (optional, removes all if not specified)
   * @returns Collection for chaining
   */
  removeData(keys?: string | string[]): Collection;
  
  /**
   * Get element ID (for single element collections)
   * @returns Element ID string
   */
  id(): string;
  
  /**
   * Get JSON representation of elements
   * @returns Array of element objects
   */
  json(): ElementDefinition[];
  
  /**
   * Get or set scratch data
   * @param namespace - Scratch namespace
   * @param key - Data key (optional)
   * @param value - Data value (optional)
   * @returns Scratch data or Collection
   */
  scratch(namespace: string, key?: string, value?: any): any | Collection;
  
  /**
   * Remove scratch data
   * @param namespace - Scratch namespace
   * @param key - Data key (optional)
   * @returns Collection for chaining
   */
  removeScratch(namespace: string, key?: string): Collection;
}

Graph Manipulation

Add, remove, and modify elements in the graph.

interface Collection {
  /**
   * Remove elements from graph
   * @returns Collection for chaining
   */
  remove(): Collection;
  
  /**
   * Restore previously removed elements
   * @returns Collection for chaining
   */
  restore(): Collection;
  
  /**
   * Move elements to new location
   * @param location - Target location
   * @returns Collection for chaining
   */
  move(location: { parent?: string }): Collection;
  
  /**
   * Clone elements
   * @returns Collection of cloned elements
   */
  clone(): Collection;
  
  /**
   * Copy elements to new location
   * @param location - Target location
   * @returns Collection of copied elements
   */
  copy(): Collection;
}

Position and Geometry

Manipulate element positions and get geometric information.

interface Collection {
  /**
   * Get or set element position (nodes only)
   * @param pos - Position to set (optional)
   * @returns Position object or Collection
   */
  position(pos?: Position): Position | Collection;
  
  /**
   * Get or set multiple positions at once
   * @param positions - Object mapping element IDs to positions
   * @returns Collection for chaining
   */
  positions(positions: { [id: string]: Position }): Collection;
  
  /**
   * Get rendered (screen) position
   * @param pos - Position to set (optional)
   * @returns Rendered position or Collection
   */
  renderedPosition(pos?: Position): Position | Collection;
  
  /**
   * Get relative position (relative to parent)
   * @param pos - Position to set (optional)
   * @returns Relative position or Collection
   */
  relativePosition(pos?: Position): Position | Collection;
  
  /**
   * Get bounding box of elements
   * @param options - Bounding box options
   * @returns Bounding box object
   */
  boundingBox(options?: BoundingBoxOptions): BoundingBox;
  
  /**
   * Get rendered bounding box
   * @param options - Bounding box options
   * @returns Rendered bounding box
   */
  renderedBoundingBox(options?: BoundingBoxOptions): BoundingBox;
}

interface BoundingBoxOptions {
  includeNodes?: boolean;
  includeEdges?: boolean;
  includeLabels?: boolean;
}

Selection Management

Control element selection state.

interface Collection {
  /**
   * Select elements
   * @returns Collection for chaining
   */
  select(): Collection;
  
  /**
   * Unselect elements
   * @returns Collection for chaining
   */
  unselect(): Collection;
  
  /**
   * Check if elements are selected
   * @returns True if all elements are selected
   */
  selected(): boolean;
  
  /**
   * Get or set selectable state
   * @param selectable - Whether elements can be selected
   * @returns Selectable state or Collection
   */
  selectable(selectable?: boolean): boolean | Collection;
}

Styling and Appearance

Apply styles and manage visual appearance.

interface Collection {
  /**
   * Get or set CSS style properties
   * @param property - Style property name (optional)
   * @param value - Style value (optional)
   * @returns Style value or Collection
   */
  style(property?: string, value?: any): any | Collection;
  
  /**
   * Get or set multiple style properties
   * @param styles - Object with style properties
   * @returns Collection for chaining
   */
  style(styles: StyleProperties): Collection;
  
  /**
   * Remove style properties
   * @param properties - Properties to remove (optional, removes all if not specified)
   * @returns Collection for chaining
   */
  removeStyle(properties?: string | string[]): Collection;
  
  /**
   * Add CSS classes
   * @param classes - Space-separated class names
   * @returns Collection for chaining
   */
  addClass(classes: string): Collection;
  
  /**
   * Remove CSS classes
   * @param classes - Space-separated class names (optional, removes all if not specified)
   * @returns Collection for chaining
   */
  removeClass(classes?: string): Collection;
  
  /**
   * Toggle CSS classes
   * @param classes - Space-separated class names
   * @param toggle - Force toggle state (optional)
   * @returns Collection for chaining
   */
  toggleClass(classes: string, toggle?: boolean): Collection;
  
  /**
   * Check if elements have CSS class
   * @param className - Class name to check
   * @returns True if all elements have the class
   */
  hasClass(className: string): boolean;
  
  /**
   * Show elements (set display style)
   * @returns Collection for chaining
   */
  show(): Collection;
  
  /**
   * Hide elements (set display: none)
   * @returns Collection for chaining
   */
  hide(): Collection;
  
  /**
   * Get effective opacity
   * @returns Calculated opacity value
   */
  effectiveOpacity(): number;
  
  /**
   * Check if elements are transparent
   * @returns True if elements are transparent
   */
  transparent(): boolean;
}

Graph Traversal

Navigate and explore graph relationships.

interface Collection {
  /**
   * Get neighborhood (connected elements)
   * @param selector - Optional selector to filter neighborhood
   * @returns Collection of connected elements
   */
  neighborhood(selector?: string): Collection;
  
  /**
   * Get closed neighborhood (including self)
   * @param selector - Optional selector to filter
   * @returns Collection including self and neighbors
   */
  closedNeighborhood(selector?: string): Collection;
  
  /**
   * Get open neighborhood (excluding self)
   * @param selector - Optional selector to filter
   * @returns Collection of neighbors only
   */
  openNeighborhood(selector?: string): Collection;
}

Node-Specific Traversal

Traversal methods specific to node collections.

interface NodeCollection extends Collection {
  /**
   * Get connected edges
   * @param selector - Optional selector to filter edges
   * @returns Collection of connected edges
   */
  connectedEdges(selector?: string): Collection;
  
  /**
   * Get connected nodes
   * @param selector - Optional selector to filter nodes
   * @returns Collection of connected nodes
   */
  connectedNodes(selector?: string): Collection;
  
  /**
   * Get neighboring nodes (alias for connectedNodes)
   * @param selector - Optional selector to filter
   * @returns Collection of neighboring nodes
   */
  neighbors(selector?: string): Collection;
  
  /**
   * Get edges between these nodes and target nodes
   * @param nodes - Target nodes
   * @returns Collection of edges
   */
  edgesWith(nodes: Collection): Collection;
  
  /**
   * Get edges from these nodes to target nodes
   * @param nodes - Target nodes
   * @returns Collection of outgoing edges
   */
  edgesTo(nodes: Collection): Collection;
  
  /**
   * Get indegree (number of incoming edges)
   * @param countMultiplicity - Count parallel edges separately
   * @returns Indegree count
   */
  indegree(countMultiplicity?: boolean): number;
  
  /**
   * Get outdegree (number of outgoing edges)
   * @param countMultiplicity - Count parallel edges separately
   * @returns Outdegree count
   */
  outdegree(countMultiplicity?: boolean): number;
  
  /**
   * Get total degree (indegree + outdegree)
   * @param countMultiplicity - Count parallel edges separately
   * @returns Total degree count
   */
  degree(countMultiplicity?: boolean): number;
}

Edge-Specific Methods

Methods specific to edge collections.

interface EdgeCollection extends Collection {
  /**
   * Get source node(s) of edges
   * @returns Collection of source nodes
   */
  source(): Collection;
  
  /**
   * Get target node(s) of edges
   * @returns Collection of target nodes
   */
  target(): Collection;
  
  /**
   * Get the other endpoint of edges relative to given node
   * @param node - Reference node
   * @returns Collection of other endpoint nodes
   */
  otherNode(node: Collection): Collection;
  
  /**
   * Check if edges are loops (self-edges)
   * @returns True if all edges are loops
   */
  isLoop(): boolean;
  
  /**
   * Check if edges are simple (no loops or parallel edges)
   * @returns True if all edges are simple
   */
  isSimple(): boolean;
  
  /**
   * Get parallel edges (same source and target)
   * @returns Collection of parallel edges
   */
  parallelEdges(): Collection;
  
  /**
   * Get codirected edges (same direction)
   * @returns Collection of codirected edges
   */
  codirectedEdges(): Collection;
}

Hierarchical Traversal

Navigate compound graph hierarchies.

interface Collection {
  /**
   * Get parent elements
   * @param selector - Optional selector to filter parents
   * @returns Collection of parent elements
   */
  parents(selector?: string): Collection;
  
  /**
   * Get all ancestors
   * @param selector - Optional selector to filter ancestors
   * @returns Collection of ancestor elements
   */
  ancestors(selector?: string): Collection;
  
  /**
   * Get common ancestors with other elements
   * @param elements - Other elements to find common ancestors with
   * @returns Collection of common ancestor elements
   */
  commonAncestors(elements: Collection): Collection;
  
  /**
   * Get direct children
   * @param selector - Optional selector to filter children
   * @returns Collection of child elements
   */
  children(selector?: string): Collection;
  
  /**
   * Get all descendants
   * @param selector - Optional selector to filter descendants
   * @returns Collection of descendant elements
   */
  descendants(selector?: string): Collection;
  
  /**
   * Get sibling elements
   * @param selector - Optional selector to filter siblings
   * @returns Collection of sibling elements
   */
  siblings(selector?: string): Collection;
  
  /**
   * Check if elements are parents (have children)
   * @returns True if elements have children
   */
  isParent(): boolean;
  
  /**
   * Check if elements are childless
   * @returns True if elements have no children
   */
  isChildless(): boolean;
  
  /**
   * Check if elements are children (have parents)
   * @returns True if elements have parents
   */
  isChild(): boolean;
  
  /**
   * Check if elements are orphans (no parents)
   * @returns True if elements have no parents
   */
  isOrphan(): boolean;
  
  /**
   * Get orphan elements (no parents)
   * @param selector - Optional selector to filter
   * @returns Collection of orphan elements
   */
  orphans(selector?: string): Collection;
  
  /**
   * Get non-orphan elements (have parents)
   * @param selector - Optional selector to filter
   * @returns Collection of non-orphan elements
   */
  nonorphans(selector?: string): Collection;
}

Collection Operations

Set operations and collection manipulation.

interface Collection {
  /**
   * Union with other collection
   * @param elements - Elements to union with
   * @returns New collection with union
   */
  union(elements: Collection): Collection;
  
  /**
   * Add elements to collection (alias for union)
   * @param elements - Elements to add
   * @returns New collection with added elements
   */
  add(elements: Collection): Collection;
  
  /**
   * Intersection with other collection
   * @param elements - Elements to intersect with
   * @returns New collection with intersection
   */
  intersect(elements: Collection): Collection;
  
  /**
   * Difference from other collection
   * @param elements - Elements to subtract
   * @returns New collection with difference
   */
  difference(elements: Collection): Collection;
  
  /**
   * Symmetric difference with other collection
   * @param elements - Elements for symmetric difference
   * @returns New collection with symmetric difference
   */
  symdiff(elements: Collection): Collection;
}

Iteration and Testing

Iterate over collections and test conditions.

interface Collection {
  /**
   * Execute function for each element
   * @param fn - Function to execute
   * @returns Collection for chaining
   */
  forEach(fn: (element: Element, index: number) => void): Collection;
  
  /**
   * Map elements to new array
   * @param fn - Mapping function
   * @returns Array of mapped values
   */
  map<T>(fn: (element: Element, index: number) => T): T[];
  
  /**
   * Reduce collection to single value
   * @param fn - Reducer function
   * @param initialValue - Initial value
   * @returns Reduced value
   */
  reduce<T>(fn: (accumulator: T, element: Element, index: number) => T, initialValue: T): T;
  
  /**
   * Get collection size
   * @returns Number of elements
   */
  size(): number;
  
  /**
   * Get collection length (same as size)
   */
  length: number;
  
  /**
   * Check if collection is empty
   * @returns True if collection has no elements
   */
  empty(): boolean;
  
  /**
   * Check if collection is non-empty
   * @returns True if collection has elements
   */
  nonempty(): boolean;
  
  /**
   * Test if some elements match condition
   * @param fn - Test function
   * @returns True if any element matches
   */
  some(fn: (element: Element) => boolean): boolean;
  
  /**
   * Test if every element matches condition
   * @param fn - Test function
   * @returns True if all elements match
   */
  every(fn: (element: Element) => boolean): boolean;
  
  /**
   * Check if collections are the same
   * @param collection - Collection to compare
   * @returns True if collections contain same elements
   */
  same(collection: Collection): boolean;
  
  /**
   * Check if any elements are the same
   * @param collection - Collection to compare
   * @returns True if any elements are shared
   */
  anySame(collection: Collection): boolean;
  
  /**
   * Check if all elements match selector
   * @param selector - Selector to test
   * @returns True if all elements match
   */
  allAre(selector: string): boolean;
  
  /**
   * Check if all elements are neighbors
   * @returns True if all connected to each other
   */
  allAreNeighbors(): boolean;
}