Search code examples
memgraphdb

How to display “count”/”avg” as graph results in Memgraph Lab?

Is there any way to show “count” results on graph, eg. number of Tweets of a “hashtag” by “platform”?:

“#memgraph” (Hashtag)
├─ “Desktop”
│ ├─ “123” (Count)
├─ “IOS”
│ ├─ 234 (Count)
├─ “Android”
│ ├─ 345 (Count)

It would be great if the graph could be styled, e.g. display the “circle” by different sizes.

I am aware we can get the results as “Data Result”, just wondering if there is a way to plot it as a “Graph” via “Lab”.

Solution

  • Currently, Lab can’t read data table view with primitives (not edges, nodes, or paths) and present it as a graph. But, you can still make your tabular data results returned as something that Lab can render. The lab is looking for something that looks like a node, edge, or path object.

    I’ve created several nodes to have a similar structure as you do:

    CREATE (:Tweet { hashtag: "#memgraph", platform: "Desktop" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "Desktop" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "Desktop" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "Desktop" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "IOS" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "IOS" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "Android" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "Android" });
CREATE (:Tweet { hashtag: "#memgraph", platform: "Android" });

    You are probably running something like this:

    MATCH (n:Tweet { hashtag: "#memgraph" })
RETURN n.hashtag as hashtag, n.platform as platform, count(n) as cnt

    So what you want is to return an object (map) that must have the following keys: id, type = "node", labels and properties (imitate a node):

    MATCH (n:Tweet { hashtag: "#memgraph" })
WITH n.hashtag as hashtag, n.platform as platform, count(n) as cnt
return {
  id: counter('node', 1),
  type: "node",
  labels: ['Platform'],
  properties: { platform: platform, count: cnt }
};

    For the above query, Lab will show 3 nodes. If you wish to create an edge connecting those three nodes with a single Tag node (e.g. #memgraph), you can do that too. A query is a little bit more complex, but here it is:

    MATCH (n:Tweet { hashtag: "#memgraph" })
WITH n.hashtag as hashtag, n.platform as platform, count(n) as cnt
WITH
  { id: 0, type: "node", labels: ['Tag'], properties: { hashtag: hashtag }} as hashtag_node,
  { id: counter('node', 1), type: "node", labels: ['Platform'], properties: { platform: platform, count: cnt }} as node
RETURN [
  hashtag_node,
  { id: counter('edge', 0), type: "relationship", start: hashtag_node.id, end: node.id, label: 'CONTAINS' },
  nod

    In the above query, a hashtag node is created that is connected with a simulation of an edge with the platform nodes. As you can see, the imitation of the edge must have id, type = "relationship", start , end and label.

    Switch over to the “Graph Style Editor” in the tab and you can style your graph. Change the size, label, even images depending on the node properties. Here is a snippet I’ve used:

       @NodeStyle {
  size: 6
  color: #999999
  border-width: 0.2
  border-color: #FFFFFF
  font-size: 3
}

@NodeStyle HasProperty(node, "hashtag") {
  label: Property(node, "hashtag")
}

@NodeStyle And(HasProperty(node, "platform"), HasProperty(node, "count")) {
  label: Format("{}\n({})", Property(node, "platform"), Property(node, "count"))
}

@NodeStyle HasProperty(node, "count") {
  size: Div(Property(node, "count"), 50)
}

@NodeStyle Equals(Property(node, "platform"), "Android") {
  image-url: "https://img.freepik.com/free-icon/android_318-432122.jpg"
}

@NodeStyle Equals(Property(node, "platform"), "IOS") {
  image-url: "https://img.freepik.com/free-icon/apple_318-631418.jpg"
}

@NodeStyle Equals(Property(node, "platform"), "Desktop") {
  image-url: "https://img.freepik.com/premium-photo/3d-white-computer-laptop-blue-background-3d-render-illustration_73903-1277.jpg?w=2000"
}

@EdgeStyle {
  color: #999999
  color-hover: #1d1d1d
  color-selected: #1d1d1d
  width: 0.3
  width-hover: 0.9
  width-selected: 0.9
  font-size: 3
}

    Depending on the total count you have, you might want to change the number 50 in Div(Property(node, "count"), 50) because a size of 345 is a huge one, so we want to lower that to some reasonable size numbers. Along with that you can see how custom images are added depending on the property value platform.