{"id":1252,"date":"2023-11-27T08:01:02","date_gmt":"2023-11-27T07:01:02","guid":{"rendered":"https:\/\/inseri.swiss\/?p=1252"},"modified":"2025-11-26T08:01:02","modified_gmt":"2025-11-26T08:01:02","slug":"cytoscape-block","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/11\/cytoscape-block\/","title":{"rendered":"Cytoscape Block"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <strong>Cytoscape<\/strong> block allows the visualisation of graphs. It relies on the <a href=\"https:\/\/js.cytoscape.org\/\" data-type=\"link\" data-id=\"https:\/\/js.cytoscape.org\/\">Cytoscape.js<\/a> and it is used internally by inseri to enable the <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/features\/data_flow\/\" target=\"_blank\" rel=\"noreferrer noopener\">Data Flow<\/a> charts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As input we specify the nodes and the edges in a JSON format:<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-text-editor\" data-attributes=\"{&quot;blockId&quot;:&quot;Eqkr7a6AssHCZsbGGxpKR&quot;,&quot;content&quot;:&quot;%5B%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22a%22%2C%20%22label%22%3A%20%22A%22%20%7D%20%7D%2C%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22b%22%2C%20%22label%22%3A%20%22B%22%20%7D%20%7D%2C%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22c%22%2C%20%22label%22%3A%20%22C%22%20%7D%20%7D%2C%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22d%22%20%7D%20%7D%2C%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22ab%22%2C%20%22source%22%3A%20%22a%22%2C%20%22target%22%3A%20%22b%22%20%7D%20%7D%2C%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22cd%22%2C%20%22source%22%3A%20%22c%22%2C%20%22target%22%3A%20%22d%22%20%7D%20%7D%2C%0A%20%20%20%20%7B%20%22data%22%3A%20%7B%20%22id%22%3A%20%22ac%22%2C%20%22source%22%3A%20%22a%22%2C%20%22target%22%3A%20%22c%22%20%7D%20%7D%5D&quot;,&quot;contentType&quot;:&quot;application\/json&quot;,&quot;editable&quot;:false,&quot;height&quot;:220,&quot;isVisible&quot;:true,&quot;label&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;JSON&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Next we use the JSON as input to visualise the graph:<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-cytoscape\" data-attributes=\"{&quot;blockId&quot;:&quot;w89tbokTwKAbAXdaOeE1H&quot;,&quot;height&quot;:316,&quot;inputKey&quot;:&quot;Eqkr7a6AssHCZsbGGxpKR\/content&quot;,&quot;layout&quot;:&quot;dagre&quot;,&quot;layoutKey&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;viz&quot;},&quot;styleKey&quot;:&quot;&quot;}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">By selecting an edge or a node a corresponding JSON is emitted as output. Next, we display it below in the Text Viewer block.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-text-viewer\" data-attributes=\"{&quot;blockId&quot;:&quot;7nSNuoRa8LfyLib7B4fFL&quot;,&quot;content&quot;:&quot;&quot;,&quot;height&quot;:60,&quot;inputKey&quot;:&quot;w89tbokTwKAbAXdaOeE1H\/select&quot;,&quot;label&quot;:&quot;The JSON corresponding to the selected node or edge from the previous graph&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;textViewer&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The block can be used also for displaying the Data Flow of the inseri blocks from a page or post. In this case one should use &#8220;inseri &#8211; data-flow&#8221; as the data source.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-cytoscape\" data-attributes=\"{&quot;blockId&quot;:&quot;CnsHQHQ34tmj9h7FYs14T&quot;,&quot;height&quot;:210,&quot;inputKey&quot;:&quot;__root\/data-flow&quot;,&quot;layout&quot;:&quot;dagre&quot;,&quot;layoutKey&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;DataFlow&quot;},&quot;styleKey&quot;:&quot;&quot;}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">For more details please see the corresponding <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/blocks\/cytoscape\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-export alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;vaxQQCzmrnvQCf4meQgfk&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;export&quot;},&quot;postId&quot;:1252}\">is loading &#8230;<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-share alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;KTETwIissQyi0jL3ZpuwV&quot;,&quot;copiedText&quot;:&quot;Copied&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;share&quot;},&quot;showIcon&quot;:true,&quot;text&quot;:&quot;Share&quot;}\">is loading &#8230;<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Cytoscape block allows the visualisation of graphs. It relies on the Cytoscape.js and it is used internally by inseri to enable the Data Flow charts. As input we specify the nodes and the edges in a JSON format: Next we use the JSON as input to visualise the graph: By selecting an edge or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[36,40,50,52,53],"class_list":["post-1252","post","type-post","status-publish","format-standard","hentry","category-inseri-core-block","tag-cytoscape","tag-export","tag-share","tag-text-editor","tag-text-viewer"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/1252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/comments?post=1252"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/1252\/revisions"}],"predecessor-version":[{"id":2124,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/1252\/revisions\/2124"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=1252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=1252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=1252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}