[ui] add CompatibilityBadge on CompatibilityNodes

* add badge icon on nodes in GraphEditor
* add badge banner in AttributeEditor with upgrade button when available

meshroom/ui/qml/GraphEditor/AttributeEditor.qml

@@ -12,6 +12,9 @@ ColumnLayout {
 
     property variant node: null  // the node to edit
     property bool readOnly: false
+    readonly property bool isCompatibilityNode: node.hasOwnProperty("compatibilityIssue")
+
+    signal upgradeRequest()
 
     spacing: 0
 
@@ -19,6 +22,7 @@ ColumnLayout {
         Layout.fillWidth: true
         background: Rectangle { color: Qt.darker(parent.palette.window, 1.15) }
         padding: 2
+
         RowLayout {
             width: parent.width
 
@@ -55,6 +59,20 @@ ColumnLayout {
         }
     }
 
+    // CompatibilityBadge banner for CompatibilityNode
+    Loader {
+        active: isCompatibilityNode
+        Layout.fillWidth: true
+        visible: active  // for layout update
+
+        sourceComponent: CompatibilityBadge {
+            canUpgrade: root.node.canUpgrade
+            issueDetails: root.node.issueDetails
+            onUpgradeRequest: root.upgradeRequest()
+            sourceComponent: bannerDelegate
+        }
+    }
+
     StackLayout {
         Layout.fillHeight: true
         Layout.fillWidth: true
@@ -76,6 +94,7 @@ ColumnLayout {
                 model: node ? node.attributes : undefined
 
                 delegate: AttributeItemDelegate {
+                    readOnly: root.isCompatibilityNode
                     labelWidth: 180
                     width: attributesListView.width
                     attribute: object

meshroom/ui/qml/GraphEditor/CompatibilityBadge.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import MaterialIcons 2.2
+
+
+/** Node Badge to inform about compatibility issues
+ * Provides 2 delegates (can be set using sourceComponent property):
+ *     - iconDelegate (default): icon + tooltip with information about the issue
+ *     - bannerDelegate: banner with issue info + upgrade request button
+*/
+Loader {
+    id: root
+
+    property bool canUpgrade
+    property string issueDetails
+    property color color: canUpgrade ? "#E68A00" : "#F44336"
+
+    signal upgradeRequest()
+
+    sourceComponent: iconDelegate
+
+    property Component iconDelegate: Component {
+
+        Label {
+
+            text: MaterialIcons.warning
+            font.family: MaterialIcons.fontFamily
+            font.pointSize: 12
+            color: root.color
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                onPressed: mouse.accepted = false
+                ToolTip.text: issueDetails
+                ToolTip.visible: containsMouse
+            }
+        }
+    }
+
+    property Component bannerDelegate: Component {
+
+        Pane {
+            padding: 6
+            clip: true
+            background: Rectangle { color: root.color }
+
+            RowLayout {
+                width: parent.width
+                Column {
+                    Layout.fillWidth: true
+                    Label {
+                        width: parent.width
+                        elide: Label.ElideMiddle
+                        font.bold: true
+                        text: "Compatibility issue"
+                        color: "white"
+                    }
+                    Label {
+                        width: parent.width
+                        elide: Label.ElideMiddle
+                        text: root.issueDetails
+                        color: "white"
+                    }
+                }
+                Button {
+                    visible: root.canUpgrade && (parent.width > width) ? 1 : 0
+                    palette.window: root.color
+                    palette.button: Qt.darker(root.color, 1.2)
+                    palette.buttonText: "white"
+                    text: "Upgrade"
+                    onClicked: upgradeRequest()
+                }
+            }
+        }
+
+    }
+}

meshroom/ui/qml/GraphEditor/GraphEditor.qml

@@ -237,7 +237,7 @@ Item {
                     node: object
                     width: root.nodeWidth
                     readOnly: root.readOnly
-                    baseColor: root.selectedNode == node ? Qt.lighter("#607D8B", 1.2) : "#607D8B"
+                    baseColor: root.selectedNode == node ? Qt.lighter(defaultColor, 1.2) : defaultColor
 
                     onAttributePinCreated: registerAttributePin(attribute, pin)
                     onAttributePinDeleted: unregisterAttributePin(attribute, pin)

meshroom/ui/qml/GraphEditor/Node.qml

@@ -6,10 +6,12 @@ import Utils 1.0
 
 Item {
     id: root
-    property variant node: object
+    property variant node
     property bool readOnly: false
-    property color baseColor: "#607D8B"
+    property color baseColor: defaultColor
     property color shadowColor: "black"
+    readonly property bool isCompatibilityNode: node.hasOwnProperty("compatibilityIssue")
+    readonly property color defaultColor: isCompatibilityNode ? "#444" : "#607D8B"
 
     signal pressed(var mouse)
     signal doubleClicked(var mouse)
@@ -178,4 +180,19 @@ Item {
         }
         Item { width: 1; height: 2}
     }
+
+    // CompatibilityBadge icon for CompatibilityNodes
+    Loader {
+        active: root.isCompatibilityNode
+        anchors {
+            right: parent.right
+            top: parent.top
+            margins: -4
+        }
+        sourceComponent: CompatibilityBadge {
+            sourceComponent: iconDelegate
+            canUpgrade: root.node.canUpgrade
+            issueDetails: root.node.issueDetails
+        }
+    }
 }

meshroom/ui/qml/main.qml

@@ -442,6 +442,14 @@ ApplicationWindow {
                                 node: graphEditor.selectedNode
                                 // Make AttributeEditor readOnly when computing
                                 readOnly: _reconstruction.computing
+
+                                onUpgradeRequest: {
+                                    var delegate = graphEditor.nodeDelegate(node.name)
+                                    var posX = delegate.x
+                                    var posY = delegate.y
+                                    _reconstruction.upgradeNode(node)
+                                    graphEditor.moveNode(node.name, posX, posY)
+                                }
                             }
                         }
                     }