Рисуем карту сервисов при помощи Qt Quick и GraphViz

Решил запрототипировать два представления в дополнение к стандартному Jaeger UI. Это

• построение карты сервисов по трейсу;

• просмотрщик логов без пиксельхантинга и разворачивания спанов.

Для Qt Widgets есть обертка в виде nbergont/qgv, а хочется сделать на Qt Quick.

Как это выглядит со стороны Qt Quick:

Flickable {     topMargin: 80     leftMargin: 80     bottomMargin: 80     rightMargin: 80      contentWidth: svcMap.width     contentHeight: svcMap.height      ServiceMap {         id: svcMap         visible: true                  graph: item.graph         delegate: Rectangle {             implicitHeight: content.height + 10             implicitWidth: content.width + 10              visible: true             border.color: "black"             border.width: 1              ColumnLayout {                 id: content                 x: 5                 y: 5                  Text {                     text: node.name                     Layout.minimumWidth: 100                     font.bold: true                 }                  Rectangle {                     visible: node.hasEdges                     height: 1                     width: 10                     Layout.fillWidth: true                     color: "gray"                 }                  Repeater {                     model: node.operations                      Text {                         text: modelData                     }                 }             }             MouseArea {                 anchors.fill: parent                 onClicked: {                     nodeItem.setNode(node);                 }             }         }     } }

ServiceMap помещаем во Flickable на случай если граф не влезет в отображаемые границы. Делегат вычисляет размер исходя из содержимого, которое зависит от переданного свойства node.На стороне С++ следующая последовательность шагов:

• пробежаться по вершинам и ребрам графа, создать QQuickItem со свойством node, для получения размера;

• пробежаться по вершинам и ребрам графа, создать Agnode_t, Agedge_t в GraphViz, настроить параметры отображения;

• выполнить расчет графа в GraphViz;

• выставить вершинам и ребрам рассчитанные параметры.

Интерфейс ServiceMap, для делегата используется тип QQmlComponent:

