Skip to content
CAI
Software that uses CAICheck a score

cytoscape/cytoscape.js

44.6

Weak · 2 October 2026

96.8k

lines of production code

JavaScript

primary language

2

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

What this system is

Cytoscape.js is a JavaScript graph theory library that provides core capabilities for rendering, styling, and interacting with network visualizations. It supports multiple rendering backends, including a standard Canvas renderer and a high-performance WebGL renderer optimized for large datasets. The system includes a comprehensive suite of built-in layout algorithms, graph analysis tools, and a flexible style engine for customizing node and edge appearances. Additionally, it offers extensive documentation and interactive demos to guide users in implementing complex graph interactions and performance tuning.

How it got here

2011–2017 — Build overhaul and documentation expansion

36 changes.

The project modernized its development infrastructure by restructuring the repository with Rollup, Babel, and Playwright, while migrating the documentation site to a new domain. This period focused heavily on expanding the documentation with a comprehensive suite of interactive demos covering layouts, styling, and performance, alongside the introduction of a rigorous benchmarking framework for performance testing.

2018–2025 — ES module migration and renderer refactoring

25 changes.

The codebase underwent a comprehensive migration from CommonJS to ES modules, restructuring the source code into modular files to improve maintainability and bundler compatibility. This architectural shift was accompanied by significant refactoring of the rendering engines, introducing features like SDF shapes, texture atlases, and gradient support in the WebGL and Canvas backends. The period also saw the expansion of documentation with interactive demos and the addition of extensive test suites for algorithms, utilities, and rendering logic.

Features

Add Stripe-style chart demo

A new interactive demo has been added to the documentation that visualizes a graph using Cytoscape.js with a 'stripe' node style. The demo renders nodes with vertical stripes whose background colors and sizes are mapped to node data properties (foo, bar, baz), demonstrating how to apply complex, data-driven visual styles to graph elements.

documentation/demos/stripe-style · high confidence

Add edge arrow types demo

A new interactive demo has been added to the documentation that visualizes various edge arrow types supported by Cytoscape.js. The demo includes a grid layout of nodes connected by edges with different arrow shapes (such as triangle, chevron, and diamond) and provides a button to toggle a 'hollow' style on the edge arrows, allowing users to see how these visual properties render in a graph.

documentation/demos/edge-arrows · high confidence

Add interactive demo for edge radius types

A new interactive demo has been added to the documentation that visualizes the difference between 'arc-radius' and 'influence-radius' edge types in Cytoscape.js. The demo allows users to adjust a global radius value via an input slider and observe how the edge segments render, with visual indicators showing which corners use the specified radius versus those limited by geometry.

documentation/demos/radius-types · high confidence

Add node types demo showcasing various shape options

A new interactive demo has been added to the documentation that visualizes a wide variety of node shapes supported by Cytoscape.js, including standard geometric forms like ellipses, rectangles, and polygons, as well as specialized types such as round-triangles, tags, and custom polygon definitions. This addition allows users to see how different node types render in a live environment.

documentation/demos/node-types · high confidence

Added 6,000-element network visualization demo

A new interactive demo has been added to the documentation that visualizes a large network containing 6,000 elements (nodes and edges). The demo loads graph data from a separate JSON file and renders it using Cytoscape.js with a preset layout and custom styling for nodes and edges. The implementation includes an HTML page, JavaScript logic, CSS styles, and the data file itself, providing a concrete example for handling large-scale graph visualizations.

documentation/demos/6000-elements · high confidence

Added BioJS Cytoscape demo snippets

New code snippets have been added to the documentation to demonstrate Cytoscape.js integration patterns. These include \animated-bfs.js\ for visualizing breadth-first search paths, \images.js\ for rendering nodes with custom background images and interaction animations, \visual.js\ for styling nodes and edges based on data attributes, and \performance-tuning.js\ (along with its associated \performance-tuning.json\ data) for optimizing large graph rendering using techniques like texture mapping and fast edge styles.

snippets · high confidence

Added GeneMANIA export demo

A new demonstration has been added to the documentation showing how to render a network graph exported from GeneMANIA. The demo includes an HTML page, styling, and JavaScript that loads a sample dataset of human gene interactions (including nodes for DNA repair and cell cycle processes) and visualizes them using Cytoscape.js with a concentric layout and color-coded edges for interaction types.

