Improve graph visual details (#209)

* Refs #19973: Fix topic lines below entities visual bug Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Update Warning Icon to be more visible Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Remove info panel refresh call when new status is reported Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Improve arrows when related topic is not displayed Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Fix glitch when filtering domain graph per topic Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Apply rev suggestions Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Fix identation Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Fix Gif size to adapt resolution Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Please uncrustify Signed-off-by: JesusPoderoso <[email protected]> * Refs #19973: Fix statistics backend StatusLevel references Signed-off-by: JesusPoderoso <[email protected]> --------- Signed-off-by: JesusPoderoso <[email protected]>
eProsima · Dec 19, 2023 · 4688e10 · 4688e10
1 parent fc01fd6
commit 4688e10
Show file tree

Hide file tree

Showing 9 changed files with 340 additions and 93 deletions.
diff --git a/qml.qrc b/qml.qrc
@@ -76,6 +76,7 @@
         <file alias="graphs.svg">resources/images/graphs.svg</file>
         <file alias="domain_graph.svg">resources/images/domain_graph.svg</file>
         <file alias="topic_graph.svg">resources/images/topic_graph.svg</file>
+        <file alias="loading_graph.gif">resources/images/loading_graph.gif</file>
     </qresource>
     <qresource prefix="/resources/images/icons">
         <file alias="clearissues_black.svg">resources/images/icons/clearissues/clearissues_black.svg</file>
@@ -163,6 +164,7 @@
         <file alias="issues_eProsimaLightBlue.svg">resources/images/icons/issues/issues_eProsimaLightBlue.svg</file>
         <file alias="issues_grey.svg">resources/images/icons/issues/issues_grey.svg</file>
         <file alias="issues_white.svg">resources/images/icons/issues/issues_white.svg</file>
+        <file alias="issues_yellow.svg">resources/images/icons/issues/issues_yellow.svg</file>
         <file alias="lessthan_black.svg">resources/images/icons/lessthan/lessthan_black.svg</file>
         <file alias="lessthan_eProsimaLightBlue.svg">resources/images/icons/lessthan/lessthan_eProsimaLightBlue.svg</file>
         <file alias="lessthan_grey.svg">resources/images/icons/lessthan/lessthan_grey.svg</file>

diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml
diff --git a/qml/GraphConnection.qml b/qml/GraphConnection.qml
@@ -1,12 +1,15 @@
 import QtQuick 2.0
 
 Item {
+    id: graphConnection
     // public property
     property bool left_direction: false                 // defines if the represented connection must draw a left arrow
     property bool right_direction: false                // defines if the represented connection must draw a right arrow
     property int left_margin: 0                         // left margin to be applied
     property string arrow_color: Theme.grey             // connection color
     property string background_color: "white"           // background color
+    property string endpoint_id: ""                     // graph refferred entity id
+    property bool hidden_arrow: false                   // associated topic is not visible
 
     // readonly private design properties
     readonly property int arrow_margin_: -3             // margins for background
@@ -18,6 +21,7 @@ Item {
     readonly property int left_arrow_background_margin_: -4
     readonly property int left_arrow_margin_: -5        // left arrow margin
     readonly property int right_arrow_margin_: -2       // right arrow margin
+    readonly property int hidden_arrow_margin_: 2       // hidden arrow margin
 
     // background to make connection overlap nicely with previous topics (looks like connection goes OVER the topic)
     Rectangle {
@@ -41,8 +45,6 @@ Item {
         color: "white"
     }
 
-
-
     // left arrow if visible
     Item {
         id: left_arrow_background
@@ -70,7 +72,6 @@ Item {
         }
     }
 
-
     Item {
         id: left_arrow
         visible: left_direction
@@ -96,6 +97,57 @@ Item {
         color: arrow_color
     }
 
+    // hidden topic icon
+    Rectangle {
+        visible: graphConnection.hidden_arrow
+        anchors.verticalCenter: base_arrow.verticalCenter
+        anchors.left: base_arrow.right
+        height: graphConnection.height - 2* arrow_margin_; width: 3*graphConnection.height + hidden_arrow_margin_*4
+        color: "white"
+
+        Rectangle {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right; anchors.leftMargin: -parent.height/2
+            height: parent.height; width: parent.height
+            radius: parent.height
+            color: "white"
+        }
+
+        Rectangle {
+            id: spot_1
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left; anchors.leftMargin: hidden_arrow_margin_*2
+            height: graphConnection.height; width: graphConnection.height
+            radius: graphConnection.height
+            color: arrow_color
+        }
+        Rectangle {
+            id: spot_2
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: spot_1.right; anchors.leftMargin: hidden_arrow_margin_
+            height: graphConnection.height; width: graphConnection.height
+            radius: graphConnection.height
+            color: arrow_color
+        }
+        Rectangle {
+            id: spot_3
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: spot_2.right; anchors.leftMargin: hidden_arrow_margin_
+            height: graphConnection.height; width: graphConnection.height
+            radius: graphConnection.height
+            color: arrow_color
+        }
+
+        Rectangle {
+            id: spot_0
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: spot_1.left; anchors.rightMargin: hidden_arrow_margin_*2-graphConnection.height/2 +1
+            height: graphConnection.height; width: graphConnection.height
+            radius: graphConnection.height
+            color: arrow_color
+        }
+    }
+
     // right arrow if visible
     Item {
         id: right_arrow
@@ -111,4 +163,12 @@ Item {
             size: arrow_size_ + right_arrow_margin_
         }
     }
+
+    function topid_hidden(entityId, is_hidden)
+    {
+        if (endpoint_id == entityId && graphConnection.hidden_arrow != is_hidden)
+        {
+            graphConnection.hidden_arrow = is_hidden
+        }
+    }
 }
diff --git a/qml/StatusTreeViewItem.qml b/qml/StatusTreeViewItem.qml
@@ -120,7 +120,7 @@ Item {
             anchors.verticalCenter: parent.verticalCenter
             name: currentRow.currentStatus == "ERROR" ? "error"
                     : currentRow.currentStatus == "WARNING" ? "issues" : ""
-            color: currentRow.currentAlive ? currentRow.currentStatus == "ERROR" ? "red" :"black" : "grey"
+            color: currentRow.currentAlive ? currentRow.currentStatus == "ERROR" ? "red" :"yellow" : "grey"
             size: 15
         }
 

diff --git a/qml/TabLayout.qml b/qml/TabLayout.qml
@@ -36,6 +36,8 @@ Item {
     property int last_index_: 1                                             // force unique idx on QML components
     property var tab_model_: [{"idx":0, "title":"New Tab", "stack_id": 0}]  // tab model for tab bad and tab management
     property bool disable_chart_selection_: false                           // flag to disable multiple chart view tabs
+    readonly property var allowed_stack_components_:                        // list of allowed component names to be
+            ["view_selector", "chartsLayout", "domainGraphLayout_component"]//  loaded in the tabs stack view
 
     // private signals
     signal open_domain_view_(int stack_id, int entity_id, int domain_id)
@@ -50,6 +52,9 @@ Item {
     readonly property int tabs_margins_: 15
     readonly property int tab_icons_size_: 16
     readonly property int add_tab_width_: 50
+    readonly property int timer_ms_interval_: 500
+    readonly property int dialog_width_: 300
+    readonly property int dialog_height_: 152
     readonly property string selected_tab_color_: "#ffffff"
     readonly property string selected_shadow_tab_color_: "#c0c0c0"
     readonly property string not_selected_tab_color_: "#f0f0f0"
@@ -84,7 +89,9 @@ Item {
             StackView {
                 id: stack
                 property int stack_id: 0
-                initialItem: view_selector
+                property string customInitialItem: "view_selector"
+                initialItem: customInitialItem == "chartsLayout" ? chartsLayout :
+                        customInitialItem == "domainGraphLayout_component" ? domainGraphLayout_component : view_selector
 
                 // override push transition to none
                 pushEnter: Transition {}
@@ -241,6 +248,14 @@ Item {
                             tabLayout.openTopicMenu(domainEntityId, domainId, entityId, currentAlias, entityKind)
                         }
 
+                        onOpenLoadingGraphDialog: {
+                            loading_graph_dialog.open()
+                        }
+
+                        onInitialized: {
+                            loading_graph_dialog.soft_close()
+                        }
+
                         Connections {
                             target: tabLayout
 
@@ -261,7 +276,6 @@ Item {
                                 }
                             }
                         }
-
                     }
                 }
 
@@ -271,6 +285,7 @@ Item {
                     function onOpen_domain_view_(stack_id, entity_id, domain_id, topic_id) {
                         if (stack.stack_id == stack_id)
                         {
+                            loading_graph_dialog.open()
                             if (stack.deep > 1)
                             {
                                 stack.pop()
@@ -426,7 +441,7 @@ Item {
         x: (parent.width - width) / 2
         y: (parent.height - height) / 2
 
-        width: 300
+        width: dialog_width_
 
         modal: true
         title: "Select DDS Domain"
@@ -478,11 +493,73 @@ Item {
         }
     }
 
+    Dialog {
+        id: loading_graph_dialog
+
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+
+        width: dialog_width_
+        height: dialog_height_
+
+        modal: true
+
+        AnimatedImage {
+            source: "/resources/images/loading_graph.gif"
+            anchors.centerIn: parent
+            width: dialog_width_
+            height: dialog_height_
+        }
+
+        onAboutToShow:
+        {
+            timer.start()
+        }
+
+        function soft_close()
+        {
+            if (timer.running)
+            {
+                timer.should_close = true
+            }
+            else
+            {
+                loading_graph_dialog.close()
+            }
+        }
+
+        Timer
+        {
+            id: timer
+            property bool should_close: false
+            interval: timer_ms_interval_; running: false
+            onTriggered:
+            {
+                if (timer.should_close)
+                {
+                    loading_graph_dialog.close()
+                    timer.should_close = false
+                }
+            }
+        }
+    }
+
     function create_new_tab()
     {
+        create_new_custom_tab_("")
+    }
+
+    function create_new_custom_tab_(component_identifier)
+    {
+        var initial_component = component_identifier
+        if (!allowed_stack_components_.includes(component_identifier))
+        {
+            initial_component = "view_selector";
+        }
         var idx = tabLayout.tab_model_.length
         tabLayout.tab_model_[idx] = {"idx" : idx, "title": "New Tab", "stack_id":last_index_}
-        var new_stack = stack_component.createObject(null, {"stack_id": tabLayout.tab_model_[idx]["stack_id"]})
+        var new_stack = stack_component.createObject(null, {
+                "stack_id": tabLayout.tab_model_[idx]["stack_id"], "customInitialItem": initial_component })
         last_index_++
         stack_layout.children.push(new_stack)
         refresh_layout(idx)
@@ -626,7 +703,7 @@ Item {
     }
 
     function open_topic_view(domainEntityId, domainId, entityId) {
-        create_new_tab()
+        create_new_custom_tab_("domainGraphLayout_component")
         open_domain_view_(tabLayout.tab_model_[current_]["stack_id"], domainEntityId, domainId)
         filter_domain_view_by_topic_(tabLayout.tab_model_[current_]["stack_id"], domainEntityId, entityId)
     }

diff --git a/resources/images/icons/issues/issues_yellow.svg b/resources/images/icons/issues/issues_yellow.svg
diff --git a/resources/images/loading_graph.gif b/resources/images/loading_graph.gif