struct ServiceMapCtx;  class ServiceMap : public QQuickItem {     Q_OBJECT     Q_PROPERTY(TraceGraph graph READ getGraph WRITE setGraph NOTIFY notifyGraphChanged)     Q_PROPERTY(QQmlComponent *delegate READ delegate WRITE setDelegate NOTIFY notifyDelegateChanged) public:     static constexpr qreal DPI = 72.0; //https://graphviz.org/doc/info/attrs.html      explicit ServiceMap(QQuickItem *parent = nullptr);     ~ServiceMap();      const TraceGraph &getGraph() const;     void setGraph(const TraceGraph &data);      QQmlComponent *delegate() const;     void setDelegate(QQmlComponent *delegate);  signals:      void notifyGraphChanged();     void notifyDelegateChanged();  private:     void makeServiceGraph();     void makeQuickNodes();     void computeLayout();     void resetGraph();  private:     std::unique_ptr<ServiceMapCtx> m_ctx;     TraceGraph m_trace;     QQmlComponent *m_delegate;      QVector<ServiceMapNode> m_nodes;     QVector<ServiceMapEdge> m_edges; };

Немножко хелперов, GraphViz использует строки, для настройки свойств:

namespace { struct ContextDeleter {     void operator()(GVC_t *ctx) const     {         gvFinalize(ctx);         if (gvFreeContext(ctx) != 0) {             qWarning() << "gvFreeContext != 0";         }     } };  struct GraphDeleter {     void operator()(Agraph_t *graph) const     {         if (agclose(graph) != 0) {             qWarning() << "agclose != 0";         }     } };  using GVContextPtr = std::unique_ptr<GVC_t, ContextDeleter>; using GVGraphPtr = std::unique_ptr<Agraph_t, GraphDeleter>;  template<typename NodeType> void setAttribute(NodeType *node, const QString &key, const QString &value) {     char empty[] = "";      auto k = key.toLatin1();     auto v = value.toLatin1();     agsafeset(node, k.data(), v.data(), empty); }   } // namespace //... struct ServiceMapCtx {     ServiceMapCtx()         : ctx(gvContext())         , graph(agopen("service_map", Agdirected, NULL))     {         setGraphAttribute("label", "service map");          setGraphAttribute("rankdir", "LR");         setGraphAttribute("nodesep", "0.5");         //setGraphAttribute("splines", "ortho");          setNodeAttribute("shape", "box");         setEdgeAttribute("minlen", "3");     }      ~ServiceMapCtx() { gvFreeLayout(ctx.get(), graph.get()); }      void setNodeAttribute(const QString &name, const QString &value)     {         if (graph) {             agattr(graph.get(), AGNODE, name.toLocal8Bit().data(), value.toLocal8Bit().data());         }     }      void setGraphAttribute(const QString &name, const QString &value)     {         if (graph) {             agattr(graph.get(), AGRAPH, name.toLocal8Bit().data(), value.toLocal8Bit().data());         }     }      void setEdgeAttribute(const QString &name, const QString &value)     {         if (graph) {             agattr(graph.get(), AGEDGE, name.toLocal8Bit().data(), value.toLocal8Bit().data());         }     }      GVContextPtr ctx;     GVGraphPtr graph; };  ServiceMap::ServiceMap(QQuickItem *parent)     : QQuickItem(parent)     , m_ctx(std::make_unique<ServiceMapCtx>())     , m_delegate(nullptr) {     setFlag(QQuickItem::ItemHasContents); }  ServiceMap::~ServiceMap() {}

Для визуальных QQuickItem нужно задавать флаг QQuickItem::ItemHasContents в true, означает что item имеет детей, которых нужно отрисовывать. Создаем визуальные элементы вершин и ребер:

void ServiceMap::makeQuickNodes() {     for (auto &node : m_nodes) {         auto creationCtx = m_delegate->creationContext();         auto ctx = new QQmlContext(creationCtx ? creationCtx : qmlContext(this));          auto item = m_delegate->beginCreate(ctx);         if (item) {             ctx->setContextProperty("node", QVariant::fromValue(node));              auto quickItem = qobject_cast<QQuickItem *>(item);              quickItem->setParentItem(this);             quickItem->setZ(1);             node.qmlObject = quickItem;         } else {             qCritical() << "failed create QQuickItem from delegate" << m_delegate->errors();         }         m_delegate->completeCreate();     }      for (auto &edge : m_edges) {         edge.qmlObject = new EdgeItem;         edge.qmlObject->setZ(2);         edge.qmlObject->setParentItem(this);     } }

Вершина создается в несколько этапов через beginCreate/completeCreate, для установки свойства node. Создаем вершины и узлы в GraphViz, длины задаются в дюймах, при этом зашито 72 DPI:

void applySize(ServiceMapNode &node, qreal DPI) {     if (node.qmlObject) {         auto size = node.qmlObject->size();         auto widthIn = QString::number(qreal(size.width()) / DPI);         auto heightIn = QString::number(qreal(size.height()) / DPI);         setAttribute(node.gvNode, "width", widthIn);         setAttribute(node.gvNode, "height", heightIn);         setAttribute(node.gvNode, "fixedsize", "true");     } }  //... auto graph = m_ctx->graph.get(); QHash<graph::Process *, Agnode_t *> nodeMap; for (auto &node : m_nodes) {     node.gvNode = agnode(graph, NULL, true);     nodeMap.insert(node.process, node.gvNode);     applySize(node, DPI); }  for (auto &edge : m_edges) {     auto from = nodeMap[edge.from];     auto to = nodeMap[edge.to];     edge.gvEdge = agedge(graph, from, to, NULL, TRUE); }

Сам расчет графа осуществляется вызовом функции gvLayout из gvc.h(libgvc). В этой библиотеке содержатся функции расчета и рендеринга изображения:

if (gvLayout(m_ctx->ctx.get(), graph, "dot") != 0) {     qCritical() << "Layout render error" << agerrors() << QString::fromLocal8Bit(aglasterr()); }

Выставляем размер ServiceMap, где UR это координаты верхнего правого угла typedef struct { pointf LL, UR; } boxf:

qreal gvGraphHeight = GD_bb(graph).UR.y; qreal gvGraphWidth = GD_bb(graph).UR.x; setImplicitHeight(gvGraphHeight); setImplicitWidth(gvGraphWidth);

Дальше нужно расставить вершины QQuickItem по координатам, который рассчитал GraphViz. В GraphViz ось Y идет снизу вверх, а в Qt сверху в низ. А координата вершины GraphViz находится в центре фигуры. Поэтому разворачиваем и смещаем координаты:

QPointF centerToOrigin(const QPointF &p, qreal width, qreal height) {     return QPointF(p.x() - width / 2, p.y() - height / 2); } //... for (auto &node : m_nodes) {     auto gvPos = ND_coord(node.gvNode);     QPoint pt(gvPos.x, gvGraphHeight - gvPos.y);     auto org = centerToOrigin(pt, node.qmlObject->width(), node.qmlObject->height());     node.qmlObject->setPosition(org); }

С ребрами немного сложнее. Вытаскиваем точки, по которым будем рисовать линию:

for (auto &edge : m_edges) {     auto spline = ED_spl(edge.gvEdge);     QVector<QPointF> points;      if (spline->size != 0) {         bezier bez = spline->list[0];         points.reserve(bez.size);          for (int i = 0; i < bez.size; ++i) {             auto &p = bez.list[i];             points << QPointF(p.x, gvGraphHeight - p.y);         }         points << QPointF(spline->list->ep.x, gvGraphHeight - spline->list->ep.y);     }      edge.qmlObject->setPoints(points);

Осталось нарисовать объект с необычной геометрией. В документации Qt Quick Examples and Tutorials есть интересующие нас вещи. От туда потребуется примеры работы с графом сцены(Scene Graph), из которого возьмем два примера Graph и Custom Geometry. Т.к. это прототип, то для ребер написал код на выброс:

class EdgeItem : public QQuickItem {     Q_OBJECT     QML_ELEMENT public:     explicit EdgeItem(QQuickItem *parent = nullptr);     QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *) override;      void setPoints(const QVector<QPointF> &points);  private:     QVector<QPointF> m_points;     QSGGeometryNode *m_arrowNode; }; ///... EdgeItem::EdgeItem(QQuickItem *parent)     : QQuickItem(parent)     , m_arrowNode(nullptr) {     setFlag(ItemHasContents); }  QSGNode *EdgeItem::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) {     if (!m_arrowNode) {         m_arrowNode = new QSGGeometryNode;         auto geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 3);         geometry->setLineWidth(1);         geometry->setDrawingMode(QSGGeometry::DrawTriangles);         m_arrowNode->setGeometry(geometry);         m_arrowNode->setFlag(QSGNode::OwnsGeometry);         auto *material = new QSGFlatColorMaterial;         material->setColor(QColor("black"));         m_arrowNode->setMaterial(material);         m_arrowNode->setFlag(QSGNode::OwnsMaterial);         geometry->allocate(3);     }      QSGGeometryNode *node = nullptr;     QSGGeometry *geometry = nullptr;      if (!oldNode) {         node = new QSGGeometryNode;         geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(),                                    std::max(m_points.size() - 1, qsizetype(0)));         geometry->setLineWidth(1);         geometry->setDrawingMode(QSGGeometry::DrawLineStrip);         node->setGeometry(geometry);         node->setFlag(QSGNode::OwnsGeometry);         auto *material = new QSGFlatColorMaterial;         material->setColor(QColor("black"));         node->setMaterial(material);         node->setFlag(QSGNode::OwnsMaterial);          node->appendChildNode(m_arrowNode);     } else {         node = static_cast<QSGGeometryNode *>(oldNode);         geometry = node->geometry();         geometry->allocate(m_points.size() - 1);     }      QSGGeometry::Point2D *vertices = geometry->vertexDataAsPoint2D();      for (int i = 0; i < m_points.size() - 1; ++i) {         vertices[i].set(m_points[i].x(), m_points[i].y());     }      if (!m_points.isEmpty()) {         QLineF line(m_points[m_points.size() - 2], m_points[m_points.size() - 1]);         QLineF n = line.normalVector();         QPointF o(n.dx() / 3.0, n.dy() / 3.0);          auto arrVertices = m_arrowNode->geometry()->vertexDataAsPoint2D();         arrVertices[0].set(line.p1().x() + o.x(), line.p1().y() + o.y());         arrVertices[1].set(line.p2().x(), line.p2().y());         arrVertices[2].set(line.p1().x() - o.x(), line.p1().y() - o.y());     }      node->markDirty(QSGNode::DirtyGeometry);     return node; }  void EdgeItem::setPoints(const QVector<QPointF> &points) {     m_points = points;     update(); }

Этого достаточно. Если задать свойство ребер setGraphAttribute("splines", "ortho"), то получим результат:

Код доступен на RPG-18/jgv и может отличаться от кода в статье.