@kgdiff/cytoscape: render kgdiff scenes in Cytoscape.js

Open
  • Is something wrong?
#12 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Read packages/g6/README.md and packages/g6/src/index.ts, then review docs/visual-language.md and packages/scene/src/types.ts to understand the adapter API and scene primitives. The issue asks contributors to comment first because the package and API need agreement, so this is not ready for implementation yet. Once agreed, build and test the adapter, add its dev page, guide, README, changeset, and package checks; done means those deliverables are present.

Written by the indexing model from the issue text.

Description

enhancement help wanted integrations
Why

Cytoscape.js is the most widely used graph library in
bioinformatics and in many knowledge graph front ends. People who already show their graphs
with it would rather render a diff in the same canvas than embed a second viewer. kgdiff
already has one renderer adapter, for AntV G6 v5 (@kgdiff/g6); this is the second.

What

A @kgdiff/cytoscape package, modelled on @kgdiff/g6:

  • toCytoscapeElements(scene, frame): kgdiff's visual primitives as Cytoscape elements plus a
    stylesheet, using the same visual language (five colour families, hollow dashed ghosts,
    struck-through old names). The stylesheet comes from @kgdiff/scene's theme tokens, not
    from hard-coded colours.
  • createDiffGraph(container, scene, options): a controller with the same surface as the G6
    one: setLayer('union' | 'before' | 'after'), selectHunk(i), playReplay(), stop(),
    setTheme(), destroy().
  • cytoscape as a peer dependency, as G6 is for @kgdiff/g6.

A first version can leave out the replay and the merge / split arcs; say what is missing in the
README.

Where to start
  • Read packages/g6/README.md, then packages/g6/src/index.ts: toG6Data
    (#L57)
    and createDiffGraph
    (#L122).
    map-node.ts and map-edge.ts turn primitives into G6 data: the Cytoscape version replaces
    these.
  • What the primitives mean: docs/visual-language.md and packages/scene/src/types.ts.
  • The G6 tests (packages/g6/test/) show how to test an adapter without a real canvas.
  • pnpm check:packages checks a new package the way npm will see it (publint, attw). All
    packages share one version: add the new one to the fixed group in .changeset/config.json.
Done when
  • The package builds, is tested, and has a README with a quick start and a screenshot.
  • A dev page like packages/g6/dev/ shows the example datasets.
  • A guide page next to docs/guide/g6.md, the package in the README tables, and a changeset.

Comment here first: a new package is a bigger commitment than a feature, and the API is worth
agreeing on before the code.

Dominant language
TypeScript
Stars
47
Forks
6
Avg merge
2h 32m
Merged PRs (30d)
22

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from iiwish/kgdiff

All issues in iiwish/kgdiff

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.