Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[21818] Improve topic view #239

Merged
merged 7 commits into from
Nov 21, 2024
Merged

[21818] Improve topic view #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9341cb6
Refs #21818: Make topic label shorter in DomainGraph & add hover
Carlosespicur Nov 18, 2024
0b94fa4
Refs #21818: Fix topic tag size, add hover & alternate colors
Carlosespicur Nov 19, 2024
3c8aaf7
Refs #21818: Intercalate DomainGraph topics
Carlosespicur Nov 20, 2024
457139f
Refs #21818: Add suggested changes
Carlosespicur Nov 20, 2024
4b27305
Refs #21818: Show complete name for single topic graphs
Carlosespicur Nov 20, 2024
8c55f45
Refs #21818: Fix segfault caused by ColorOverlay component
Carlosespicur Nov 21, 2024
4678bbe
Refs #21818: Add delay to label hover
Carlosespicur Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions imports/Theme/Theme.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ QtObject {
readonly property color eProsimaYellow: "#ffc001"

readonly property color grey: "#808080"
readonly property color midGrey: "#585858"
readonly property color lightGrey: "#d3d3d3"
readonly property color darkGrey: "#3e3e3e"
readonly property color x11Grey: "#BEBEBE"
Expand Down
2 changes: 2 additions & 0 deletions qml.qrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,10 +236,12 @@
<file alias="left_arrow_black.svg">resources/images/icons/left_arrow/left_arrow_black.svg</file>
<file alias="left_arrow_eProsimaLightBlue.svg">resources/images/icons/left_arrow/left_arrow_eProsimaLightBlue.svg</file>
<file alias="left_arrow_grey.svg">resources/images/icons/left_arrow/left_arrow_grey.svg</file>
<file alias="left_arrow_mid_grey.svg">resources/images/icons/left_arrow/left_arrow_mid_grey.svg</file>
<file alias="left_arrow_white.svg">resources/images/icons/left_arrow/left_arrow_white.svg</file>
<file alias="right_arrow_black.svg">resources/images/icons/right_arrow/right_arrow_black.svg</file>
<file alias="right_arrow_eProsimaLightBlue.svg">resources/images/icons/right_arrow/right_arrow_eProsimaLightBlue.svg</file>
<file alias="right_arrow_grey.svg">resources/images/icons/right_arrow/right_arrow_grey.svg</file>
<file alias="right_arrow_mid_grey.svg">resources/images/icons/right_arrow/right_arrow_mid_grey.svg</file>
<file alias="right_arrow_white.svg">resources/images/icons/right_arrow/right_arrow_white.svg</file>
<file alias="rounded_left_arrow_black.svg">resources/images/icons/rounded_left_arrow/rounded_left_arrow_black.svg</file>
<file alias="rounded_left_arrow_eProsimaLightBlue.svg">resources/images/icons/rounded_left_arrow/rounded_left_arrow_eProsimaLightBlue.svg</file>
Expand Down
78 changes: 57 additions & 21 deletions qml/DomainGraphLayout.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ Item

// Private properties
property var topic_locations_: {} // topic information needed for connection representation
property var topic_style_map_: {} // map with boolean values to alternate style in topics tags and connections
property var endpoint_topic_connections_: {} // endpoint information needed for connection representation
property var topic_painted_: [] // already painted topic connection references
property var endpoint_painted_: [] // already painted endpoint connection references
Expand Down Expand Up @@ -67,6 +68,9 @@ Item
readonly property int connection_thickness_: 6
readonly property int elements_spacing_: 5
readonly property int containers_spacing_: 100
readonly property int topic_tag_size_: 150
readonly property int topic_tag_margin_: 30
readonly property int max_topic_name_size_: 100
readonly property int endpoint_height_: 30
readonly property int first_indentation_: 5
readonly property int icon_size_: 18
Expand All @@ -78,7 +82,12 @@ Item
readonly property int topic_thickness_: 10
readonly property int wheel_displacement_: 30
readonly property int timer_initial_ms_interval_: 200
readonly property int hover_text_offset_: 50
readonly property int hover_delay_: 250
readonly property string topic_color_: Theme.grey
readonly property string topic_color_alias_: "grey" // color alias for svg icons
readonly property string topic_color2_: Theme.midGrey
readonly property string topic_color2_alias_: "mid_grey" // color alias for svg icons
readonly property string host_color_: Theme.darkGrey
readonly property string user_color_: Theme.eProsimaLightBlue
readonly property string process_color_: Theme.eProsimaDarkBlue
Expand Down Expand Up @@ -137,12 +146,13 @@ Item
ListView
{
id: topicsList
property int yOffset: label_height_ + elements_spacing_
model: domainGraphLayout.model ? domainGraphLayout.model["topics"] : undefined
anchors.left: parent.left; anchors.leftMargin: 2 * elements_spacing_
anchors.top: parent.top; anchors.topMargin: elements_spacing_;
anchors.bottom: parent.bottom
contentWidth: contentItem.childrenRect.width
spacing: elements_spacing_
spacing: -(topic_tag_size_/3 + elements_spacing_)
orientation: ListView.Horizontal
interactive: false

Expand Down Expand Up @@ -177,6 +187,11 @@ Item
{
listViewHeight = topicsList.currentItem.height
listViewWidth += topicsList.currentItem.width + elements_spacing_
if (c > 1)
{
// The current item overlaps with the previous one
listViewWidth += topicsList.spacing
}
}
}
topicsList.height = listViewHeight
Expand All @@ -198,7 +213,8 @@ Item
"id": topicsList.currentItem.topic_id,
"width" : draw_width + topicsList.currentItem.width/2
}
draw_width += topicsList.currentItem.width + elements_spacing_
topic_style_map_[topicsList.currentItem.topic_id] = topicsList.currentItem.even_position
draw_width += topicsList.currentItem.width + topicsList.spacing
}

