30:T482,// installing a Promise to animate // an existing SVG node inside dom_node // with a new SVG, rendered from dot_string animate_this_inside = ( dot_string, dom_node, duration = 0.5 ) => { const adjustWidthHeight = (d) => { if (d.tag == "svg") { try { const svg_width_in_px = d.attributes.width.match( /(\d+)pt/ )[1] * 4 / 3 if( svg_width_in_px > width ) { d.attributes.width = null d.attributes.height = null } } catch (error) { // can't parse the width attribute } } } const transitionFactory = () => d3.transition("magjacT").duration(duration*1000); // create the Graphviz renderer instance on the passed-in element const graphviz_init = d3.select( dom_node ).graphviz( true ) graphviz_init .zoom( false ) .tweenPaths(false) .attributer( adjustWidthHeight ) .transition( transitionFactory ) .keyMode("id") return new Promise ( (resolve, reject) => { graphviz_init.renderDot ( KTS4Dot.preprocess( dot_string ), () => resolve(this) ) } ).then( () => init( dom_node ) ) }31:T6ac,/* * the core rendering function, interacting with NPM libs */ function dot2svg( dot_string_generator, options = default_dot_options ) { const dot_string = typeof dot_string_generator === String ? dot_string_generator : ""+dot_string_generator // triggering toString() let svg_string = transformer.dot2svg( dot_string ); let transformer_error = svg_string.includes( "error caught in KTS" ) let remove_width_attribute = false if ( options.remove_width_height || options.fit && options.fit != "auto" ) remove_width_attribute = true let svg_width_in_px = undefined try { svg_width_in_px = svg_string.match( /

KTS loading...

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"### Diagram below: Importer example","pinned":false,"hidden":false,"mode":"md"},{"id":937,"value":"importmap = importer","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"- - -","pinned":false,"hidden":false,"mode":"md"},{"id":1261,"value":"### Constant Fragment Example ","pinned":false,"hidden":false,"mode":"md"},{"id":1196,"value":"dot_fragment_example = svg_from_dot_fragment()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1266,"value":"### Computed Fragment Example","pinned":false,"hidden":false,"mode":"md"},{"id":973,"value":"viewof show_parts = create_parts_input()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"permalink_parts = {\n \n return htl.html`${\nare_equal( show_parts, get_initial_url_param('parts') )\n?\n \"(selected parts coming from permalink)\"\n:\n htl.html`\n permalink with current set of visible parts\n ${ \n get_initial_url_param('parts')\n ?\n Inputs.button\n ( [\n [\n \"restore parts from permalink\",\n () => set_input_value( viewof show_parts, get_initial_url_param('parts') )\n ]\n ] ) \n :\n \"\"\n }\n`}\n${ Inputs.button( [ [\"none\", ()=>set_input_value(viewof show_parts,[]) ],[ \"all\", ()=>set_input_value( viewof show_parts, mutable parts.keys() ) ] ] ) }\n`\n \nfunction are_equal(array1, array2)\n{\n if\n (\n array1 === undefined\n ||\n array2 === undefined\n ) return false\n \n return array1.length === array2.length && array1.every(element => array2.includes(element));\n}\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"viewof fit_width_layout_option = Inputs.select\n(\n [false, 'auto', true], \n {\n label: \"fit width\", \n value: {\"false\":false,\"\":default_dot_options.fit,\"auto\":'auto',\"true\":true}[ get_initial_url_param( \"fit\", [default_dot_options.fit] )[0] ]\n , \n format: v => { return {false:'never fit (always 1:1)','auto':'auto (scale down if needed)', true:'always fit (scale up or down)'}[v] } \n } \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"computed_fragment_example = digraph2svg( computed_dot_fragment, {fit : fit_width_layout_option} )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1191,"value":"set_part( \"1\", \"Brest -> Paris;\" ) // delete this cell if you define your dot_fragment literally (without computation)","pinned":true,"hidden":true,"mode":"ojs"},{"id":1201,"value":"set_part( \"2\", \"Paris -> München\" ) // delete this cell if you define your dot_fragment literally (without computation)","pinned":true,"hidden":true,"mode":"ojs"},{"id":1216,"value":"computed_dot_fragment = compute_dot_fragment()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"compute_dot_fragment = () => new Array( ...parts ).map( e => show_parts.includes(e[0]) ? e[1] : \"\" ).join(\" \") // you can define your dot_fragment also literally in this cell","pinned":true,"hidden":true,"mode":"ojs"},{"id":1783,"value":"digraph`A -> B -> C\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1720,"value":"### invalid-DOT-source Example","pinned":false,"hidden":false,"mode":"md"},{"id":1719,"value":"digraph2svg( `a --> b`, {fit : fit_width_layout_option} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":750,"value":"maximap = maximap_div","pinned":true,"hidden":false,"mode":"ojs"},{"id":1588,"value":"create_parts_input = (default_values = mutable parts.keys()) => Inputs.checkbox\n(\n mutable parts.keys(), \n {\n label: \"show parts\", \n value: new Array\n (\n ...(parts.keys())).includes( \"0) base\" ) \n ?\n [\"0) base\"] \n :\n get_initial_url_param( 'parts', default_values \n ) \n } \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1650,"value":"function integrate_kts_css()\n{\n if( !document.getElementById('kts-stylesheet') )\n document.head.appendChild\n (\n html``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"mutable parts = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"/* wrapping a dot fragment with the obligatory \"digraph { ... } block, and injecting an optional < options.title > tag */\ndot_fragment_2_dot_string = (fragment,options) => `strict digraph ${options?.title ? (\"<\" + options.title + \">\") : \"\"} { ${fragment} }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"graphviz = {\n const GraphvizModule = await import ( 'https://unpkg.com/@hpcc-js/wasm' + hpcc_js_wasm_version + '/dist/graphviz?module' );\n return GraphvizModule.Graphviz.load();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"transformer = {\n let Tdot2svgStrings = await import( \"https://cdn.skypack.dev/@kxfm/dot2svg/Tdot2svgStrings.js\")\n return new Tdot2svgStrings.Tdot2svgStrings( graphviz )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"Tjira2dot = (await import( \"https://cdn.skypack.dev/@kxfm/jira2dot\")).Tjira2dot","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"visco = (await import( \"https://cdn.skypack.dev/@kxfm/visco@1.4.34\" )).visco","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"issues = await FileAttachment(\"WORK.json\").json()","pinned":true,"hidden":true,"mode":"ojs"},{"id":1721,"value":"insert_dom_inspector = () => {\n const div = html`