{"_id":"@appland/diagrams-old","_rev":"1-cbc1add29c038103c9aaefbb7276981f","name":"@appland/diagrams-old","dist-tags":{"latest":"0.6.0"},"versions":{"0.6.0":{"name":"@appland/diagrams-old","version":"0.6.0","description":"Diagrams for visualizations of appland.org data","main":"dist/@appland/diagrams-old.js","module":"src/index.js","scripts":{"start":"npm run serve","build":"rollup -c rollup.config.js","serve":"rollup -c rollup.config.js --watch","lint":"eslint src","prepublish":"npm run build","test":"npm run test:unit && server-test start :10001 'npm run test:e2e -- --headless'","test:e2e":"cypress run","test:unit":"jest test/unit"},"repository":{"type":"git","url":"git+https://github.com/applandinc/diagrams-js.git"},"directories":{"example":"examples"},"keywords":["d3","diagram","appmap","uml"],"license":"MIT","bugs":{"url":"https://github.com/applandinc/diagrams-js/issues"},"homepage":"https://github.com/applandinc/diagrams-js","dependencies":{"@appland/models":"^0.6.0","d3":"^5.16.0","d3-flame-graph":"^3.1.1","dagre":"^0.8.5","dagre-d3":"^0.6.4","deepmerge":"^4.2.2","sql-formatter":"^2.3.3"},"devDependencies":{"@babel/core":"^7.12.10","@babel/preset-env":"^7.12.11","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-node-resolve":"^9.0.0","babel-jest":"^26.6.3","cypress":"^6.2.1","eslint":"^7.11.0","eslint-config-airbnb-base":"^14.2.0","eslint-plugin-cypress":"^2.11.2","eslint-plugin-import":"^2.22.1","geometry-interfaces":"^1.1.4","jest":"^26.6.3","jsdom":"^16.4.0","mathjs":"^8.0.1","rollup":"^2.31.0","rollup-plugin-scss":"^2.6.1","rollup-plugin-serve":"^1.0.4","rollup-plugin-terser":"^7.0.2","start-server-and-test":"^1.11.7","tap":"^14.11.0","tape":"^5.0.1"},"gitHead":"4f0d047842c47da6a79b42390afdce665248af9b","_id":"@appland/diagrams-old@0.6.0","_nodeVersion":"14.16.0","_npmVersion":"7.11.2","dist":{"integrity":"sha512-JlxO4k+IWn6aCfDCUAzuAsgO018Bav/sddgAHX+dI/UVOJZ5tO3TPSmmIY4pw3MONQhrfA7+W0IHKf+XE7afQg==","shasum":"b3ba704082ca9d4c7bc3249740763075e84e6e2c","tarball":"https://registry.npmjs.org/@appland/diagrams-old/-/diagrams-old-0.6.0.tgz","fileCount":56,"unpackedSize":1630285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg050BCRA9TVsSAnZWagAAUBYP/2wtfvTvVyJQ/ZJQfjCo\nayy1SlqR3OjR7GK0Aw3qYB3W77sgAoz+csfSy03+LWAJzgoFMITl7uJSQozM\nwAKAYOUIef4rySrP8q0t327XWRXwPsWErTri7QDSqYDu0tBUWkwCsKlukBQZ\npADOMIM7Jr6uHS+gJsJxVwKTQ20CsMGR2UlIx8QgOQeOV3gqbB6oMdxm6Qv+\nbonFh9Lzlz98vHRbwzKkZdpQLqCuheNK3WVOtZre1NUo2MSs8A7STxaXYLLu\nDoJBuv2SPjt64EBxHgjRJ723ryWuHwjtIU678J+tZYj0QybKKcw22L/1iaip\nKk2GQBitxk2pAitTg8a65p9RiFydj1JWaCCZEisl06daX3X6/EMbM21vZhB2\ncfsCIVfnzwueBGL4XeAjYCasHWuQIDGye6mBb6Z6ac5PGsXE6/N2HbIPh4Ok\nv34ApS9T/xx98tlgEARH7jlrXOkPvRehNQfdWw5Eh2SIxutdZyE5DXctOb51\nrm3FvB+4XYX8PQ/2abLvoEu1rPQ4gQzy39SNW73YME3/PKbSxiWGPT6Tu8QD\nXGuVRNawu3jrV1IYTu8jv1j/4gocT+Ykg6kRhNQ1wQnuLt0uOtcKSqqVxuGN\nrbvrjOxOOdV8jYnHeVzyiU8pfh+68aR2xTIO7IIo3yFsTWWviKvHrW1Lmt3h\nIcgY\r\n=vGHP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM7OQnoekQcNvz6ZSMKkRA88BqZlZPdnZ0uy976V6DqQIhAPJl8nw6PMv/ZE15H/Sv1PMXS95c5anid+U4AV1vklTz"}]},"_npmUser":{"name":"appland-release","email":"release@app.land"},"maintainers":[{"name":"lachrist","email":"lachrist@vub.ac.be"},{"name":"appland-release","email":"release@app.land"},{"name":"dustinbyrne","email":"dustinsbyrne@gmail.com"},{"name":"kgilpin","email":"kevin.gilpin@alum.mit.edu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/diagrams-old_0.6.0_1624481025213_0.38559967569271314"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-23T20:43:44.878Z","0.6.0":"2021-06-23T20:43:45.398Z","modified":"2022-04-04T14:50:32.960Z"},"maintainers":[{"name":"lachrist","email":"lachrist@vub.ac.be"},{"name":"appland-release","email":"release@app.land"},{"name":"dustinbyrne","email":"dustinsbyrne@gmail.com"},{"name":"kgilpin","email":"kevin.gilpin@alum.mit.edu"}],"description":"Diagrams for visualizations of appland.org data","homepage":"https://github.com/applandinc/diagrams-js","keywords":["d3","diagram","appmap","uml"],"repository":{"type":"git","url":"git+https://github.com/applandinc/diagrams-js.git"},"bugs":{"url":"https://github.com/applandinc/diagrams-js/issues"},"license":"MIT","readme":"# Installation\n\nInstall package `@appland/diagrams` from NPM registry.\n\n```\nnpm install @appland/diagrams\n```\n\n# Usage\n\nTable of contents:\n- [Component diagram](#component-diagram)\n- [Flow view](#flow-view)\n- [Timeline](#timeline)\n\n## Component diagram\n\nPass a CSS selector or HTMLElement object as first parameter and options as second parameter to `Appmap.ComponentDiagram`:\n\n```\nconst componentDiagramModel = { ... };\n\nconst diagram = new Appmap.ComponentDiagram('#component-diagram', {\n  theme: 'light',\n  zoom: {\n    controls: true\n  }\n});\n\ndiagram.render(componentDiagramModel);\n```\n\nIf you want to create your custom context menu for diagram nodes, pass `contextMenu` option with builder function:\n\n<pre>\nconst diagram = new Appmap.ComponentDiagram('#component-diagram', {\n  <b>contextMenu: function(componentDiagram){\n    return [\n      (item) => item\n        .text('Set as root')\n        .selector('.nodes .node')\n        .transform((e) => e.getAttribute('id'))\n        .on('execute', (id) => componentDiagram.makeRoot(id)),\n      (item) => item\n        .text('Expand')\n        .selector('g.node')\n        .transform((e) => e.getAttribute('id'))\n        .condition((id) => componentDiagram.hasPackage(id))\n        .on('execute', (id) => componentDiagram.expand(id)),\n      (item) => item\n        .text('Collapse')\n        .selector('g.node')\n        .transform((e) => e.getAttribute('id'))\n        .condition((id) => !componentDiagram.hasPackage(id))\n        .on('execute', (id) => componentDiagram.collapse(id)),\n      (item) => item\n        .text('Reset view')\n        .on('execute', () => {\n          componentDiagram.render(componentDiagram.initialModel);\n        }),\n    ];\n  },</b>\n  theme: 'light',\n  zoom: {\n    controls: true\n  }\n});\n</pre>\n\nBuilder function must accepts one argument with `ComponentDiagram` instance and must return an array of menu item's builder functions.\n\n### Available methods\n- `.render(model)` - renders diagram model\n- `.highlight(nodeId | [node1, node2, ...])` - highlights node(s) with provided `nodeId` and inbound/outbound arrows\n- `.clearHighlights()` - clears node highlightning\n- `.focus(nodeId)` - shows arrows relative to node with `nodeId` and hides others\n- `.clearFocus()` - shows all graph arrows, disables node focusing\n- `.scrollTo(nodeId | [node1, node2, ...])` - scroll the graph to node or set of nodes\n- `.expand(nodeId)` - expands node with `nodeId` and shows it's children with relations\n- `.collapse(nodeId)` - collapses node with `nodeId` into package\n- `.makeRoot(nodeId)` - sets node with `nodeId` as diagram root\n- `.sourceLocation(nodeId)` - returns URL to file in repository which contains node with `nodeId`\n- `.hasPackage(packageId)` - checks package isset in the diagram model\n\n### Available events\n- `postrender` - this event is fired when diagram has been rendered on the page\n```\ndiagram.on('postrender', (nodeId) => {\n  console.log(`diagram has been rendered`);\n});\n```\n- `highlight` - returns array with highlighted nodes IDs, when no one node is highlighted - returns `null`\n> **Note:** If only one node was highlighted - you'll get an array with only one element\n```\ndiagram.on('highlight', (nodeIds) => {\n  if (nodeIds) {\n    console.log(`nodes ${nodeIds.join(',')} were highlighted`);\n  } else {\n    console.log(`nothing is highlighted`);\n  }\n});\n```\n- `focus` - returns focused node ID, when focus was cleared - returns `null`\n```\ndiagram.on('focus', (nodeId) => {\n  if (nodeId) {\n    console.log(`node ${nodeId} was focused`);\n  } else {\n    console.log(`focus was cleared`);\n  }\n});\n```\n- `scrollTo` - returns array with nodes IDs whose were centered by `.scrollTo` method\n> **Note:** If graph was scrolled to only one node - you'll get an array with only one element\n```\ndiagram.on('scrollTo', (nodeIds) => {\n  console.log(`graph was scrolled to nodes ${nodeIds.join(',')}`);\n});\n```\n- `expand` - returns expanded node ID\n```\ndiagram.on('expand', (nodeId) => {\n  console.log(`node ${nodeId} was expanded`);\n});\n```\n- `collapse` - returns collapsed node ID\n```\ndiagram.on('collapse', (nodeId) => {\n  console.log(`node ${nodeId} was collapsed`);\n});\n```\n- `edge` - returns node IDs when edge between those nodes was clicked\n```\ndiagram.on('edge', (nodes) => {\n  console.log(`edge between ${nodes[0]} and ${nodes[1]} was clicked`);\n});\n```\n\n## Flow view\n\nUse this function to aggregate events from `scenarioData` object to `callTree` variable:\n```\nconst scenarioData = { ... };\n\nfunction aggregateEvents(events, classMap) {\n  const eventInfo = new Appmap.Models.EventInfo(classMap);\n  const callTree = new Appmap.Models.CallTree(events);\n\n  callTree.rootNode.forEach((e) => {\n    e.displayName = eventInfo.getName(e.input);\n    e.labels = eventInfo.getLabels(e.input);\n  });\n\n  return callTree;\n}\n\nconst callTree = aggregateEvents(scenarioData.data.events, scenarioData.data.classMap);\n```\n\nInitialize `FlowView` component and set the call tree:\n```\nconst flowView = new Appmap.FlowView('#flow-view', {\n  theme: 'light',\n  zoom: {\n    controls: true\n  }\n});\n\nflowView.setCallTree(callTree);\nflowView.render();\n```\n\n## Timeline\n\n> **Hint:** Use the same `callTree` variable from [Flow view docs](#flow-view) to create a connection between Flow view and Timeline diagrams.\n```\nconst timeline = new Appmap.Timeline('#timeline', {\n  theme: 'light',\n});\n\ntimeline.setCallTree(callTree);\ntimeline.render();\n```\n\n# Options\n\nYou can customize your diagram by passing options object as second parameter to any diagram constructor.\n\nAvailable options are:\n\n- `pan` (object): settings for panning\n  - `momentum` (bool): enables momentum on panning. Default is `true`.\n  - `boundary` (object): boundary settings\n    - `contain` (string | null): selector for contained element. Default is `null`.\n    - `overlap` (int): overlap size. Default is `300`.\n  - `tweenTime` (int): tween animation time. Default is `250`.\n- `theme` (\"light\" | \"dark\"): diagram color scheme. Default is `\"light\"`.\n- `zoom` (object | false): zoom settings, if `false` - zoom is completely disabled. Default is `object`.\n  - `controls` (bool): display zoom controls (+ / - buttons). Default is `false`.\n  - `step` (float): zoom step when clicking a button in the interface. Default is `0.1`.\n  - `minRatio` (float): minimum zoom scale. Default is `0.1`.\n  - `maxRatio` (float): maximum zoom scale. Default is `1.0`.\n  - `requireActive` (bool): whether or not the user must interact with the element before zooming. Default is `false`.\n\n# Examples\n\nClone this repo, install dependencies and serve the code:\n\n```\n$  git clone https://github.com/applandinc/diagrams-js.git && cd diagrams-js\n$  npm install\n$  npm run serve\n...\n\nhttp://localhost:10001 -> $HOME/diagrams-js/dist\nhttp://localhost:10001 -> $HOME/diagrams-js/examples\n```\n\nOpen the examples page:\n\n```\n$ open http://localhost:10001/\n```\n","readmeFilename":"README.md"}