Socket
Socket
Sign inDemoInstall

cytoscape-html-node

Package Overview
Dependencies
6
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    cytoscape-html-node

This extension allows for the creation of html in cytoscape nodes that can change based on zoom level.


Version published
Weekly downloads
95
decreased by-24.6%
Maintainers
1
Install size
422 kB
Created
Weekly downloads
 

Readme

Source

cytoscape-html-node

Description

This extension allows for the creation of html in cytoscape nodes that can change based on zoom level.

This extension was built as a use case of https://github.com/kaluginserg/cytoscape-node-html-label.

Dependencies

  • cytoscape: ^3.16.3
  • cytoscape-node-html-label: ^1.2.1

Usage instructions

Download the library:

  • via npm: npm install cytoscape-html-node
  • via direct download in the repository

Import the library as appropriate for your project:

ES import:

import cytoscape from 'cytoscape';
import { register as htmlnode } from 'cytoscape-html-node';

cytoscape.use(htmlnode);

CommonJS require:

let cytoscape = require('cytoscape');
let htmlnode = require('cytoscape-html-node');

cytoscape.use(htmlnode);

AMD:

require(['cytoscape', 'cytoscape-html-node'], function (cytoscape, htmlnode) {
  htmlnode(cytoscape);
});

API

Example

  • For a more detailed example, see example/src/example.js.
import cytoscape from 'cytoscape';
import { register as htmlnode } from 'cytoscape-html-node';

// register extensions
cytoscape.use(htmlnode);

let cy = cytoscape({
  container: document.getElementById('cy'),
  layout: {
    name: 'random',
  },
  style: [
    {
      selector: '.htmlNodeBaseStyle',
      style: {
        'background-color': 'lightgrey',
      },
    },
    {
      selector: '.htmlNodeAltStyle',
      style: {
        'background-color': 'darkblue',
      },
    },
  ],
  elements: [
    {
      group: 'nodes',
      data: {
        id: 'a1',
        shortSum: 'Short summary.',
        mediumSum: 'This a medium summary.',
        longSum: 'This is a much longer summary.',
      },
    },
    {
      group: 'nodes',
      data: {
        id: 'a2',
        shortSum: 'Short summary.',
        mediumSum: 'This a medium summary.',
        longSum: 'This is a much longer summary.',
      },
    },
    {
      group: 'nodes',
      data: {
        id: 'a3',
        shortSum: 'Short summary.',
        mediumSum: 'This a medium summary.',
        longSum: 'This is a much longer summary.',
      },
    },
    {
      group: 'nodes',
      data: {
        id: 'a4',
        shortSum: 'Short summary.',
        mediumSum: 'This a medium summary.',
        longSum: 'This is a much longer summary.',
      },
    },
  ],
});

const htmlnode = cy.htmlnode();

htmlnode.createHtmlNode(cytoscape, cy, {
  person: {
    query: "[type = 'person']",
    staticZoomLevel: 0.3,
    template: [
      {
        zoomRange: [0.3, 1],
        template: {
          html: `<div id="htmlLabel:#{data.id}">
                   <div class="largeFont">#{data.shortSum}</div>
                 </div>`,
          cssClass: 'htmlCard',
        },
      },
      {
        zoomRange: [1, 3],
        template: {
          html: `<div id="htmlLabel:#{data.id}">
                   <div class="mediumFont">#{data.mediumSum}</div>
                 </div>`,
          cssClass: 'htmlCard',
        },
      },
      {
        zoomRange: [3, 100],
        template: {
          html: `<div id="htmlLabel:#{data.id}" class="cardField">
                   <div class="smallFont">#{data.longSum}</div>
                 </div>`,
          cssClass: 'htmlCard',
        },
      },
    ],
  },

  event: {
    query: "[type = 'event']",
    template: [
      {
        zoomRange: [0.3, 1],
        template: {
          html: `<div id="htmlLabel:#{data.id}">
                   <div class="smallFont">#{data.shortEventInfo}</div>
                 </div>`,
          cssClass: 'htmlEvent',
        },
      },
      {
        zoomRange: [1, 3],
        template: {
          html: `<div id="htmlLabel:#{data.id}">
                   <div class="mediumFont">#{data.mediumEventInfo}</div>
                 </div>`,
          cssClass: 'htmlEvent',
        },
      },
      {
        zoomRange: [3, 100],
        template: {
          html: `<div id="htmlLabel:#{data.id}">
                   <div class="smallFont">#{data.longEventInfo}</div>
                 </div>`,
          cssClass: 'htmlEvent',
        },
      },
    ],
  },
});

Include the following css to use staticZoomLevel:

.html-node-notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

Use information

  • The extension call should occur only once. All templates should be specified in that call, even if they are not immediately needed.

  • query: Accepts any cytoscape query. Specifies which node(s) template will apply to. Nodes added after the intial extension call that match the query will have html applied to them.

  • staticZoomLevel: Optionally specify a zoom level. When the cytoscape zoom level is greater than staticZoomLevel, the corresponding html has a static size.

  • htmlNodeBaseStyle: The style of the cytoscape node(s) when zoom has not passed the minimum zoomRange value.

  • htmlNodeAltStyle: The style of the cytoscape node(s) when zoom has passed the minimum zoomRange value.

  • zoomRange: The zoom range for which the template html is used. The values for each zoomRange within a query should be continuous with ascending values. The minimum value of all zoomRange within a query specifies when to toggle between altColor and defaultColor. The largest zoomRange should be arbitrarily large.

  • Cytoscape data can be accessed within html using #{data.prop} where prop is some cytoscape node data property.

  • The parent div should follow: <div id="htmlLabel:#{data.id}"></div>

Style suggestions

  • The width and height of the parent html-node div should be specified.

  • The parent html-node div should be centered.

  • Either content should not exceed the height of the parent html-node div or overflow should be managed.

Keywords

FAQs

Last updated on 18 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc