{ "src/lib/components/Cytoscape.react.js": { "description": "A Component Library for Dash aimed at facilitating network visualization in\nPython, wrapped around [Cytoscape.js](http://js.cytoscape.org/).", "displayName": "Cytoscape", "methods": [ { "name": "generateNode", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null } ], "returns": null }, { "name": "generateEdge", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null } ], "returns": null }, { "name": "handleCy", "docblock": null, "modifiers": [], "params": [ { "name": "cy", "type": null } ], "returns": null }, { "name": "handleImageGeneration", "docblock": null, "modifiers": [], "params": [ { "name": "imageType", "type": null }, { "name": "imageOptions", "type": null }, { "name": "actionsToPerform", "type": null }, { "name": "fileName", "type": null } ], "returns": null }, { "name": "downloadBlob", "docblock": null, "modifiers": [], "params": [ { "name": "blob", "type": null }, { "name": "fileName", "type": null } ], "returns": null } ], "props": { "id": { "type": { "name": "string" }, "required": false, "description": "The ID used to identify this component in Dash callbacks." }, "className": { "type": { "name": "string" }, "required": false, "description": "Sets the class name of the element (the value of an element's html\nclass attribute)." }, "style": { "type": { "name": "object" }, "required": false, "description": "Add inline styles to the root element.", "defaultValue": { "value": "{width: '600px', height: '600px'}", "computed": false } }, "setProps": { "type": { "name": "func" }, "required": false, "description": "Dash-assigned callback that should be called whenever any of the\nproperties change." }, "elements": { "type": { "name": "union", "value": [ { "name": "arrayOf", "value": { "name": "shape", "value": { "group": { "name": "string", "description": "Either 'nodes' or 'edges'. If not given, it's automatically inferred.", "required": false }, "data": { "name": "shape", "value": { "id": { "name": "string", "description": "Reference to the element, useful for selectors and edges. Randomly assigned if not given.", "required": false }, "label": { "name": "string", "description": "Optional name for the element, useful when `data(label)` is given to a style's `content`\nor `label`. It is only a convention.", "required": false }, "parent": { "name": "string", "description": "Only for nodes. Optional reference to another node. Needed to create compound nodes.", "required": false }, "source": { "name": "string", "description": "Only for edges. The id of the source node, which is where the edge starts.", "required": false }, "target": { "name": "string", "description": "Only for edges. The id of the target node, where the edge ends.", "required": false } }, "description": "Element specific data.", "required": false }, "position": { "name": "shape", "value": { "x": { "name": "number", "description": "The x-coordinate of the node.", "required": false }, "y": { "name": "number", "description": "The y-coordinate of the node.", "required": false } }, "description": "Only for nodes. The position of the node.", "required": false }, "selected": { "name": "bool", "description": "If the element is selected upon initialisation.", "required": false }, "selectable": { "name": "bool", "description": "If the element can be selected.", "required": false }, "locked": { "name": "bool", "description": "Only for nodes. If the position is immutable.", "required": false }, "grabbable": { "name": "bool", "description": "Only for nodes. If the node can be grabbed and moved by the user.", "required": false }, "classes": { "name": "string", "description": "Space separated string of class names of the element. Those classes can be selected\nby a style selector.", "required": false } } } }, { "name": "exact", "value": { "nodes": { "name": "array", "required": false }, "edges": { "name": "array", "required": false } } } ] }, "required": false, "description": "A list of dictionaries representing the elements of the networks. Each dictionary describes an element, and\nspecifies its purpose. The [official Cytoscape.js documentation](https://js.cytoscape.org/#notation/elements-json)\noffers an extensive overview and examples of element declaration.\nAlternatively, a dictionary with the format { 'nodes': [], 'edges': [] } is allowed at initialization,\nbut arrays remain the recommended format.", "defaultValue": { "value": "[]", "computed": false } }, "stylesheet": { "type": { "name": "arrayOf", "value": { "name": "exact", "value": { "selector": { "name": "string", "description": "Which elements you are styling. Generally, you select a group of elements (node, edges, both),\na class (that you declare in the element dictionary), or an element by ID.", "required": true }, "style": { "name": "object", "description": "What aspects of the elements you want to modify. This could be the size or\ncolor of a node, the shape of an edge arrow, or many more.", "required": true } } } }, "required": false, "description": "A list of dictionaries representing the styles of the elements.\nEach dictionary requires the following keys: `selector` and `style`.\n\nBoth the [selector](https://js.cytoscape.org/#selectors) and\nthe [style](https://js.cytoscape.org/#style/node-body) are\nexhaustively documented in the Cytoscape.js docs. Although methods such\nas `cy.elements(...)` and `cy.filter(...)` are not available, the selector\nstring syntax stays the same." }, "layout": { "type": { "name": "shape", "value": { "name": { "name": "enum", "value": [ { "value": "'random'", "computed": false }, { "value": "'preset'", "computed": false }, { "value": "'circle'", "computed": false }, { "value": "'concentric'", "computed": false }, { "value": "'grid'", "computed": false }, { "value": "'breadthfirst'", "computed": false }, { "value": "'cose'", "computed": false }, { "value": "'close-bilkent'", "computed": false }, { "value": "'cola'", "computed": false }, { "value": "'euler'", "computed": false }, { "value": "'spread'", "computed": false }, { "value": "'dagre'", "computed": false }, { "value": "'klay'", "computed": false } ], "description": "The layouts available by default are:\n `random`: Randomly assigns positions.\n `preset`: Assigns position based on the `position` key in element dictionaries.\n `circle`: Single-level circle, with optional radius.\n `concentric`: Multi-level circle, with optional radius.\n `grid`: Square grid, optionally with numbers of `rows` and `cols`.\n `breadthfirst`: Tree structure built using BFS, with optional `roots`.\n `cose`: Force-directed physics simulation.\n\nSome external layouts are also included. To use them, run\n `dash_cytoscape.load_extra_layouts()` before creating your Dash app. Be careful about\n using the extra layouts when not necessary, since they require supplementary bandwidth\n for loading, which impacts the startup time of the app.\n The external layouts are:\n [cose-bilkent](https://github.com/cytoscape/cytoscape.js-cose-bilkent),\n [cola](https://github.com/cytoscape/cytoscape.js-cola),\n [euler](https://github.com/cytoscape/cytoscape.js-dagre),\n [spread](https://github.com/cytoscape/cytoscape.js-spread),\n [dagre](https://github.com/cytoscape/cytoscape.js-dagre),\n [klay](https://github.com/cytoscape/cytoscape.js-klay),", "required": true }, "fit": { "name": "bool", "description": "Whether to render the nodes in order to fit the canvas.", "required": false }, "padding": { "name": "number", "description": "Padding around the sides of the canvas, if fit is enabled.", "required": false }, "animate": { "name": "bool", "description": "Whether to animate change in position when the layout changes.", "required": false }, "animationDuration": { "name": "number", "description": "Duration of animation in milliseconds, if enabled.", "required": false }, "boundingBox": { "name": "object", "description": "How to constrain the layout in a specific area. Keys accepted are either\n`x1, y1, x2, y2` or `x1, y1, w, h`, all of which receive a pixel value.", "required": false } } }, "required": false, "description": "A dictionary specifying how to set the position of the elements in your\ngraph. The `'name'` key is required, and indicates which layout (algorithm) to\nuse. The keys accepted by `layout` vary depending on the algorithm, but these\nkeys are accepted by all layouts: `fit`, `padding`, `animate`, `animationDuration`,\n`boundingBox`.\n\n The complete list of layouts and their accepted options are available on the\n [Cytoscape.js docs](https://js.cytoscape.org/#layouts) . For the external layouts,\nthe options are listed in the \"API\" section of the README.\n Note that certain keys are not supported in Dash since the value is a JavaScript\n function or a callback. Please visit this\n[issue](https://github.com/plotly/dash-cytoscape/issues/25) for more information.", "defaultValue": { "value": "{name: 'grid'}", "computed": false } }, "pan": { "type": { "name": "exact", "value": { "x": { "name": "number", "description": "The x-coordinate of the node", "required": false }, "y": { "name": "number", "description": "The y-coordinate of the node", "required": false } } }, "required": false, "description": "Dictionary indicating the initial panning position of the graph. The\nfollowing keys are accepted:", "defaultValue": { "value": "{x: 0, y: 0}", "computed": false } }, "zoom": { "type": { "name": "number" }, "required": false, "description": "The initial zoom level of the graph. You can set `minZoom` and\n`maxZoom` to set restrictions on the zoom level.", "defaultValue": { "value": "1", "computed": false } }, "panningEnabled": { "type": { "name": "bool" }, "required": false, "description": "Whether panning the graph is enabled (i.e., the position of the graph is\nmutable overall).", "defaultValue": { "value": "true", "computed": false } }, "userPanningEnabled": { "type": { "name": "bool" }, "required": false, "description": "Whether user events (e.g. dragging the graph background) are allowed to\npan the graph.", "defaultValue": { "value": "true", "computed": false } }, "minZoom": { "type": { "name": "number" }, "required": false, "description": "A minimum bound on the zoom level of the graph. The viewport can not be\nscaled smaller than this zoom level.", "defaultValue": { "value": "1e-50", "computed": false } }, "maxZoom": { "type": { "name": "number" }, "required": false, "description": "A maximum bound on the zoom level of the graph. The viewport can not be\nscaled larger than this zoom level.", "defaultValue": { "value": "1e50", "computed": false } }, "zoomingEnabled": { "type": { "name": "bool" }, "required": false, "description": "Whether zooming the graph is enabled (i.e., the zoom level of the graph\nis mutable overall).", "defaultValue": { "value": "true", "computed": false } }, "userZoomingEnabled": { "type": { "name": "bool" }, "required": false, "description": "Whether user events (e.g. dragging the graph background) are allowed\nto pan the graph.", "defaultValue": { "value": "true", "computed": false } }, "boxSelectionEnabled": { "type": { "name": "bool" }, "required": false, "description": "Whether box selection (i.e. drag a box overlay around, and release it\nto select) is enabled. If enabled, the user must taphold to pan the graph.", "defaultValue": { "value": "false", "computed": false } }, "autoungrabify": { "type": { "name": "bool" }, "required": false, "description": "Whether nodes should be ungrabified (not grabbable by user) by\ndefault (if true, overrides individual node state).", "defaultValue": { "value": "false", "computed": false } }, "autolock": { "type": { "name": "bool" }, "required": false, "description": "Whether nodes should be locked (not draggable at all) by default\n(if true, overrides individual node state).", "defaultValue": { "value": "false", "computed": false } }, "autounselectify": { "type": { "name": "bool" }, "required": false, "description": "Whether nodes should be unselectified (immutable selection state) by\ndefault (if true, overrides individual element state).", "defaultValue": { "value": "false", "computed": false } }, "autoRefreshLayout": { "type": { "name": "bool" }, "required": false, "description": "Whether the layout should be refreshed when elements are added or removed.", "defaultValue": { "value": "true", "computed": false } }, "tapNode": { "type": { "name": "exact", "value": { "edgesData": { "name": "array", "description": "node specific item", "required": false }, "renderedPosition": { "name": "object", "description": "node specific item", "required": false }, "timeStamp": { "name": "number", "description": "node specific item", "required": false }, "classes": { "name": "string", "description": "General item (for all elements)", "required": false }, "data": { "name": "object", "description": "General item (for all elements)", "required": false }, "grabbable": { "name": "bool", "description": "General item (for all elements)", "required": false }, "group": { "name": "string", "description": "General item (for all elements)", "required": false }, "locked": { "name": "bool", "description": "General item (for all elements)", "required": false }, "position": { "name": "object", "description": "General item (for all elements)", "required": false }, "selectable": { "name": "bool", "description": "General item (for all elements)", "required": false }, "selected": { "name": "bool", "description": "General item (for all elements)", "required": false }, "style": { "name": "object", "description": "General item (for all elements)", "required": false }, "ancestorsData": { "name": "union", "value": [ { "name": "object" }, { "name": "array" } ], "description": "Item for compound nodes", "required": false }, "childrenData": { "name": "union", "value": [ { "name": "object" }, { "name": "array" } ], "description": "Item for compound nodes", "required": false }, "descendantsData": { "name": "union", "value": [ { "name": "object" }, { "name": "array" } ], "description": "Item for compound nodes", "required": false }, "parentData": { "name": "union", "value": [ { "name": "object" }, { "name": "array" } ], "description": "Item for compound nodes", "required": false }, "siblingsData": { "name": "union", "value": [ { "name": "object" }, { "name": "array" } ], "description": "Item for compound nodes", "required": false }, "isParent": { "name": "bool", "description": "Item for compound nodes", "required": false }, "isChildless": { "name": "bool", "description": "Item for compound nodes", "required": false }, "isChild": { "name": "bool", "description": "Item for compound nodes", "required": false }, "isOrphan": { "name": "bool", "description": "Item for compound nodes", "required": false }, "relativePosition": { "name": "object", "description": "Item for compound nodes", "required": false } } }, "required": false, "description": "The complete node dictionary returned when you tap or click it. Read-only." }, "tapNodeData": { "type": { "name": "object" }, "required": false, "description": "The data dictionary of a node returned when you tap or click it. Read-only." }, "tapEdge": { "type": { "name": "exact", "value": { "isLoop": { "name": "bool", "description": "Edge-specific item", "required": false }, "isSimple": { "name": "bool", "description": "Edge-specific item", "required": false }, "midpoint": { "name": "object", "description": "Edge-specific item", "required": false }, "sourceData": { "name": "object", "description": "Edge-specific item", "required": false }, "sourceEndpoint": { "name": "object", "description": "Edge-specific item", "required": false }, "targetData": { "name": "object", "description": "Edge-specific item", "required": false }, "targetEndpoint": { "name": "object", "description": "Edge-specific item", "required": false }, "timeStamp": { "name": "number", "description": "Edge-specific item", "required": false }, "classes": { "name": "string", "description": "General item (for all elements)", "required": false }, "data": { "name": "object", "description": "General item (for all elements)", "required": false }, "grabbable": { "name": "bool", "description": "General item (for all elements)", "required": false }, "group": { "name": "string", "description": "General item (for all elements)", "required": false }, "locked": { "name": "bool", "description": "General item (for all elements)", "required": false }, "selectable": { "name": "bool", "description": "General item (for all elements)", "required": false }, "selected": { "name": "bool", "description": "General item (for all elements)", "required": false }, "style": { "name": "object", "description": "General item (for all elements)", "required": false } } }, "required": false, "description": "The complete edge dictionary returned when you tap or click it. Read-only." }, "tapEdgeData": { "type": { "name": "object" }, "required": false, "description": "The data dictionary of an edge returned when you tap or click it. Read-only." }, "mouseoverNodeData": { "type": { "name": "object" }, "required": false, "description": "The data dictionary of a node returned when you hover over it. Read-only." }, "mouseoverEdgeData": { "type": { "name": "object" }, "required": false, "description": "The data dictionary of an edge returned when you hover over it. Read-only." }, "selectedNodeData": { "type": { "name": "array" }, "required": false, "description": "The list of data dictionaries of all selected nodes (e.g. using\nShift+Click to select multiple nodes, or Shift+Drag to use box selection). Read-only." }, "selectedEdgeData": { "type": { "name": "array" }, "required": false, "description": "The list of data dictionaries of all selected edges (e.g. using\nShift+Click to select multiple nodes, or Shift+Drag to use box selection). Read-only." }, "generateImage": { "type": { "name": "shape", "value": { "type": { "name": "enum", "value": [ { "value": "'svg'", "computed": false }, { "value": "'png'", "computed": false }, { "value": "'jpg'", "computed": false }, { "value": "'jpeg'", "computed": false } ], "description": "File type to output", "required": false }, "options": { "name": "object", "description": "Dictionary of options to cy.png() / cy.jpg() or cy.svg() for image generation.\nSee https://js.cytoscape.org/#core/export for details. For `'output'`, only 'base64'\nand 'base64uri' are supported. Default: `{'output': 'base64uri'}`.", "required": false }, "action": { "name": "enum", "value": [ { "value": "'store'", "computed": false }, { "value": "'download'", "computed": false }, { "value": "'both'", "computed": false } ], "description": "`'store'`: Stores the image data (only jpg and png are supported)\nin `imageData` and invokes server-side Dash callbacks. `'download'`: Downloads the image\nas a file with all data handling done client-side. No `imageData` callbacks are fired.\n`'both'`: Stores image data and downloads image as file. The default is `'store'`", "required": false }, "filename": { "name": "string", "description": "Name for the file to be downloaded. Default: 'cyto'.", "required": false } } }, "required": false, "description": "Dictionary specifying options to generate an image of the current cytoscape graph.\nValue is cleared after data is received and image is generated. This property will\nbe ignored on the initial creation of the cytoscape object and must be invoked through\na callback after it has been rendered.\n\nIf the app does not need the image data server side and/or it will only be used to download\nthe image, it may be prudent to invoke `'download'` for `action` instead of\n`'store'` to improve performance by preventing transfer of data to the server.", "defaultValue": { "value": "{}", "computed": false } }, "imageData": { "type": { "name": "string" }, "required": false, "description": "String representation of the image requested with generateImage. Null if no\nimage was requested yet or the previous request failed. Read-only.", "defaultValue": { "value": "null", "computed": false } }, "responsive": { "type": { "name": "bool" }, "required": false, "description": "Toggles intelligent responsive resize of Cytoscape graph with viewport size change", "defaultValue": { "value": "false", "computed": false } } } } }