(repo-wide) · high confidence

Added animated BFS demo with hotlinking warning

The documentation now includes a new animated Breadth-First Search (BFS) demo located in the \documentation/demos/animated-bfs\ directory. This demo visualizes a BFS traversal on a graph using Cytoscape.js, highlighting nodes sequentially to demonstrate the algorithm's progress. The entry point \index.html\ includes a warning advising users not to hotlink to GitHub or Rawgit assets in production applications.

documentation/demos/animated-bfs, documentation/demos/linkout-example · high confidence

Added benchmark graph data and random graph generator

The benchmark suite now includes static graph datasets for testing, specifically a small five-node example graph (abcde.json) and a larger biological network dataset (gal.json). Additionally, a new JavaScript utility (random.js) has been added to the benchmark/graphs directory, allowing users to programmatically generate random graphs with configurable node and edge counts for performance testing.

benchmark/graphs · high confidence

Added benchmark runner scripts for single and all suites

New entry-point scripts have been added to the benchmark directory to facilitate running performance tests. The \benchmark/single/index.js\ file allows users to execute a specific benchmark suite (currently configured for \collection-creation\) via the \npm run benchmark:single\ command, while \benchmark/all/index.js\ provides a mechanism to automatically discover and run all available JavaScript benchmark suites in the parent directory.

benchmark/single · high confidence

Added circle layout demo with hotlinking warnings

The circle-layout demo in the documentation has been converted to a new structure, introducing a dedicated HTML page, JavaScript logic, and CSS styling. The demo visualizes a graph using the 'circle' layout algorithm with specific node and edge styling. The HTML file includes a warning against hotlinking resources from GitHub or Rawgit in production applications and utilizes Cloudflare's CDN for polyfills instead of polyfill.io.

documentation/demos/circle-layout · high confidence

Added cose-bilkent compound graph demo

A new demonstration for the cose-bilkent layout plugin has been added to the documentation, showcasing how to render compound graphs (nodes containing other nodes). The demo includes an HTML page, styling, JavaScript logic to fetch and render graph data, and a sample dataset, providing users with a concrete example of the layout's capabilities with nested structures.

documentation/demos/cose-bilkent-layout-compound · high confidence

Added demo for running multiple Cytoscape.js instances

The documentation now includes a new demo in the 'multiple-instances' section that shows how to initialize and style two separate Cytoscape.js graphs on a single page. The demo code defines two distinct instances (rendered in containers 'cy' and 'cy2') with different visual styles, layouts (circle vs. breadthfirst), and node/edge configurations, providing a concrete example for users needing to manage multiple graph views simultaneously.

documentation/demos/multiple-instances · high confidence

Added interactive architecture diagram demo

A new interactive demo has been added to the documentation that visualizes the Cytoscape.js library's internal architecture. The demo renders a graph showing the relationships between core components (such as Core, API, and Extensions) and client applications, allowing users to explore the structural hierarchy and dependencies of the library directly in the browser.

documentation/demos/architecture · high confidence

Added performance-tuning demo with optimized graph rendering

A new demo has been added to the documentation that showcases performance tuning techniques for Cytoscape.js. The demo includes a JavaScript file configuring a graph with a 'haystack' edge style for faster rendering, a CSS stylesheet for full-screen layout, and a data file containing node and edge information. The HTML entry point loads the Cytoscape.js library and includes a polyfill for Promise and fetch APIs via Cloudflare CDN, along with a warning against hotlinking documentation assets in production.

documentation/demos/performance-tuning · high confidence

Added pie-style graph demo with ring chart support

A new demonstration in the documentation shows how to render nodes as pie charts using the \pie-\*\ style properties (such as \pie-size\, \pie-background-color\, and \pie-background-size\) and how to convert specific nodes into ring charts by setting the \pie-hole\ property. The demo includes a complete Cytoscape.js configuration with a circle layout, styled edges, and selection/fading effects, along with a warning against hotlinking the library in production.

documentation/demos/pie-style · high confidence

Added visual-style demo with graph styling examples

