[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH] Convert event chain graph visualization to Mermaid in the Activity...

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
708c387e by Alvin Bauma at 2026-02-10T22:46:10+00:00
[ENH] Convert event chain graph visualization to Mermaid in the Activity Stream management interface
---
* [ENH] Convert event chain graph visualization to Mermaid in the Activity Stream management interface

See merge request tikiwiki/tiki!9528

- - - - -


3 changed files:

- lib/core/Services/ActivityStream/ManageController.php
- src/js/tiki-mermaid/mermaid.js
- templates/managestream/list.tpl


Changes:

=====================================
lib/core/Services/ActivityStream/ManageController.php
=====================================
@@ -37,10 +37,15 @@ class Services_ActivityStream_ManageController
             $rule['status'] = $status;
         }
 
+        $event_graph = TikiLib::events()->getEventGraph();
+
+        // Build Mermaid mindmap data for event graph visualization
+        $event_graph = $this->buildEventGraphData($event_graph['nodes'], $event_graph['edges']);
+
         return [
             'rules' => $rules,
             'ruleTypes' => $this->getRuleTypes(),
-            'event_graph' => TikiLib::events()->getEventGraph(),
+            'event_graph' => $event_graph,
         ];
     }
 
@@ -526,4 +531,71 @@ $customArguments
             return 'unknown';
         }
     }
+
+    /**
+     * Build Event Graph data in Mermaid mindmap syntax for visualization.
+     * The graph is built based on the events and their relationships (edges) where an edge from event A to event B means that event A is a child of event B in the mindmap hierarchy.
+     * Marmaid mindmap syntax: https://mermaid.ai/open-source/syntax/mindmap.html
+     * @param array $nodes
+     * @param array $edges
+     * @return string
+     */
+    private function buildEventGraphData(array $nodes, array $edges): string
+    {
+        // Build parent->children mapping from edges (from -> to means from is child of to)
+        $childrenMap = [];
+        $parents = [];
+
+        foreach ($edges as $edge) {
+            $from = $edge['from'];
+            $to = $edge['to'];
+
+            if (! isset($childrenMap[$to])) {
+                $childrenMap[$to] = [];
+            }
+            $childrenMap[$to][] = $from;
+            $parents[$from] = $to;
+        }
+
+        // Find root nodes (events that have no parent)
+        $rootNodes = [];
+        foreach ($nodes as $node) {
+            if (! isset($parents[$node])) {
+                $rootNodes[] = $node;
+            }
+        }
+
+        $lines = ['mindmap'];
+        $lines[] = '  root((EVENTS))';
+
+        // Process each root node and build the hierarchy
+        foreach ($rootNodes as $rootNode) {
+            $lines[] = '    ((' . $rootNode . '))';
+            $this->addChildrenToEventGraphData($rootNode, $childrenMap, $lines, 3);
+        }
+
+        return implode("\n", $lines);
+    }
+
+    /**
+     * Recursively add children to mindmap structure
+     * @param string $parentNode
+     * @param array $childrenMap
+     * @param array &$lines
+     * @param int $depth
+     */
+    private function addChildrenToEventGraphData(string $parentNode, array $childrenMap, array &$lines, int $depth): void
+    {
+        if (! isset($childrenMap[$parentNode])) {
+            return;
+        }
+
+        $children = $childrenMap[$parentNode];
+
+        foreach ($children as $child) {
+            $indent = str_repeat('  ', $depth);
+            $lines[] = $indent . $child;
+            $this->addChildrenToEventGraphData($child, $childrenMap, $lines, $depth + 1); // Recursively add children of this child
+        }
+    }
 }


=====================================
src/js/tiki-mermaid/mermaid.js
=====================================
@@ -18,7 +18,7 @@ export default function handleMermaid() {
     const renderDiagram = async (element) => {
         try {
             let svgElement = await drawDiagram(element);
-            svgElement.style.height = "60vh";
+            svgElement.style.height = "80vh";
             svgElement.style.maxWidth = "100%";
             const mermaidPanZoom = svgPanZoom(svgElement, {
                 zoomEnabled: true,


=====================================
templates/managestream/list.tpl
=====================================
@@ -22,37 +22,22 @@
                 </div>
             </div>
             {button href="tiki-admin.php?page=community" _icon_name="settings" _text="{tr}Community{/tr}" _class="tips" _title=":{tr}Community Control Panel{/tr}"}
-            {* former add_dracula() *}
-            {$headerlib->add_jsfile('lib/dracula/raphael-min.js', true)}
-            {$headerlib->add_jsfile('lib/dracula/graffle.js')}
-            {$headerlib->add_jsfile('lib/dracula/graph.js')}
-            <button href="#" id="graph-draw" class="btn btn-primary">{icon name="image"} {tr}Event Chain Diagram{/tr}</button>
-            <div id="graph-canvas" class="graph-canvas" data-graph-nodes="{$event_graph.nodes|@json_encode|escape}" data-graph-edges="{$event_graph.edges|@json_encode|escape}"></div>
-    {jq}
-        $('#graph-draw').on("click", function(e) {
-            const width = $window.width() - 50;
-            const height = $window.height() - 130;
             
-            $('#graph-canvas')
-                .css('width', width)
-                .css('height', height)
-                .drawGraph();
-
-            $.openModal({
-                title: "{tr}Events{/tr}",
-                size: 'modal-fullscreen',
-                dialogVariants: ["scrollable", "center"],
-                content: $('#graph-canvas'),
-                open: function() {
-                    $(this).on('hidden.bs.modal', function() {
-                        // Keep the canvas in the DOM so that the graph can be redrawn on next click.
-                        $('body').append($('#graph-canvas').empty());
-                    });
-                }
-            })
-            return false;
-        });
-    {/jq}
+            {$headerlib->add_js_module("import handleMermaid from '@mermaidPack'; handleMermaid();")}
+            <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#mermaidOffcanvas" aria-controls="mermaidOffcanvas">{icon name="diagram"} {tr}Event Chain Diagram{/tr}</button>
+            
+            <div class="offcanvas offcanvas-start" style="width: 100vw !important;" tabindex="-1" id="mermaidOffcanvas" aria-labelledby="mermaidOffcanvasLabel">
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="mermaidOffcanvasLabel">{tr}Event Chain Diagram{/tr}</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body">
+                    <div id="mermaid-diagram">
+                        <textarea class="code d-none">{$event_graph|escape}</textarea>
+                        <div class="mermaid w-100"></div>
+                    </div>
+                </div>
+            </div>
         </div>
     {/if}
 {/block}



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/708c387e5aaf8446e194c70dfeb453092715bf19

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/708c387e5aaf8446e194c70dfeb453092715bf19
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs