2b:null 2c:["$","title",null,{"children":"Local process analysis using PM4PY and G6 | Selene Blok | Observable"}] 31:T615,G6.registerNode( 'rounded_rect', { drawShape(cfg, group) { const rectWidth = 150; const rectHeight = 50; const rect = group.addShape('rect', { attrs: { x: -(rectWidth / 2), y: -(rectHeight / 2), width: rectWidth, height: rectHeight, radius: 10, stroke: pallete.boxStroke, fill: pallete.boxFill, lineWidth: 1 }, name: 'rect-shape' }); const performanceData = cfg.data.performance; if (performanceData) { const circleDiameter = 8; group.addShape('rect', { attrs: { x: rectWidth / 2 - circleDiameter - 4, y: -(rectHeight / 2) + 4, width: circleDiameter, height: circleDiameter, radius: circleDiameter / 2, lineWidth: 1, stroke: pallete.boxStroke, fill: pallete.colorMap(performanceData.norm_mean || 0) }, name: 'performance-circle' }); const duration = moment .duration({ seconds: performanceData.mean }) .humanize(); group.addShape('text', { attrs: { text: `Performance (mean): ${duration}`, x: 0, y: 12, fill: pallete.textFill, fontSize: 9, textAlign: 'center', textBaseline: 'middle', fontWeight: 'normal' }, name: 'text-shape' }); } return rect; } }, 'single-node' )32:T79f,G6.registerEdge('multipleLabelsEdge', { draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; const middlePoint = startPoint.y + Math.abs(startPoint.y - endPoint.y) / 2; const lineWidth = cfg.lineWidth || 2; /* * ControlPoints creation */ let controlPoints = []; let middleControlPoint = null; if (cfg.controlPoints) { controlPoints = cfg.controlPoints.map(point => ['L', point.x, point.y]); const middleElement = controlPoints[Math.round((controlPoints.length - 1) / 2)]; middleControlPoint = { x: middleElement[1], y: middleElement[2] }; } /* * Line creation */ const shape = group.addShape('path', { attrs: { path: [ ['M', startPoint.x, startPoint.y], ...controlPoints, ['L', endPoint.x, endPoint.y] ], stroke: defaultEdgeOptions.stroke, endArrow: defaultEdgeOptions.endArrow, lineWidth }, name: 'path-shape' }); /* * Label creation */ // Top label if (cfg.primaryLabel) { group.addShape('text', { attrs: { text: cfg.primaryLabel, fill: '#595959', textAlign: 'center', fontSize: 10, x: middleControlPoint ? middleControlPoint.x : endPoint.x, y: (middleControlPoint ? middleControlPoint.y : middlePoint) + 2 }, name: 'top-text-shape' }); } // Top label if (cfg.secondaryLabel) { group.addShape('text', { attrs: { text: cfg.secondaryLabel, fill: '#595959', fontSize: 8, textAlign: 'center', x: middleControlPoint ? middleControlPoint.x : endPoint.x, y: (middleControlPoint ? middleControlPoint.y : middlePoint) + 10 }, name: 'bottom-text-shape' }); } return shape; } })33:T5c2,G6.registerEdge('multipleLabelsEdgeLoop', { draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; const middlePoint = startPoint.y + Math.abs(startPoint.y - endPoint.y) / 2; const lineWidth = cfg.lineWidth || 2; /* * Line creation */ const labelOffSetX = 100; const labelOffSetY = 28; const shape = group.addShape('path', { attrs: { path: [ ['M', startPoint.x + labelOffSetX / 2, startPoint.y + 10], ['a', 25, 25, 0, 1, 1, 0, 35] ], stroke: defaultEdgeOptions.stroke, endArrow: defaultEdgeOptions.endArrow, lineWidth }, name: 'path-shape' }); /* * Label creation */ // Top label if (cfg.primaryLabel) { group.addShape('text', { attrs: { text: cfg.primaryLabel, fill: '#595959', textAlign: 'center', fontSize: 10, x: endPoint.x + labelOffSetX, y: startPoint.y + labelOffSetY }, name: 'top-text-shape' }); } // Top label if (cfg.secondaryLabel) { group.addShape('text', { attrs: { text: cfg.secondaryLabel, fill: '#595959', fontSize: 8, textAlign: 'center', x: endPoint.x + labelOffSetX, y: startPoint.y + labelOffSetY + 8 }, name: 'bottom-text-shape' }); } return shape; } })34:[] 2f:{"id":"76f212def8eca899","slug":"local-process-analysis-using-pm4py-and-g6","title":"Local process analysis using PM4PY and G6","thumbnail":"5e0f61c010c1ebcc7cccffb4ff649cc14e724ee77b9eb86607254187a9764de6","access_level":"public","create_time":"$D2021-03-31T10:58:14.955Z","update_time":"$D2022-02-26T20:31:45.609Z","view_time":null,"first_public_time":"$D2021-04-08T11:46:47.432Z","fork":{"id":"6a0f2d0bde0ec154","slug":"process-analysis","title":"Process analysis using PM4PY and G6","owner":{"id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024"},"version":2525,"publish_version":2525,"role":null,"authored":false,"authors":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null}],"members":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Local process analysis using PM4PY and G6","cells":[{"id":0,"value":"# Local process analysis using PM4PY and G6\nPlease note this visualization only works when running the API locally","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"{\n const wrapper = html`

`;\n const graphContainer = html`

`;\n const downloadBtn = html``;\n\n wrapper.append(graphContainer);\n wrapper.append(downloadBtn);\n\n yield wrapper;\n\n const graph = new G6.Graph({\n container: graphContainer,\n width: width,\n height: 800,\n plugins: [G6ContextMenu],\n layout: {\n type: 'dagre',\n nodeSep: 70,\n ranksep: 70,\n controlPoints: true\n },\n defaultNode: {\n type: 'rounded_rect'\n },\n defaultEdge: {\n type: 'multipleLabelsEdge',\n loopCfg: {\n position: 'right',\n dist: 100\n }\n },\n modes: {\n default: ['drag-canvas', 'zoom-canvas', 'click-select']\n },\n groupByTypes: false,\n fitView: true\n });\n\n graph.data(network);\n graph.render();\n\n downloadBtn.onclick = function() {\n graph.downloadFullImage('processmap', 'image/png', {\n backgroundColor: '#fff'\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"viewof jsonNetwork = jsonInput({\n label: \"

Import JSON graph

\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1986,"value":"controls = {\n yield html`\n

${viewof apiControlsForm}

Primary edge info:

${viewof primaryEdgeInfoSelect}

Primary edge info:

${viewof secondaryEdgeInfoSelect}

Secondary edge info:

Working hours:

${viewof workhours}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"md`# UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2138,"value":"md`## Filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"viewof filters = filterMenu({ activeFilters: [], file })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"viewof apiControlsForm = {\n const end_activities_options = arr_to_options(\n start_end_activities.end_activities\n );\n const start_activities_options = arr_to_options(\n start_end_activities.start_activities\n );\n\n const paths_detail = rangeInput();\n\n yield formWithSubmit(html``);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"viewof workhours = rangeSlider({\n min: 1,\n max: 24,\n precision: 0,\n separator: '-',\n format: e => `${e}:00`,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [9, 17]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2076,"value":"function arr_to_options(arr) {\n return arr.map(element => ``);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"md`## Edge metrics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"viewof primaryEdgeInfoSelect = DOM.select(Object.keys(perf_mapping))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2191,"value":"viewof secondaryEdgeInfoSelect = DOM.select(\n Object.keys(perf_mapping).filter(e => e != primaryEdgeInfoSelect)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"// Add labels to the network dynamically based on the selection in the performance\nnetwork = {\n if (jsonNetwork.edges.length) {\n jsonNetwork.edges.forEach(edge => {\n let linewidth;\n let label;\n\n const primarySelectedMetric =\n edge.metrics[perf_mapping[primaryEdgeInfoSelect]];\n const primaryEdgeInfo = getSelectedMetric(\n primarySelectedMetric,\n primaryEdgeInfoSelect\n );\n\n const secondarySelectedMetric =\n edge.metrics[perf_mapping[secondaryEdgeInfoSelect]];\n const secondaryEdgeInfo = getSelectedMetric(\n secondarySelectedMetric,\n secondaryEdgeInfoSelect\n );\n\n edge.primaryLabel = primaryEdgeInfo.label;\n edge.secondaryLabel = secondaryEdgeInfo.label;\n edge.lineWidth = primaryEdgeInfo.lineWidth;\n });\n\n return jsonNetwork;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"md`#### Edge helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"function linewidthBasedOnTime(seconds) {\n if (seconds < 3600) {\n return 1; // Hour is one pixel\n } else if (seconds < 86400) {\n return 2; // Day is 2 pixels\n } else if (seconds < 604800) {\n return 4; // Week is 4 pixels\n } else if (seconds < 2592000) {\n return 6; // Month is 6 pixels\n } else if (seconds < 31104000) {\n return 8; // Year is 8 pixels\n } else {\n return 10; // Anything higher than a year is 10 pixels.\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"function getSelectedMetric(selectedMetric, type) {\n let lineWidth;\n let label;\n\n if (type == 'Performance') {\n const duration = moment\n .duration({ seconds: selectedMetric.mean })\n .humanize();\n label = `Performance: ${duration}`;\n lineWidth = linewidthBasedOnTime(selectedMetric.mean);\n } else {\n if (type == 'Relative Frequency') {\n label = `Frequency (relative): ${selectedMetric.relative}`;\n } else if (type == 'Absolute Frequency') {\n label = `Frequency (absolute): ${selectedMetric.absolute}`;\n }\n\n const log = (label > 1 ? Math.log10(label) : .5) * 2;\n lineWidth = log; // <= 8 ? log : 8;\n }\n\n return { label, lineWidth };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`\n

\n## G6 configuration\nIn G6 you can register your own custom node shape using the \\`\\`registerNode\\`\\` function, here we use it to create rounded rectangles with a few color options. Later this function will be expanded to automatically color bottlenecks with harsher colors to indicate that there's an issue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2231,"value":"md`#### Context menus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"G6ContextMenu = new G6.Menu({\n getContent(e) {\n const item = e.item._cfg.model;\n\n if (!item.hasOwnProperty('metrics')) {\n return html`

Couldn't load metrics

`;\n }\n\n return contextMenu(item.metrics);\n },\n // the types of items that allow the menu show up\n className: 'context-menu',\n itemTypes: ['edge']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2462,"value":"md`### Nodes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2378,"value":"md`### Edges`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2320,"value":"defaultEdgeOptions = ({\n endArrow: {\n path: 'M 0,0 L 12,6 L 9,0 L 12,-6 Z',\n fill: pallete.boxStroke\n },\n stroke: pallete.boxStroke\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`\n

\n## Appendix\n### Network requests\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2480,"value":"jsonNetwork","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2488,"value":"file = 'test.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1912,"value":"start_end_activities = (await fetch(`${apiUrl}/start_end_activities`, {\n method: 'POST',\n body: JSON.stringify({\n file: file\n }),\n headers: {\n 'Content-Type': 'application/json'\n }\n})).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"md`## Loading the graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"md`### Statics & styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"pallete = ({\n colorMap: d3.interpolateRgb(\"white\", \"#ff0f48\"),\n boxStroke: '#C2C8D5',\n boxFill: '#C6E5FF',\n textFill: '#000'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"perf_mapping = ({\n Performance: 'performance',\n 'Absolute Frequency': 'frequency',\n 'Relative Frequency': 'frequency'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"import { apiUrl } from '@selenecodes/pm-constants'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"md`#### Personal packages`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"import { contextMenu } from '@selenecodes/context-menu-process-mining'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"import { csvInput, jsonInput } from \"@selenecodes/file-input-with-csv-support\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"import { createBarLine } from '@selenecodes/barchart-with-line'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"import { drawCases } from '@selenecodes/custom-animation-speed-based-on-edge-parameter'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"import { filterMenu } from '@selenecodes/react-filter-menu'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"md`#### External packages`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"G6 = require('@antv/g6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"d3 = require('d3', 'd3-dsv', 'd3-fetch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"import { group } from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"import { barRangeSlider } from \"@bumbeishvili/data-driven-range-sliders\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"import { rangeSlider, rangeInput } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"import { formValue } from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"moment = require(\"moment\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"md`### Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"function formWithSubmit(form) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => {\n event.preventDefault();\n container.value = formValue(form);\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n form.addEventListener(\"input\", event => {\n event.preventDefault();\n // Need this, because otherwise the viewof Generator catches bubbling input events\n event.stopPropagation();\n });\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"checkbox = ({ label = '', value = false } = {}) => {\n let wrapper = html``;\n let check = html``;\n wrapper.append(check);\n wrapper.append(label || '');\n\n check.checked = value;\n\n check.addEventListener('change', e => {\n wrapper.value = check.checked;\n wrapper.dispatchEvent(new CustomEvent('input'));\n });\n\n // we need to have a starting value\n wrapper.value = check.checked;\n\n return wrapper;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"

Import JSON graph

Heuristics net parameters

Detail