The documentation/demos/visual-style area now includes a complete demo (index.html, code.js, style.css) that renders a Cytoscape.js graph. The demo showcases node styling (shapes, sizes, colors), edge styling (bezier curves, arrow shapes, colors), and selection states, providing a concrete example of how to apply visual styles to graph elements.

documentation/demos/visual-style · high confidence

Canvas renderer refactored into modular ES modules with gradient and label support

The canvas renderer implementation has been restructured from a single file into a set of modular ES modules (arrow-shapes, drawing-edges, drawing-elements, drawing-images, drawing-label-text, drawing-nodes, drawing-redraw, drawing-shapes, and texture caches). This refactoring introduces support for linear and radial gradients on node backgrounds and edge lines, as well as gradient underlays and overlays for both nodes and edges. It also adds support for source and target edge labels, allowing distinct text on each end of an edge, and implements new inside label alignment values. The rendering logic now uses centralized color alpha handling and actual element positions for gradient calculations.

src/extensions/renderer/canvas · high confidence

Documentation now includes bundled Cytoscape.js source files

The documentation site now ships with the full Cytoscape.js library (both standard and minified versions) in the \documentation/js\ directory. This allows documentation pages to load the library directly from the docs folder, enabling self-contained demos and embedding of interactive examples without relying on external CDNs or separate build artifacts.

documentation/js · high confidence

Documentation site now hosted at js.cytoscape.org with new multi-window demo

The documentation site is now served from the js.cytoscape.org domain, configured via a new CNAME file. A new 'Multiple windows' demo has been added to the documentation, demonstrating how to initialize and manage Cytoscape.js instances in separate browser windows using window.open. The documentation build system has been updated to use a new docmaker.mjs script and a comprehensive docmaker.json configuration, which manages API documentation, demo listings, and version history (versions.json).

documentation · high confidence

New Breadth-First Layout demo with image nodes and interaction

Added a new interactive demo in the documentation that visualizes a food web using the breadth-first layout. The demo renders nodes as images (loaded from Flickr) and uses bezier curves for edges. It includes an interaction where tapping a node triggers an animation showing it 'eating' its connected food sources, demonstrating node styling, edge styling, and dynamic element manipulation.

documentation/demos/images-breadthfirst-layout · high confidence

New FCOSE gene-gene interaction demo

Added a new interactive demo in the documentation that visualizes gene-gene interactions using the FCOSE layout algorithm. This replaces the previous Cola-based gene-gene demo, providing users with a live example of FCOSE's capabilities on biological network data, including controls for layout parameters like node repulsion and edge length.

documentation/demos/fcose-gene · high confidence

New WebGL GPU-accelerated graph visualization demo

A new interactive demo has been added to the documentation that visualizes a biological enrichment-map network using the Cytoscape.js WebGL renderer. The demo loads network data from a JSON file and renders nodes colored by their Normalized Enrichment Score (red for positive, blue for negative) and edges with specific styling, allowing users to see the performance and visual capabilities of the GPU-accelerated canvas backend.

documentation/demos/gpu · high confidence

New WebGL debug page with interactive rendering controls

A new local debug interface at /debug/webgl allows developers to test and tune WebGL rendering options directly in the browser. The page provides controls to toggle WebGL, select background colors, enable hover styles, and adjust texture atlas settings (size, rows for labels and nodes, and textures per batch). It includes several demo networks (compound nodes, curved edges, enrichment maps, and large NDEx datasets) to verify rendering behavior across different graph structures and styles.

debug/webgl · high confidence

New benchmark suite infrastructure for comparing old and new Cytoscape builds

A new benchmarking framework has been introduced in the suite directory to facilitate performance comparisons between the current Cytoscape build (cytoscape.cjs.js) and a legacy version (cytoscape.benchmark.js). This framework automatically sets up and tears down instances for both versions, allowing developers to easily add test cases that measure the performance difference between the old and new implementations.

benchmark/suite · high confidence

New compound nodes demo with rounded corners and hotlinking warnings

A new interactive demo for compound nodes has been added to the documentation. The demo showcases parent-child node relationships using a preset layout, with specific styling applied to parent nodes to feature rounded corners (10px radius) and padding. The HTML entry point includes a warning comment advising against hotlinking Cytoscape.js assets in production environments.

documentation/demos/compound-nodes · high confidence

