This is a Cytoscape.js extension to show visual cues on or around nodes or edges. The goal is to provide context sensitive operations on nodes or edges via these visual cues. The cues will appear always, on hover or when selected. The user is allowed to customize the position and UI of the cue. It works by inserting visual cues as HTML elements into the Cytoscape container. You should set CSS overflow: hidden;
for the container element since cues might overflow the Cytoscape container. If you will contribute to the extension, please read the developer guide first.
https://user-images.githubusercontent.com/8426741/151511191-82ee64b9-3709-4cef-ad50-76d26d1867d7.mp4
git clone https://github.com/iVis-at-Bilkent/cytoscape.js-visual-cues.git
cd cytoscape.js-visual-cues
npm install
to install the dependenciesnpm run demo
. By default it will open http://localhost:8080/demo/demo.htmlAdds setActiveCueInstance
, getActiveInstanceId
, and pngFull
to the cytoscape core methods.
cy.setActiveCueInstance(id: number)
cy.getActiveCueInstanceId()
cy.pngFull(options: any, ignoreElementClasses: string[]): string
Adds addCue
, removeCue
, updateCue
, getCueData
, showCue
, hideCue
to the cytoscape collection methods.
ele.addCue(cueOptions: CueOptions): boolean[]
ele.removeCue(cueId: string | number)
cueId
is null
or undefined
, deletes all the cue(s).ele.updateCue(cueId: string | number)
ele.getCueData(): Str2Cues
ele.showCue(cueId: string | number)
cueId
is not found, shows all the cues of the element.ele.hideCue(cueId: string | number)
cueId
is not found, hides all the cues of the element.type NodeCuePosition =
| "top"
| "center"
| "bottom"
| "right"
| "left"
| "top-left"
| "top-right"
| "bottom-right"
| "bottom-left";
type EdgeCuePosition = "target" | "source" | "center";
interface CueOptions {
id: number | string;
show: "select" | "hover" | "always" | "never" | "over";
position: NodeCuePosition | EdgeCuePosition;
marginX: string | number;
marginY: string | number;
onCueClicked: ((ele: any, id: number | string) => void) | undefined;
htmlElem: HTMLElement;
imgData: { width: number, height: number, src: string } | null;
zoom2hide: number;
isFixedSize: boolean;
zIndex: number;
tooltip: string;
cursor: string;
}
interface Str2Cues {
[key: string]: Cues;
}
export interface Cues {
[key: string]: CueOptions;
}
{
show: 'always',
isFixedSize: false,
marginX: 0,
marginY: 0,
zoom2hide: 0,
tooltip: '',
cursor: 'initial'
}
After getting a build (use npm run build
or npm run build-dev
), you can import the generated files under "dist" folder. It will generate CommonJS, Universal Module Definition and ES bundles.