Node shapes

[foot]

Fixes #659.
Fixes #878.
Fixes #826.

[foot]

[foot]

Shapes not finallll..

[tomwilkie]

I love it.

• Is the shape hard coded into the frontend? How do you choose?
• I think we could add a 'shape' and 'group' (bool) field to a node details struct and have the backend send you this if you like?
• The hexagon should be use for k8s, for sure

[foot]

We are dispatching on the tail of the topo's URL (containers|containers-by-name...). pseudo nodes are drawn as circles and theinternet is special cased. [0]

Solutions:

1. Add type: (host|container|app), grouped: (true|false) props to the node data.
2. Add a shape: (circle|square|stacked-circle|cloud) and let the BE choose.

I prefer 1. but if 2. makes more sense we could do that.

[0]

const nodeShapes = {
  'hosts': NodeShapeCircle,
  'containers': NodeShapeHex,
  'containers-by-hostname': stackedShape(NodeShapeHex),
  'containers-by-image': stackedShape(NodeShapeHex),
  'applications': NodeShapeRoundedSquare,
  'applications-by-name': stackedShape(NodeShapeRoundedSquare)
};

function isTheInternet(id) {
  return id === 'theinternet';
}

function getNodeShape({id, pseudo, topologyId}) {
  if (isTheInternet(id)) {
    return NodeShapeCloud;
  } else if (pseudo) {
    return NodeShapeCircle;
  }
  return nodeShapes[topologyId];
}

[paulbellamy]

Don't forget pods and services.

[foot]

Do pods and services exist in the system at the moment?

[paulbellamy]

Yes, but only if connected to a k8s cluster.

[davkal]

Don't forget pods and services.

Maybe the drop shape from the style studies for pods?

And for services maybe a "S" that is a circle? Like

Or maybe that is trying to be too smart

More importantly, we need a fall-back shape that gets applied when developing new topologies. Maybe a non-rounded rect?

[tomwilkie]

I'd prefer if the ui didn't hard code any topology names, as we want the
user to be able to define there own topologies when we add the dsl.

On Monday, 1 February 2016, David notifications@github.com wrote:

Don't forget pods and services.

Maybe the drop shape from the style studies for pods?

And for services maybe a "S" that is a circle? Like
[image: screen shot 2016-02-01 at 12 17 15]
https://cloud.githubusercontent.com/assets/859729/12715989/c9f403ce-c8dd-11e5-8da1-4a499b8f63a7.png
Or maybe that is trying to be too smart

More importantly, we need a fall-back shape that gets applied when
developing new topologies. Maybe a non-rounded rect?

—
Reply to this email directly or view it on GitHub
#884 (comment).

[tomwilkie]

I'll take a stab at adding this to the backend today.

[tomwilkie]

Just wondering if the stacks would look slightly better if the stacked diagonally (vs the current vertical)?

[tomwilkie]

We should also make the uncontained nodes on the containers view a stack of squares, as they are processes...

[errordeveloper]

Very nice!!

[tomwilkie]

Have rebased. Pseudo nodes don't seem to be honouring backend shapes.

[foot]

Yes I think there is some code in there that forces pseudo = circle. Will fix. And review.

[foot]

@davkal LGTM

[foot]

Sooo!

Rational behind the current shapes:

• Apps/processes: Rounded square. Alternatives: Simple Gear, Hexagon
  • Common association now w/ mobile apps etc.
• Containers: Hexagon. Alternatives: Rounded Square
  • npolys have an association w/ the container world thanks to k8s.
  • Squares have harsh sharp edges, rounding them would confuse them with Apps. (We could choose another shape for Apps...).
  • Vertical Hexagon gives visual illusion of a 3D cube
• Hosts: Circle
  • It is the graph super shape. Circles are the base of most graphviz.
  • Host is the super node in the system, nothing beats host, maybe data-center.

[foot]

I mocked up proc:gears and container:squares, unfortunately squares feel very natural as containers.

But cogs are a bit complicated. Hex maybe.

[foot]

Re: diagonal stacks, I think they give too much of a 3D feel to our otherwise very flat UI.

[foot]

Nicer, more subtle cog shape, evokes associations w/ ports/connections i think.

[davkal]

Re diagonal shapes: I'd keep them as top perspective. you could try having the vanishing point on the right (instead of the bottom), like in the detail cards

Re cogs for processes, I think they are overloaded with "system" or "settings" semantics.

[foot]

nice thought re: perspective, will try.

Cool. So initial node shape choices seem like a good starting point for everyone it seems. Maybe we can merge this in and see what complaints come in.

[foot]

I like the gentle perspective!

Vertical feels like looking down onto the topo and makes the highlight shape more natural.

[foot]

@pidster check it out and have a play when you get a chance! Great to get your feedback on this one.

[pidster]

Tom's suggestion for the stacks showing as 1x, 2x and all >2x as 3 layers is a good idea.
An aggregate that indicates multiple but only has one member will be confusing.

[pidster]

The vertical perspective stack looks great.

So, where does it stand now: Processes are squircles, Containers are hexagons (or cogs?) and Hosts are circles? (I tend to agree that cogs now have an association with 'settings').

Are the line weights the same in all of the shapes, or is that just a side-effect of the cog rendering?

[foot]

The variants, in a classic rustic saddle brown.

[davkal]

An aggregate that indicates multiple but only has one member will be confusing.

@foot while I like the gray disks a lot, I concur with @pidster
Could we get rid of the gray ones?