New dagre layout demo with bezier edges

A new interactive demo for the dagre layout algorithm has been added to the documentation. The demo visualizes a directed graph using the dagre layout engine and applies a bezier curve style to the edges, providing users with a concrete example of how to configure and render hierarchical layouts with curved connections.

documentation/demos/dagre-layout · high confidence

New debug page with comprehensive testing utilities

The debug page has been rebuilt from scratch to provide a robust environment for testing and verifying library features. It now includes a full suite of interactive controls for layout algorithms, element filtering, and event binding, alongside specific test cases for compound nodes, edge curve styles (bezier, segments, taxi), and visual properties like outlines and text backgrounds. The page also integrates FileSaver.js for exporting graphs and supports live-reload for faster development iteration.

debug · high confidence

New edge-types demo showcasing multiple curve styles

A new interactive demo has been added to the documentation that visualizes various Cytoscape.js edge curve styles, including bezier, unbundled-bezier, haystack, segments, round-segments, taxi, round-taxi, and straight-triangle. The demo uses a 6-column grid layout and includes specific styling and node positioning logic to clearly demonstrate the visual differences between these edge types.

documentation/demos/edge-types · high confidence

New grid layout demo added to documentation

A new interactive demo for the grid layout algorithm has been added to the documentation. This includes the HTML page, styling, JavaScript logic, and sample data, allowing users to see how the grid layout positions nodes in a structured grid format.

documentation/demos/grid-layout · high confidence

New labels demonstration added to documentation

A new interactive demo has been added to the documentation to showcase node and edge label positioning and styling. The demo includes examples for various text alignments (top, center, bottom, left, right, and inside positions), multiline text wrapping (manual and auto), autorotating edge labels, and styled labels with backgrounds and outlines.

documentation/demos/labels · high confidence

Tokyo Railways demo added with HTTPS assets and hotlinking warnings

The Tokyo Railways demonstration has been added to the documentation, featuring a graph visualization of Tokyo railway stations. The demo now exclusively uses HTTPS assets for external libraries (such as Font Awesome, Tippy.js, and Popper.js) to ensure secure loading, and includes explicit warnings in the HTML header advising against hotlinking these resources in production applications.

documentation/demos/tokyo-railways · high confidence

Architecture

Migration to ES modules and restructuring of source files

The source code has been migrated from CommonJS to ES modules, with all files in the src directory renamed from .js to .mjs. The internal architecture has been restructured to separate core logic from API definitions, introducing a new define/ directory that wraps functionality like animations, data handling, and events. A new promise.mjs file provides a built-in Promises/A+ implementation, and utility modules for type checking (is.mjs), math operations (math.mjs), and collection handling (set.mjs, map.mjs) have been added or reorganized to support the new module structure.

src · high confidence

Refactored coordinate and element math into modular files

The coordinate and element math logic previously contained in the base renderer prototype has been extracted into a new modular directory structure (src/extensions/renderer/base/coord-ele-math). This change splits the monolithic implementation into separate modules for coordinates, edge arrows, edge control points, edge endpoints, edge projections, labels, nodes, rendered styles, and z-ordering, improving code organization and maintainability without altering the external rendering behavior.

src/extensions/renderer/base/coord-ele-math · high confidence

Behavioural changes

Add qTip extension demo with zoom constraints and hotlinking warnings

The qTip extension demo now includes zoom constraints (min 0.5, max 2) to prevent excessive scaling, and the HTML page displays a warning against hotlinking external resources in production environments.

documentation/demos/qtip-extension · high confidence

Added cose-layout demo with updated CDN and polyfill support

The cose-layout demo has been converted to a new structure, introducing dedicated files for layout configuration (code.js), styling (cy-style.json, style.css), and data (data.json). The demo now loads external resources via Cloudflare's CDN instead of polyfill.io and includes a warning against hotlinking GitHub or Rawgit assets in production applications.

documentation/demos/cose-layout · high confidence

The spread-layout demo has been converted to a new structure, introducing a dedicated code.js file that initializes a Cytoscape.js graph using the 'spread' layout with a minimum distance of 40, styled with orange nodes and haystack edges. The demo now loads the cytoscape-spread extension v1.3.1 and uses Cloudflare's CDN for the polyfill instead of the previous polyfill.io and rawgit links, ensuring more reliable loading of external resources for users viewing the demonstration.

