Add tooltips

rossumai · Aug 8, 2024 · 9051554 · 9051554
1 parent 6b03a07
commit 9051554
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/project_rossum_deploy/commands/visualize/hooks.py b/project_rossum_deploy/commands/visualize/hooks.py
@@ -2,7 +2,7 @@
 import re
 from rossum_api import ElisAPIClient
 
-from project_rossum_deploy.commands.visualize.utils import create_link
+from project_rossum_deploy.commands.visualize.utils import create_link, find_node
 from project_rossum_deploy.utils.consts import display_error
 
 
@@ -32,7 +32,7 @@ def recognize_master_data_hub_hook(hook: dict) -> bool:
 
 def enrich_graph_with_data_matching_information(hook: dict, graph: dict):
     for configuration in hook["settings"]["configurations"]:
-        # TODO: dataset information
+        dataset_name = configuration["source"].get("dataset", "")
 
         target_schema_ids = [
             configuration["mapping"]["target_schema_id"],
@@ -55,3 +55,8 @@ def enrich_graph_with_data_matching_information(hook: dict, graph: dict):
                     graph["links"].append(
                         create_link(source=match, target=target_schema_id)
                     )
+
+        for target_schema_id in target_schema_ids:
+            node = find_node(target_schema_id, graph)
+            if node:
+                node["tooltip_content"] = f"Dataset: {dataset_name}"
diff --git a/project_rossum_deploy/commands/visualize/utils.py b/project_rossum_deploy/commands/visualize/utils.py
@@ -6,10 +6,12 @@ def create_node(node: dict):
         "is_orphan": False,
         "is_hidden": node.get("hidden", False),
         "field_type": "default",
+        "tooltip_content": "",
     }
 
     if node.get("formula", None):
         graph_node["field_type"] = "formula"
+        graph_node["tooltip_content"] = f"<pre>{node['formula']}</pre>"
     elif node.get("ui_configuration", {}).get("type", "captured") == "manual":
         graph_node["field_type"] = "manual"
     elif (
@@ -27,3 +29,10 @@ def create_node(node: dict):
 
 def create_link(source: str, target: str):
     return {"source": source, "target": target}
+
+
+def find_node(node_id: str, graph: dict):
+    for node in graph["nodes"]:
+        if node["id"] == node_id:
+            return node
+    return None
diff --git a/project_rossum_deploy/dummy_visualization.html b/project_rossum_deploy/dummy_visualization.html
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
+<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
+<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
     integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
@@ -88,7 +90,17 @@
     </div>
     <script>DUMMY_DATA</script>
     <script>
-        // Specify the dimensions of the chart.
+        function setTooltips() {
+            node.attr('data-tippy-content', (d, i) => {
+                return `<div>${d.tooltip_content}</div>`;
+            });
+
+            tippy(node.nodes(), {
+                // content: `<i>hehehe</i>`,
+                allowHTML: true
+            });
+        }
+
         const NODE_WIDTH = 25;
         const width = 1800;
         const height = 900;
@@ -114,7 +126,7 @@
             for (const node of nodes) {
                 if (node.id == id) return node
             }
-            return { level: 0 }
+            return { level: 0, delay: 500 }
         }
 
         var linkedByIndex = {};
@@ -176,6 +188,7 @@
             .selectAll('circle')
             .data(nodes).enter().append("g")
 
+
         const circle = node.append("circle")
             .attr("z", 0)
             .attr("r", NODE_WIDTH)
@@ -202,15 +215,15 @@
                 }
             });
 
-        node.append('title').text((d) => {
-            if (d.field_type == 'formula') {
-                return "Formula field";
-            } else if (d.field_type == 'manual') {
-                return "Manual field";
-            } else if (d.field_type == 'data_matching') {
-                return "Data matching field";
-            }
-        })
+        // node.append('title').text((d) => {
+        //     if (d.field_type == 'formula') {
+        //         return "Formula field";
+        //     } else if (d.field_type == 'manual') {
+        //         return "Manual field";
+        //     } else if (d.field_type == 'data_matching') {
+        //         return "Data matching field";
+        //     }
+        // })
 
         node.attr('class', (d) => d.is_hidden ? "hidden-in-schema" : "")
 
@@ -277,6 +290,7 @@
                 .attr("transform", function (d) {
                     return "translate(" + d.x + "," + d.y + ")";
                 });
+
         }
 
         // Create a simulation with several forces.
@@ -329,6 +343,8 @@
 
         function highlight(active) {
             return function (e, d) {
+                setTooltips()
+
                 link.classed("ingoing", function (link) {
                     return active && link.target === d;
                 });