@truedat/dd 8.12.11 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.12.11",
+  "version": "8.13.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.12.11",
+    "@truedat/test": "8.13.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -90,5 +90,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "48671e0f1467f7713019ab8d729818c741fa9bc7"
+  "gitHead": "b9d1c2133cea6293e6a5ce5d198a4cd49133b4c1"
 }

package/src/components/LineageGraph.js

@@ -1549,6 +1549,8 @@ export const LineageGraph = ({
               />
             </EdgeHoverContext.Provider>
           </div>
+        ) : loading ? (
+          <div className="lineage-graph__empty" />
         ) : (
           <LineageGraphEmptyState />
         )}

package/src/styles/LineageGraph.less

@@ -3647,28 +3647,96 @@ button.lineage-graph__dock-context-reopen {
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    transition: width 200ms ease;
-  }
-
-  .td-graph-minimap-shell--collapsed {
-    width: 200px;
+    box-sizing: content-box;
+    transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   .td-graph-minimap-shell--expanded {
-    width: auto;
-    min-width: 288px;
+    width: 288px;
   }
 
   .td-graph-minimap-body {
     position: relative;
     width: 100%;
+    height: 150px;
+    overflow: hidden;
+    opacity: 1;
+    transition:
+      height 220ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 160ms ease;
+  }
+
+  .td-graph-minimap-shell--expanded .td-graph-minimap-body {
+    height: 200px;
+  }
+
+  .td-graph-minimap-shell--collapsed {
+    width: 200px;
+
+    .td-graph-minimap-body {
+      height: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  .td-graph-minimap {
+    transition:
+      width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+      height 220ms cubic-bezier(0.22, 1, 0.36, 1);
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .td-graph-minimap-shell,
+    .td-graph-minimap-body,
+    .td-graph-minimap {
+      transition: none;
+    }
   }
 
   .td-graph-minimap-expand {
-    display: none;
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    z-index: 2;
+    display: inline-flex;
+    width: 22px;
+    height: 22px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid rgba(15, 23, 42, 0.12);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.88);
+    color: #64748b;
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    transition:
+      background-color 120ms ease,
+      color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .td-graph-minimap-expand:hover {
+    background: rgba(255, 255, 255, 0.98);
+    border-color: #002057;
+    color: #002057;
+  }
+
+  .td-graph-minimap-expand:focus-visible {
+    outline: 2px solid #ed5c17;
+    outline-offset: 2px;
   }
 
   .td-graph-minimap-header {
+    position: relative;
     display: flex;
     height: 32px;
     align-items: center;
@@ -3678,6 +3746,13 @@ button.lineage-graph__dock-context-reopen {
     color: #334155;
   }
 
+  .td-graph-minimap-toggle::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+  }
+
   .td-graph-minimap-title {
     display: inline-flex;
     min-width: 0;