documentation/demos/spread-layout · high confidence

Core library migrated to ES modules (.mjs)

The core source files in src/core have been renamed from .js to .mjs and their imports updated to use the new extension. This migration enables native ES module support for the library, allowing consumers to use standard import/export syntax and potentially improving tree-shaking and bundler compatibility.

src/core · high confidence

The demo shortcuts in the documentation/demos directory have been converted from absolute symbolic links to relative symbolic links. This change improves portability by ensuring the demo links resolve correctly regardless of the installation directory, preventing broken links when the project is moved or cloned to a different location.

documentation/demos · high confidence

Documentation styling updates: Font Awesome 4.6.3 and Highlight.js themes

The documentation now uses Font Awesome 4.6.3 for icons and includes a comprehensive set of syntax highlighting themes for code blocks (arta, ascetic, atelier-dune, atelier-forest, atelier-heath, atelier-lakeside, atelier-seaside, brown\_paper, dark, default, docco, far, foundation, github, googlecode, idea, ir\_black, magula, mono-blue, monokai, monokai\_sublime, and obsidian). These changes improve the visual presentation and readability of code examples in the documentation.

documentation/css · high confidence

Graph algorithms migrated to ES modules

The graph algorithms in \src/collection/algorithms\ (including A\*, Dijkstra, Bellman-Ford, BFS/DFS, centrality measures, and clustering) have been converted from CommonJS to ES modules, with all files renamed from \.js\ to \.mjs\. This change updates the module system used by these algorithms to align with modern JavaScript standards.

src/collection/algorithms · high confidence

Layout extensions migrated to ES modules

The layout extension files in src/extensions/layout (breadthfirst, circle, concentric, cose, grid, null, preset, random, and index) have been converted from CommonJS (.js) to ES modules (.mjs). This change updates the internal module system for these layouts to use ES module syntax, which may affect how these extensions are imported or bundled in environments that strictly enforce module types.

src/extensions/layout · high confidence

Migrate src/collection to ES modules

The collection module files have been renamed from .js to .mjs and updated to use ES module syntax (import/export). This change modernizes the module system for this part of the codebase, enabling better tree-shaking and static analysis for consumers of these modules.

src/collection · high confidence

Migration to ES modules and addition of legacy compatibility utilities

The utility library has been migrated from CommonJS to ES modules, with all source files renamed from .js to .mjs and reorganized into a modular structure (including new modules for colors, hashing, maps, and positioning). To support legacy environments, a custom \endsWith\ function has been added to \strings.mjs\ as a fallback for older browsers that lack native \String.prototype.endsWith\. The module also introduces new capabilities for color conversion (parsing hex, RGB, HSL, and named colors into tuples), robust hashing of strings and arrays, and memoized string manipulation utilities.

src/util · high confidence

Migration to ES modules and restructuring of selector logic

The codebase has been migrated from CommonJS to ES modules, with all JavaScript files in the extensions and selector directories renamed to .mjs. This change includes a structural reorganization of the selector engine, splitting the parsing, matching, and tokenization logic into dedicated modules (such as parse.mjs, matching.mjs, and data.mjs) to improve modularity and maintainability.

src/extensions, src/extensions/renderer, src/selector · high confidence

Refactor renderer base into modular ES modules and fix grab-state style updates

The renderer base implementation has been restructured into separate ES module files (arrow-shapes, grab-state, images, index, load-listeners, node-shapes, redraw) to improve code organization. A key behavioral fix ensures that the :grabbed CSS style is refreshed on every grab event, resolving a regression where grabbed elements did not visually update their styles correctly. Additionally, the new grab-state module centralizes the logic for tracking and updating the grabbed state of elements.

src/extensions/renderer/base · high confidence

Refactored dimension and bounds logic into modular ES modules

The dimension calculation logic in \src/collection/dimensions\ has been reorganized into separate ES modules (bounds, edge-points, position, width-height) and consolidated via an index file. This structural change ensures that methods like \outerWidth\ and \outerHeight\ now correctly account for the \border-position\ style property (center, outside, or inside) when calculating total element dimensions, and introduces new methods for retrieving rendered edge points (control, segment, source, target, midpoint) and their screen-space equivalents.

src/collection/dimensions · high confidence

Repository scaffolding and build tooling overhaul

The repository has been restructured with new configuration files for the build and test pipeline, including a Babel preset, a Browserslist config targeting IE9+ and modern browsers, and a Rollup build script that produces UMD, CJS, and ESM bundles. A new ESLint configuration and a size-snapshot file for bundle tracking have been added, alongside a Playwright configuration for browser-level testing. The project now specifies Node.js 24 as the development version via .nvmrc and includes a script to automatically update the copyright year in the LICENSE file. As part of this cleanup, the legacy jQuery CytoscapeWeb plugin file has been removed.

(repo-wide) · high confidence

Style system refactored into modular ES modules with new label alignment and text background options

The style engine has been restructured from a single file into separate ES modules (align, apply, bypass, container, get-for-ele, json, parse, properties, string-sheet) to improve maintainability. This update introduces new label alignment options (\left-inside\, \right-inside\, \top-inside\, \bottom-inside\) and a \justification\ property for more precise text positioning. It also adds support for circular text backgrounds via the \text-background-shape\ property. Additionally, the style system now supports \box-selection\ modes (\contain\, \overlap\, \none\) and includes fixes for alpha channel handling in text backgrounds and borders.

src/style · high confidence

Updated cola.js graph demo for v3.3.0 compatibility

The cola.js graph demo in the documentation has been converted to use the new v3.3.0 API, specifically replacing the deprecated \makeLayout()\ function with the standard \layout()\ method. The demo files (HTML, CSS, JS, and data) have been refreshed to align with these changes, ensuring the interactive graph visualization and layout controls function correctly with the latest library version.

documentation/demos/colajs-graph · high confidence

Updated distribution bundles for Cytoscape.js

The \dist\ folder now contains the built CommonJS (\cytoscape.cjs.js\) and ES Module (\cytoscape.esm.min.mjs\) bundles. These files represent the compiled output of the library, ensuring that consumers importing Cytoscape.js receive the minified and transpiled code necessary for runtime execution in various JavaScript environments.

dist · high confidence

Updated initialization demo with interactive node highlighting and hotlinking warnings

The initialization demo has been converted to a new implementation that includes interactive behavior: tapping a node highlights its neighborhood while fading other elements, and tapping the background restores the default view. The demo files (HTML, CSS, and JavaScript) now include a warning in the HTML header advising against hotlinking to GitHub or Rawgit in production applications.

documentation/demos/initialisation · high confidence

WebGL renderer refactored with SDF shapes, texture atlases, and upscalers

The WebGL renderer in src/extensions/renderer/canvas/webgl has been significantly restructured to improve rendering quality, performance, and memory management. Simple shapes (ellipses, round-rectangles) and node underlays/overlays are now rendered using Signed Distance Functions (SDF) in the fragment shader, enabling crisp borders and correct corner radii without relying on texture memory. A new texture atlas system (Atlas, AtlasManager, AtlasBatchManager) batches node and label textures, reducing draw calls and improving garbage collection. Picking mode for mouse interaction has been enhanced with TEX\_PICKING\_MODE to handle label visibility and bounding-box-based hit detection. Additionally, experimental upscalers (FXAA and misc) have been added to improve visual quality on high-DPI displays.

src/extensions/renderer/canvas/webgl · high confidence

Wine and cheese map demo redirects to external site

The wine-cheese-map demo page has been converted into a redirect that forwards users to the external website wineandcheesemap.com. The new HTML file includes a meta refresh and JavaScript fallback to ensure navigation, along with a hotlinking warning advising against using these resources in production applications.

documentation/demos/wine-cheese-map · high confidence

Test coverage

Added Playwright end-to-end test suite for the demo todo application; Added Playwright test page for the renderer; Added Playwright tests for renderer bounding box and edge calculations; Added benchmark suite for core Cytoscape.js operations; Added comprehensive test suites for graph algorithms and collection operations; Added unit tests for core utility and rendering modules.

Dependencies

Cytoscape.js dependency and build toolchain update

