Improve Topology UX

client/idm/console/src/main/java/org/apache/syncope/client/console/topology/Topology.java

@@ -197,6 +197,26 @@ public void onClick(final AjaxRequestTarget target, final Serializable ignore) {
             }
         }, ActionLink.ActionType.ZOOM_OUT, IdMEntitlement.CONNECTOR_LIST).disableIndicator().hideLabel();
 
+        zoomActionPanel.add(new ActionLink<>() {
+
+            private static final long serialVersionUID = -3722207913631435501L;
+
+            @Override
+            public void onClick(final AjaxRequestTarget target, final Serializable ignore) {
+                target.appendJavaScript("autoLayoutTree({ centerInView: false });");
+            }
+        }, ActionLink.ActionType.AUTO_LAYOUT, IdMEntitlement.CONNECTOR_LIST).disableIndicator().hideLabel();
+
+        zoomActionPanel.add(new ActionLink<>() {
+
+            private static final long serialVersionUID = -3722207913631435501L;
+
+            @Override
+            public void onClick(final AjaxRequestTarget target, final Serializable ignore) {
+                target.appendJavaScript("recenterToTree();");
+            }
+        }, ActionLink.ActionType.RECENTER, IdMEntitlement.CONNECTOR_LIST).disableIndicator().hideLabel();
+
         body.add(zoomActionPanel);
         // -----------------------------------------
 
@@ -464,6 +484,10 @@ public void renderHead(final Component component, final IHeaderResponse response
                 jsPlumbConf.append(String.format(Locale.US, "activate(%.2f);", 0.68f));
 
                 createConnections(connections).forEach(jsPlumbConf::append);
+                // Apply the tree layout on first load (when no saved node positions exist yet).
+                jsPlumbConf.append("var __topo=getTopology();var __hasPos=false;"
+                        + "for(var __k in __topo){if(__k!=='__zoom__'){__hasPos=true;break;}}"
+                        + "if(!__hasPos){autoLayoutTree({ centerInView: false });}");
 
                 response.render(OnDomReadyHeaderItem.forScript(jsPlumbConf.toString()));
             }

client/idm/console/src/main/resources/META-INF/resources/css/idmTopology.scss

@@ -17,3 +17,127 @@
  * under the License.
  */
 
+:root {
+  --topology-node-border: rgba(15, 23, 42, 0.14);
+  --topology-node-shadow: 0 10px 28px rgba(2, 6, 23, 0.10);
+  --topology-node-shadow-hover: 0 14px 34px rgba(2, 6, 23, 0.14);
+
+  --topology-toolbar-bg: rgba(255, 255, 255, 0.92);
+  --topology-toolbar-border: rgba(15, 23, 42, 0.10);
+  --topology-toolbar-fg: rgba(15, 23, 42, 0.78);
+  --topology-toolbar-fg-hover: rgba(15, 23, 42, 0.92);
+}
+
+#zoom {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 6px;
+
+  ul.menu {
+    display: flex;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  ul.menu > li {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul.menu > li > a.btn,
+  .topology-toolbar-btn {
+    appearance: none;
+    border: 1px solid var(--topology-toolbar-border);
+    background: var(--topology-toolbar-bg);
+    color: var(--topology-toolbar-fg);
+    border-radius: 999px;
+    padding: 6px 10px;
+    line-height: 1;
+    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.10);
+    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
+  }
+
+  ul.menu > li > a.btn:hover,
+  .topology-toolbar-btn:hover {
+    color: var(--topology-toolbar-fg-hover);
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.14);
+    transform: translateY(-1px);
+    text-decoration: none;
+  }
+
+  ul.menu > li > a.btn:focus,
+  .topology-toolbar-btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25), 0 10px 22px rgba(2, 6, 23, 0.14);
+  }
+
+  ul.menu > li > a.btn i,
+  .topology-toolbar-btn i {
+    font-size: 1.05rem;
+    padding-right: 0;
+  }
+}
+
+#topology {
+  cursor: grab;
+}
+
+#topology.topology-panning {
+  cursor: grabbing;
+}
+
+#drawing .window {
+  opacity: 1;
+  border: 1px solid var(--topology-node-border);
+  box-shadow: var(--topology-node-shadow);
+  border-radius: 14px;
+  width: 200px;
+  min-height: 72px;
+  height: auto;
+  line-height: normal;
+  padding: 10px 12px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#drawing .window:hover {
+  box-shadow: var(--topology-node-shadow);
+}
+
+#drawing .window[data-original-title]:hover::after {
+  content: none !important;
+  display: none !important;
+}
+
+#drawing .window.topology_root {
+  background-color: rgba(22, 163, 74, 0.18);
+}
+
+#drawing .window.topology_cs {
+  background-color: rgba(14, 165, 233, 0.12);
+}
+
+#drawing .window.topology_conn {
+  background-color: rgba(139, 92, 246, 0.10);
+}
+
+#drawing .window.topology_conn_errored {
+  background-color: rgba(244, 63, 94, 0.18);
+}
+
+#drawing .window.topology_res {
+  background-color: rgba(245, 158, 11, 0.14);
+}
+
+#drawing .window p {
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  font-size: 1.25em;
+  line-height: 1.25;
+}