{"id":13747916,"url":"https://github.com/iVis-at-Bilkent/syblars","last_synced_at":"2025-05-09T10:32:10.870Z","repository":{"id":71628295,"uuid":"363929712","full_name":"iVis-at-Bilkent/syblars","owner":"iVis-at-Bilkent","description":"SyBLaRS: Systems Biology Layout \u0026 Rendering Service","archived":false,"fork":false,"pushed_at":"2024-11-18T15:48:51.000Z","size":22437,"stargazers_count":12,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-11T20:43:59.863Z","etag":null,"topics":["bioinformatics","graph-algorithms","graph-drawing","graphviz","network-visualization","pathway-analysis","pathways","systems-biology"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iVis-at-Bilkent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-03T12:56:23.000Z","updated_at":"2024-11-18T15:49:01.000Z","dependencies_parsed_at":"2024-01-17T13:13:23.703Z","dependency_job_id":"8ed338fe-63c1-470f-9ad3-095f8a07379e","html_url":"https://github.com/iVis-at-Bilkent/syblars","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iVis-at-Bilkent%2Fsyblars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iVis-at-Bilkent%2Fsyblars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iVis-at-Bilkent%2Fsyblars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iVis-at-Bilkent%2Fsyblars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iVis-at-Bilkent","download_url":"https://codeload.github.com/iVis-at-Bilkent/syblars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253234178,"owners_count":21875561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bioinformatics","graph-algorithms","graph-drawing","graphviz","network-visualization","pathway-analysis","pathways","systems-biology"],"created_at":"2024-08-03T07:00:29.733Z","updated_at":"2025-05-09T10:32:10.343Z","avatar_url":"https://github.com/iVis-at-Bilkent.png","language":"JavaScript","funding_links":[],"categories":["Layout Algorithm"],"sub_categories":[],"readme":"# SyBLaRS\n\n**Sy**stems **B**iology **La**yout \u0026 **R**endering **S**ervice (SyBLaRS) is a web service to lay out graphs in SBGNML, SBML, GraphML and JSON formats and/or produce corresponding images (in JPG, PNG or SVG formats) of the layouts with an option to highlight results from various graph queries in the backend. \n\n![A screenshot from the sample deployment of SyBLaRS](img/syblars-ss.png)\n\nMain capabilities of SyBLaRS include:\n- creating an image of the provided map, which already has layout information, with an option to highlight a specific query result\n- laying out the provided map in specified layout style (among many available ones) and returning the map with layout information in JSON format, and\n- both laying out the provided map in specified layout style and creating an image of it again with an option to highlight a specific query result (and returning both the map with layout information and the image).\n\nBacked by these capabilities, SyBLaRS can be used:\n- to produce images from a dataset with large amount of graphs (e.g. BioModels) in an automated way (see [test](https://github.com/iVis-at-Bilkent/syblars/tree/test) branch)\n- as the layout service of a network visualization tool, and\n- to generate image of an SBGN/SBML model for a publication (e.g. journal/conference article).  \n\nSyBLaRS is distributed under the [MIT License](https://github.com/iVis-at-Bilkent/syblars/blob/main/LICENSE).\nHere is a sample server deployment along with a simple client-side demo:\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"http://syblars.cs.bilkent.edu.tr\"\u003e\u003cimg src=\"https://www.cs.bilkent.edu.tr/~ivis/images/demo1.png\" height=42px\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nPlease cite the following when you use this service:\n\nH. Balci, U. Dogrusoz, Y.Z. Ozgul and P. Atayev, \"[SyBLaRS: A web service for laying out, rendering and mining biological maps in SBGN, SBML and more](https://doi.org/10.1371/journal.pcbi.1010635)\", PLOS Computational Biology, 18(11), pp. 1-12, 2022.\n\n## Setup of a service\n\nIn order to deploy and run a local instance of the service, please follow the steps below:\n\n### Installation\n```\ngit clone https://github.com/iVis-at-Bilkent/syblars.git\ncd syblars\nnpm install   // this may take a while\n```\n\n### Starting server\nThe default port is 3000, you can change it by setting 'PORT' environment variable.\n```\nnpm run start\n```\n\n**Note #1:** We recommend the use of Node.js version 14.x and npm version 6.x. We used Node.js v14.18.0 and npm v6.14.8 during development.\n\n**Note #2:** This service uses [Puppeteer](https://pptr.dev) to generate the output. Please refer to the [Puppeteer documentation](https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#troubleshooting) to ensure that your machine is configured properly to run Chrome headlessly.\n\n### Docker\nAlternatively, you can use Dockerfile provided in the root directory. Please note that Dockerfile currently works in Linux and Windows environments and **does not** work in macOS because of Puppeteer related issues. To run the Dockerfile (below commands may require *sudo* in Linux environment):\n\nFirst, `cd` into the folder where Dockerfile is located.\n\nThen, build a Docker image with name *syblars* (this may take a while).\n```\ndocker build -t syblars .\n```\nLastly, run the image from port 3000. If you want to use another port, please change the first port number in below command.\n```\ndocker run -p 3000:3000 syblars\n```\n\n## Supported formats\nSyBLaRS supports the following input formats for graphs:\n[SBGNML](https://github.com/sbgn/sbgn/wiki/SBGN_ML),\n[SBML](http://sbml.org/),\n[GraphML](http://graphml.graphdrawing.org/), and\n[JSON](https://www.json.org/).\n\nThe notations used for these formats:\n\nSBGNML Stylesheet            |  SBML Stylesheet |  GraphML \u0026 JSON\n-------------------------|-------------------------|-------------------------\n\u003ca href=\"https://raw.githubusercontent.com/iVis-at-Bilkent/syblars/main/img/SBGNML_stylesheet.svg\" title=\"SBGNML stylesheet\"\u003e\u003cimg src=\"img/SBGNML_stylesheet.jpg\"\u003e\u003c/a\u003e  |  \u003ca href=\"https://raw.githubusercontent.com/iVis-at-Bilkent/syblars/main/img/SBML_stylesheet.svg\" title=\"SBML stylesheet\"\u003e\u003cimg src=\"img/SBML_stylesheet.jpg\"\u003e\u003c/a\u003e | \u003ca href=\"https://raw.githubusercontent.com/iVis-at-Bilkent/syblars/main/img/GraphML\u0026JSON_stylesheet.svg\" title=\"GraphML \u0026 JSON stylesheet\"\u003e\u003cimg src=\"img/GraphML\u0026JSON_stylesheet.jpg\"\u003e\u003c/a\u003e\n\n## Supported layouts\nThe supported graph layout algorithms are:\n[fCoSE](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose/tree/unstable),\n[CoLa](https://github.com/cytoscape/cytoscape.js-cola),\n[CiSE](https://github.com/iVis-at-Bilkent/cytoscape.js-cise/tree/develop),\n[Dagre](https://github.com/cytoscape/cytoscape.js-dagre),\n[Klay](https://github.com/cytoscape/cytoscape.js-klay),\n[Avsdf](https://github.com/iVis-at-Bilkent/cytoscape.js-avsdf)\nand are among Cytoscape.js layout extensions as listed [here](https://js.cytoscape.org/#layouts).\n\nEach layout style has a varying number of options for customization of the layout. The demo provided only exposes some of the popular options; please refer to the corresponding GitHub repository for an exhaustive list of such options. Among these options some that we think will be commonly used are listed below:\n- `padding`: Padding around the map drawing\n- `idealEdgeLength`: Ideal length of an edge (layout will try to get every edge this long within constraints)\n- `randomize`: Use random node positions at the beginning of layout (`false` means an incremental layout)\n- `packComponents`: Whether or not to pack disconnected components after separate layout\n- `tile`: Enable tiling of disconnected nodes together for a compact representation\n- `nodeDimensionsIncludeLabels`: Whether or not to include labels in node dimensions during layout\n\n## Supported graph queries\nThe supported graph queries are:\n- **Degree Centrality**: The normalized degree centrality of the nodes in the graph\n- **Closeness Centrality**: The normalized closeness centrality of the nodes in the graph\n- **Betweenness Centrality**: The normalized betweenness centrality of the nodes in the graph\n- **Page Rank**: The rank of the nodes in the graph\n- **Shortest Path**: The shortest path from a single source to a single target in the graph\n- **k-Neighborhood**: The neighbors of the specified source nodes within a certain distance *k*\n- **Common Stream**: The set of common nodes that are in the upstream/downstream/bothstream of *all* specified source nodes with a path length limit *k*\n- **Paths Between**: The subgraph that consists of the paths of length at most *k* between any two nodes of the specified source nodes\n- **Paths From To**: All shortest paths between specified source nodes and target nodes with a maximum length limit *k* and a further distance *d*\n\nFor more details about these queries, please refer to [centrality](https://js.cytoscape.org/#collection/centrality) section of Cytoscape.js and [cytoscape.js-graph-algos](https://github.com/iVis-at-Bilkent/cytoscape.js-graph-algos) GitHub repository.\n\n## Usage\n\nSending request to the local deployment via curl:\n```\ncurl -X POST -H \"Content-Type: text/plain\" --data \"request_body\" http://localhost:3000/file_format\n```\nand via Fetch API \n\n```\nlet settings = {\n  method: 'POST',\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'text/plain'\n  },\n  body: request_body\n};\n\nlet result = await fetch(\"http://localhost:3000/file_format\", settings)\n  .then(response =\u003e response.json())\n  .then(res =\u003e {\n    return res;\n  })\n  .catch(e =\u003e {\n    return e;\n  });\n```\n\nwhere `file_format` is one of the `sbgnml`, `sbml`, `graphml` and `json`.\n\n`request_body`  needs to be formed in the following way:\n\nIf the file content is in JSON format:\n```\nJSON.stringfy([JSON.parse(file_content), options])\n```\nIf the file content is in other formats:\n```\nfile_content + JSON.stringfy(options)\n```\nwhere `options` is an object consisting of `layoutOptions`, `imageOptions` and `queryOptions`. Example:\n```\noptions = {\n  layoutOptions: {\n    name: 'fcose',\n    nodeDimensionsIncludeLabels: true,\n    ...\n  },\n  imageOptions: {\n    format: 'png',              // output format\n    background: 'transparent',  // background color\n    width: 1280,                // desired width\n    height: 720,                // desired height\n    color: '#9ecae1'            // node color\n  },\n  queryOptions: {\n    query: 'kNeighborhood',           // query type\n    sourceNodes: [nodeID1, nodeID2],  // source nodes\n    limit: 2,                         // path length limit\n    direction: 'BOTHSTREAM',          // direction of the search\n    sourceColor: '#00ff00',           // highlight color for source nodes\n    pathColor: '#ffff00',             // highlight color for result elements\n    highlightWidth: 10,               // underlay padding used to highlight elements\n    cropToResult: false,              // whether to crop the image to the query result\n  }  \n}\n```\n**Note:** While sending the requests via curl, any `\"` in the `request_body` should be replaced with `\\\"` and all newline characters should be removed.\n\nFor supported layout options, please check the documentation of the associated layout algorithm. Image options support three output formats: `png`, `jpg` and `svg`. `background` attribute should be a hex color code or `transparent`. `color` attribute should be a hex color code for SBML, GraphML and JSON formats, and one of the following predefined color schemes for the SBGNML format: `bluescale`, `greyscale`, `red_blue`, `green_brown`, `purple_brown`, `purple_green`, `grey_red`, and `black_white`.\n\nThe query options change depending on the query type:\n\nDegree Centrality: \n```\n  queryOptions: {\n    query: 'degreeCentrality',  // query type\n    direction: 'DIRECTED',      // direction of the search\n    highlight: true,            // whether to highlight nodes based on the resulting values\n    highlightColor: '#00ff00'   // highlight color (valid only if highlight option is true)\n  } \n```\nCloseness Centrality: \n```\n  queryOptions: {\n    query: 'closenessCentrality',  // query type\n    direction: 'DIRECTED',         // direction of the search\n    highlight: true,               // whether to highlight nodes based on the resulting values\n    highlightColor: '#00ff00'      // highlight color (valid only if highlight option is true)\n  } \n```\nBetweenness Centrality: \n```\n  queryOptions: {\n    query: 'betweennessCentrality',  // query type\n    direction: 'DIRECTED',           // direction of the search\n    highlight: true,                 // whether to highlight nodes based on the resulting values\n    highlightColor: '#00ff00'        // highlight color (valid only if highlight option is true)\n  } \n```\nPage Rank: \n```\n  queryOptions: {\n    query: 'pageRank',          // query type\n    highlight: true,            // whether to highlight nodes based on the resulting values\n    highlightColor: '#00ff00'   // highlight color (valid only if highlight option is true)\n  } \n```\nShortest Path: \n```\n  queryOptions: {\n    query: 'shortestPath',   // query type\n    sourceNodes: [nodeID1],  // source node - only one node id\n    targetNodes: [nodeID2],  // target node - only one node id\n    direction: 'DIRECTED',   // direction of the search\n    sourceColor: '#00ff00',  // highlight color for source node\n    targetColor: '#ff0000',  // highlight color for target node\n    pathColor: '#ffff00',    // highlight color for resulting elements\n    highlightWidth: 10,      // underlay padding used to highlight elements\n    cropToResult: false      // whether to crop the image to the query result\n  } \n```\nk-Neighborhood: \n```\n  queryOptions: {\n    query: 'kNeighborhood',                // query type\n    sourceNodes: [nodeID1, nodeID2, ...],  // source nodes\n    limit: 1,                              // path length limit\n    direction: 'BOTHSTREAM',               // direction of the search\n    sourceColor: '#00ff00',                // highlight color for source nodes\n    pathColor: '#ffff00',                  // highlight color for resulting elements\n    highlightWidth: 10,                    // underlay padding used to highlight elements\n    cropToResult: false                    // whether to crop the image to the query result\n  } \n```\nCommon Stream: \n```\n  queryOptions: {\n    query: 'commonStream',                 // query type\n    sourceNodes: [nodeID1, nodeID2, ...],  // source nodes\n    limit: 1,                              // path length limit\n    direction: 'BOTHSTREAM',               // direction of the search\n    sourceColor: '#00ff00',                // highlight color for source nodes\n    targetColor: '#ff0000',                // highlight color for common nodes in stream    \n    pathColor: '#ffff00',                  // highlight color for resulting elements\n    highlightWidth: 10,                    // underlay padding used to highlight elements\n    cropToResult: false                    // whether to crop the image to the query result\n  } \n```\nPaths Between: \n```\n  queryOptions: {\n    query: 'pathsBetween',                 // query type\n    sourceNodes: [nodeID1, nodeID2, ...],  // source nodes\n    limit: 1,                              // path length limit\n    direction: 'DIRECTED',                 // direction of the search\n    sourceColor: '#00ff00',                // highlight color for source nodes  \n    pathColor: '#ffff00',                  // highlight color for resulting elements\n    highlightWidth: 10,                    // underlay padding used to highlight elements\n    cropToResult: false                    // whether to crop the image to the query result\n  } \n```\nPaths From To: \n```\n  queryOptions: {\n    query: 'pathsFromTo',                  // query type\n    sourceNodes: [nodeID1, nodeID2, ...],  // source nodes\n    targetNodes: [nodeID1, nodeID2, ...],  // target nodes    \n    limit: 1,                              // path length limit\n    furtherDistance: 1,                    // parameter for \"relaxing\" the path length limit\n    direction: 'DIRECTED',                 // direction of the search\n    sourceColor: '#00ff00',                // highlight color for source nodes\n    targetColor: '#ff0000',                // highlight color for target nodes    \n    pathColor: '#ffff00',                  // highlight color for resulting elements\n    highlightWidth: 10,                    // underlay padding used to highlight elements\n    cropToResult: false                    // whether to crop the image to the query result\n  } \n```\nwhere `direction` is one of `UPSTREAM`, `DOWNSTREAM` or `BOTHSTREAM` for `kNeighborhood` and `commonStream` queries and one of `DIRECTED` or `UNDIRECTED` for `degreeCentrality`, `closenessCentrality`, `betweennessCentrality`, `shortestPath`, `pathsBetween` and `pathsFromTo` queries. \n\nIn case you do not need layout applied, you should either not provide `layoutOptions` or provide `preset` the layout style. If you do not provide `imageOptions`, default ones will be used. To disable image output (in case you only need the output JSON file back with layout information), you should set `image` option to `false` in your request URL, which is `true` by default:\n```\nhttp://localhost:3000/file_format?image=false\n```\n\nAfter the request is sent, the server will lay out the given graph and return the layout information in JSON format that will contain node IDs along with their corresponding positions *(x, y)* and dimensions *(width, height)*, and image information (in `base64uri` encoding for `png` and `jpg` formats and in `xml` for the `svg` format). If you want the edges to be returned as well in layout information, you should set edges option to the request URL, which is false by default:\n```\nhttp://localhost:3000/file_format?edges=true\n```\n\nIf an error occurs, the response of the server will consist of an error message.\n\nFor instance, a sample SBGNML file can be laid out with fCoSE layout and a corresponding PNG image can be generated by making a query to the sample deployment of SyBLaRS web service via curl in the following way:\n```\ncurl -X POST -H \"Content-Type: text/plain\" --data \"\u003c?xml version='1.0' encoding='UTF-8'?\u003e\u003csbgn xmlns='http://sbgn.org/libsbgn/0.3'\u003e  \u003cmap version='http://identifiers.org/combine.specifications/sbgn.pd.level-1.version-1.3' id='map1'\u003e \u003cglyph class='simple chemical' id='glyph1'\u003e\t\u003clabel text='DHA-P'/\u003e \u003cbbox x='30' y='20' w='60' h='60'/\u003e \u003c/glyph\u003e \u003cglyph class='simple chemical' id='glyph2'\u003e \u003clabel text='GA-3P' /\u003e \u003cbbox x='30' y='220' w='60' h='60'/\u003e \u003c/glyph\u003e \u003cglyph class='macromolecule' id='glyph3'\u003e \u003clabel text='Triose-P\u0026#xA;Isomerase' /\u003e \u003cbbox x='150' y='120' w='120' h='60'/\u003e\t\u003c/glyph\u003e \u003cglyph class='process' orientation='vertical' id='pn1'\u003e \u003cbbox x='50' y='140' w='20' h='20'/\u003e \u003cport x='60' y='130' id='pn1.1'/\u003e \u003cport x='60' y='170' id='pn1.2'/\u003e \u003c/glyph\u003e \u003carc class='production' source='pn1.1' target='glyph1' id='a1'\u003e \u003cstart x='60' y='130' /\u003e \u003cend x='60' y='80' /\u003e \u003c/arc\u003e \u003carc class='production' source='pn1.2' target='glyph2' id='a2'\u003e \u003cstart x='60' y='170' /\u003e \u003cend x='60' y='220' /\u003e\t\u003c/arc\u003e \u003carc class='catalysis' source='glyph3' target='pn1' id='a3'\u003e \u003cstart x='150' y='150' /\u003e \u003cend x='70' y='150' /\u003e \u003c/arc\u003e  \u003c/map\u003e\u003c/sbgn\u003e{\\\"layoutOptions\\\":{\\\"name\\\":\\\"fcose\\\",\\\"randomize\\\":true,\\\"padding\\\":30},\\\"imageOptions\\\":{\\\"format\\\":\\\"png\\\",\\\"background\\\":\\\"transparent\\\", \\\"width\\\": 1280, \\\"height\\\": 1280, \\\"color\\\":\\\"bluescale\\\"}}\" http://syblars.cs.bilkent.edu.tr/sbgnml?edges=true\n```\nand the corresponding response with image and layout information will be as follows:\n```\n{\"image\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhE...\"\"layout\":{\"pn1\":{\"position\":{\"x\":167.44176266064383,\"y\":152.28835944241527},\"data\":{\"width\":25,\"height\":25}},...}}}}\n```\nThe same query can be done via Fetch API in the following way:\n```\nlet settings = {\n  method: 'POST',\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'text/plain'\n  },\n  body: \u003c?xml version='1.0' encoding='UTF-8'?\u003e\n        \u003csbgn xmlns='http://sbgn.org/libsbgn/0.3'\u003e\n          \u003cmap version='http://identifiers.org/combine.specifications/sbgn.pd.level-1.version-1.3' id='map1'\u003e\n          \u003cglyph class='simple chemical' id='glyph1'\u003e\n            \u003clabel text='DHA-P'/\u003e\n            \u003cbbox x='30' y='20' w='60' h='60'/\u003e\n          \u003c/glyph\u003e\n          \u003cglyph class='simple chemical' id='glyph2'\u003e\n            \u003clabel text='GA-3P' /\u003e\n            \u003cbbox x='30' y='220' w='60' h='60'/\u003e\n          \u003c/glyph\u003e\n          \u003cglyph class='macromolecule' id='glyph3'\u003e\n            \u003clabel text='Triose-P\u0026#xA;Isomerase' /\u003e \u003c!-- contains line break --\u003e\n            \u003cbbox x='150' y='120' w='120' h='60'/\u003e\n          \u003c/glyph\u003e\n          \u003cglyph class='process' orientation='vertical' id='pn1'\u003e\n            \u003cbbox x='50' y='140' w='20' h='20'/\u003e\n            \u003cport x='60' y='130' id='pn1.1'/\u003e\n            \u003cport x='60' y='170' id='pn1.2'/\u003e\n          \u003c/glyph\u003e\n          \u003carc class='production' source='pn1.1' target='glyph1' id='a1'\u003e\n            \u003cstart x='60' y='130' /\u003e\n            \u003cend x='60' y='80' /\u003e\n          \u003c/arc\u003e\n          \u003carc class='production' source='pn1.2' target='glyph2' id='a2'\u003e\n            \u003cstart x='60' y='170' /\u003e\t\t\t\n            \u003cend x='60' y='220' /\u003e\n          \u003c/arc\u003e\n          \u003carc class='catalysis' source='glyph3' target='pn1' id='a3'\u003e\n            \u003cstart x='150' y='150' /\u003e\n            \u003cend x='70' y='150' /\u003e\t\t\t\n          \u003c/arc\u003e\n          \u003c/map\u003e\n        \u003c/sbgn\u003e{\"layoutOptions\":{\"name\":\"fcose\",\"randomize\":true,\"padding\":30,\"nodeDimensionsIncludeLabels\":true,\"uniformNodeDimensions\":false,\"packComponents\":true,\"nodeRepulsion\":4500,\"idealEdgeLength\":50,\"edgeElasticity\":0.45,\"nestingFactor\":0.1,\"numIter\":2500,\"tile\":true,\"tilingPaddingVertical\":10,\"tilingPaddingHorizontal\":10,\"gravity\":0.25,\"gravityRange\":3.8,\"gravityCompound\":1,\"gravityRangeCompound\":1.5,\"initialEnergyOnIncremental\":0.3},\"imageOptions\":{\"format\":\"png\",\"background\":\"transparent\",\"width\":1280,\"height\":720,\"color\":\"bluescale\"}} // file_content + JSON.stringfy(options)\n};\n\nlet result = await fetch(\"http://syblars.cs.bilkent.edu.tr/sbgnml?edges=true\", settings)\n  .then(response =\u003e response.json())\n  .then(res =\u003e {\n    return res;\n  })\n  .catch(e =\u003e {\n    return e;\n  });\n  \nlet imageInfo = result[\"image\"];     // data:image/png;base64,iVBORw0KGgoAAAANSUhE... (in `base64uri` for `png` and `jpg` and in `xml` for `svg`)\nlet layoutInfo = result[\"layout\"];   // {\"_00ac7e0a-288f-42e0-b252-9bcb59027572\":{\"position\":{\"x\":97.42656942899578,\"y\":-128.0473968715957},\"data\":{\"width\":25,\"height\":25,\"parent\":\"_23d436e2-6633-42f2-98d0-00dbb962ac3d\"}},...}}}}  (in JSON format)\n```\n\nSee also [here](https://gist.github.com/cannin/7e35f3fae274370bd0a70c7b1840c743) for sample Python codes that call SyBLaRS to lay out and render SBGNML files by [Augustin Luna](https://gist.github.com/cannin).\n\n### Remarks\n\n- SyBLaRS regards any node position information. This is especially useful if you want to create an image of the map, which is already laid out. This is also useful in cases where you do have a partially decent layout but you would like to apply an incremental layout respecting the current positions in your map. This information should be provided via `bbox` of each glyph in SBGNML files, via the layout extension in SBML files, via `x` and `y` data attributes and `position` attribute of each node in GraphML and JSON files, respectively (see the [sample files](https://github.com/iVis-at-Bilkent/syblars/tree/main/public/samples)).\n\n- SyBLaRS also takes any node dimensions into account for layout in SBML, GraphML and JSON file formats. This information should be provided via the layout extension in SBML files, and via `width` and `height` data attributes of each node in GraphML and JSON files (see the [sample files](https://github.com/iVis-at-Bilkent/syblars/tree/main/public/samples)). Any dimension data is ignored for the SBGNML file format, however, as the third-party [stylesheet](https://github.com/iVis-at-Bilkent/cytoscape-sbgn-stylesheet) used for rendering SBGNML maps has fixed/pre-defined dimensions for each node type.\n\n- Compound/nested graph structures are supported in all file formats. We recommend that you use the [fCoSE](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose) layout style for best results on graphs with compound structures.\n\n- Performing a layout emphasizing the clustering/grouping of nodes is supported only with GraphML and JSON formats. The cluster each node belongs to should be defined via the `clusterID` data attribute of each node (see the corresponding [sample files](https://github.com/iVis-at-Bilkent/syblars/tree/main/public/samples)). [CiSE](https://github.com/iVis-at-Bilkent/cytoscape.js-cise) layout style should be used for layout to explicitly show the clustering available in the graph.\n\n- The `x` and `y` coordinates of a node in the resulting layout information indicate the '*center*' coordinates of the node.\n\n- `jpg` output format does not support transparent background; thus, we return a white background when `transparent` option is chosen.\n\n- The layout options presented in the client demo are not exhaustive and may not include all options of the corresponding layout style. Please refer to the webpage of each layout extension for the detailed list of available options.\n\n## Credits\n\nSyBLaRS uses [the Express framework](https://expressjs.com/) for handling HTTP requests. Actual operations are performed using [Cytoscape.js](https://js.cytoscape.org) and its extensions (see the `package.json` file for a complete listing). Among these extensions, [Cytosnap](https://github.com/cytoscape/cytosnap) is particularly needed for creating a headless Chrome instance, on which graph creation, rendering, layout and image creation of the input graphs are performed.\n\nIcons in the client demo are made by [Freepik](http://www.freepik.com) and [Flaticon](https://www.flaticon.com) licensed with \n[Creative Commons BY 3.0](http://creativecommons.org/licenses/by/3.0/).\n\nThird-party libraries used in web service:\n[sbgnml-to-cytoscape](https://www.npmjs.com/package/sbgnml-to-cytoscape),\n[cytoscape-sbgn-stylesheet](https://github.com/iVis-at-Bilkent/cytoscape-sbgn-stylesheet),\n[cytosnap](https://github.com/iVis-at-Bilkent/cytosnap),\n[libsbmljs](https://libsbmljs.github.io),\n[express](https://www.npmjs.com/package/express),\n[cors](https://www.npmjs.com/package/cors),\n[jQuery](https://www.npmjs.com/package/jquery),\n[jsdom](https://www.npmjs.com/package/jsdom),\n[nodemon](https://www.npmjs.com/package/nodemon),\n[jest](https://www.npmjs.com/package/jest),\n[super-test](https://www.npmjs.com/package/supertest)\n\nThird-party libraries used in demo client:\n[Semantic UI](https://semantic-ui.com),\n[underscore.js](https://underscorejs.org),\n[backbone.js](https://backbonejs.org),\n[FileSaver.js](https://github.com/eligrey/FileSaver.js/)\n\n## Team\n\n[Hasan Balci](https://github.com/hasanbalci), [Ugur Dogrusoz](https://github.com/ugurdogrusoz), [Yusuf Ziya Özgül](https://github.com/YusufZiyaOzgul) and [Perman Atayev](https://github.com/PermanAtayev) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiVis-at-Bilkent%2Fsyblars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FiVis-at-Bilkent%2Fsyblars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiVis-at-Bilkent%2Fsyblars/lists"}