The project's \package.json\ and \package-lock.json\ have been updated to version 3.35.0-unstable, introducing significant upgrades to the development toolchain. Key dependency changes include upgrading Mocha to v11.1.0, ESLint to v9.18.0, and Rollup to v4.31.0, alongside updates to Babel, Playwright, and various Rollup plugins. These changes modernize the build and testing infrastructure while maintaining the library's core functionality.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

How this codebase got here

This is the PUBLIC form of this artifact. Findings are listed in full, but the details of SECURITY findings — which rule fired, in which file, on which line, and how to fix it — are deliberately withheld, and any secret-scanner results are excluded entirely. Where detail is absent here it was REMOVED FOR PUBLICATION; it is not missing from the analysis. The complete artifact is available from the repository owner.

Score

  • CAI 46 → 45 (-1.1)
  • Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

Lenses

  • Code Health 39 → 38 (-0.4)
  • Architecture 100 → 89 (-10.3)
  • Maturity 71 → 59 (-12.7)
  • Readiness 69 → 69 (+0.5)
  • Security 62 → 64 (+1.8)
  • Accessibility 36 → 36 (+0.0)
  • Performance 75 (new)

Resolved (66)

  • Critical CVE: [GHSA redacted] (package-lock.json)
  • Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
  • Documentation: no usage examples (README.md)
  • Hotspot: src/math.mjs (src/math.mjs)
  • appendFromString (cognitive 32) (src/style/string-sheet.mjs)
  • applyBypass (cognitive 43) (src/style/bypass.mjs)
  • applyBypass (cyclomatic 21) (src/style/bypass.mjs)
  • applyParsedProperty (cognitive 69) (src/style/apply.mjs)
  • applyParsedProperty (cyclomatic 44) (src/style/apply.mjs)
  • bufferCanvasImage (cognitive 17) (src/extensions/renderer/canvas/export-image.mjs)
  • calculateArrowAngles (cognitive 25) (src/extensions/renderer/base/coord-ele-math/edge-arrows.mjs)
  • calculateArrowAngles (cyclomatic 23) (src/extensions/renderer/base/coord-ele-math/edge-arrows.mjs)
  • cleanElements (cognitive 17) (src/style/apply.mjs)
  • createGradientStyleFor (cognitive 23) (src/extensions/renderer/canvas/drawing-redraw.mjs)
  • createGradientStyleFor (cyclomatic 23) (src/extensions/renderer/canvas/drawing-redraw.mjs)
  • dequeue (cognitive 19) (src/extensions/renderer/canvas/layered-texture-cache.mjs)
  • drawArrowShape (cyclomatic 18) (src/extensions/renderer/canvas/drawing-edges.mjs)
  • drawCachedElementPortion (cognitive 21) (src/extensions/renderer/canvas/drawing-elements.mjs)
  • drawEdge (cyclomatic 16) (src/extensions/renderer/canvas/drawing-edges.mjs)
  • drawEdgePath (cognitive 35) (src/extensions/renderer/canvas/drawing-edges.mjs)
  • …and 46 more

New (88)

  • Critical CVE: [GHSA redacted] (package-lock.json)
  • Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (the committed lockfile resolved no direct production dependency)
  • Documentation: no installation or build instructions (README.md)
  • FileTooLong: base/load-listeners.mjs (src/extensions/renderer/base/load-listeners.mjs)
  • FileTooLong: style/properties.mjs (src/style/properties.mjs)
  • High CVE: [GHSA redacted] (package-lock.json)
  • High CVE: [GHSA redacted] (package-lock.json)
  • Hotspot: src/extensions/renderer/canvas/drawing-redraw.mjs (src/extensions/renderer/canvas/drawing-redraw.mjs)
  • Medium CVE: [GHSA redacted] (package-lock.json)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Medium: security finding (details withheld)
  • Projects may be oversized for their cohesion
  • apply.styfn.applyParsedProperty (cognitive 70) (src/style/apply.mjs)
  • apply.styfn.applyParsedProperty (cyclomatic 44) (src/style/apply.mjs)
  • …and 68 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

Survey your own repository

cytoscape/cytoscape.js was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.

About this page

  • The score is its most recent published measurement, taken on 2 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
  • Measured at commit 7ba634095d8954089ee5dc09ada0030f2dca134c — the exact code this score is about.
  • Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
  • Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.