// announce topics are ready
Expand All @@ -209,6 +225,7 @@ Item
delegate: Rectangle
{
property string topic_id: modelData["id"]
property bool even_position: index % 2 === 0
implicitWidth: topic_tag.implicitWidth
height: topicsList.height
color: "transparent"
Expand All @@ -217,32 +234,36 @@ Item
Rectangle
{
id: topic_tag
implicitWidth: topicRowLayout.implicitWidth
height: label_height_
color: topic_color_
color: parent.even_position ? topic_color_ : topic_color2_
radius: radius_
y: !parent.even_position ? topicsList.yOffset : 0
property int textFullWidth: text_metrics.width
implicitWidth: topicsList.count > 1 ? topic_tag_size_ : Math.max(topic_tag_label.width + topic_tag_margin_, topic_tag_size_)

RowLayout {
id: topicRowLayout
spacing: spacing_icon_label_
Label {
id: topic_tag_label
anchors.centerIn: parent
text: modelData["alias"]
Layout.rightMargin: 2* first_indentation_
color: "white"
width: topicsList.count > 1 ? max_topic_name_size_ : text.width
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
}

IconSVG {
name: "topic"
color: "white"
size: icon_size_
Layout.leftMargin: first_indentation_
}
Label {
text: modelData["alias"]
Layout.rightMargin: 2* first_indentation_
color: "white"
}
// Save total text size (without eliding)
TextMetrics {
id: text_metrics
text: modelData["alias"]
}

MouseArea
{
id: topic_tag_mouse_area
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
onClicked:
{
if(mouse.button & Qt.RightButton) {
Expand All @@ -252,6 +273,17 @@ Item
}
}
}
Label {
id: hover_label
visible: false
anchors.top: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: hover_text_offset_
ToolTip.text: modelData["alias"]
// Show hover only if text is elided
ToolTip.visible: topic_tag_mouse_area.containsMouse && text_metrics.width > topic_tag.width
ToolTip.delay: hover_delay_
}
}

// Topic vertical line
Expand All @@ -262,7 +294,7 @@ Item
anchors.bottom: parent.bottom
anchors.horizontalCenter: topic_tag.horizontalCenter
width: topic_thickness_
color: topic_color_
color: parent.even_position ? topic_color_ : topic_color2_
}

Connections {
Expand Down Expand Up @@ -362,7 +394,9 @@ Item
,"y": endpoint_topic_connections_[key]["y"] - (connection_thickness_ / 2)
,"width": topic_locations_[topic_id]["width"]
,"height":connection_thickness_, "z":200, "left_margin": 2*elements_spacing_
,"arrow_color": topic_color_, "background_color": background_color.color
,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_
,"arrow_head_color": topic_style_map_[topic_id] ? "grey" : "mid_grey"
, "background_color": background_color.color
,"endpoint_id": key }
var connection_bar = arrow_component.createObject(topic_connections, input)
topic_painted_[topic_painted_.length] = key;
Expand Down Expand Up @@ -1315,7 +1349,8 @@ Item
,"left_direction": endpoint_topic_connections_[key]["left_direction"]
,"width": 5*elements_spacing_
,"height":connection_thickness_, "z":200
,"arrow_color": topic_color_, "background_color": background_color.color
,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color
,"arrow_head_color": topic_style_map_[topic_id] ? topic_color_alias_ : topic_color2_alias_
,"endpoint_id": key }
var connection_bar = arrow_component.createObject(mainSpace, input)
endpoint_painted_[endpoint_painted_.length] = key
Expand Down Expand Up @@ -1683,6 +1718,7 @@ Item
function clear_graph()
{
topic_locations_ = {}
topic_style_map_ = {}
endpoint_topic_connections_ = {}
endpoint_painted_ = []
topic_painted_ = []
Expand Down
5 changes: 3 additions & 2 deletions qml/GraphConnection.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Item {
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 arrow_head_color: "grey"
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
Expand Down Expand Up @@ -82,7 +83,7 @@ Item {

IconSVG {
name: "left_arrow"
color: "grey"
color: arrow_head_color
size: arrow_size_
}
}
Expand Down Expand Up @@ -159,7 +160,7 @@ Item {

IconSVG {
name: "right_arrow"
color: "grey"
color: arrow_head_color
size: arrow_size_ + right_arrow_margin_
}
}
Expand Down
7 changes: 7 additions & 0 deletions resources/images/icons/left_arrow/left_arrow_mid_grey.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions resources/images/icons/right_arrow/right_arrow_mid_grey.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading