@tomaszjarosz/react-visualizers 0.4.11 → 0.4.12

package/dist/index.js

@@ -18497,11 +18497,11 @@ const BTreeVisualizerComponent = ({
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200 min-h-[150px] flex items-center justify-center", children: nodes.size > 0 ? renderNode(rootId) : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Empty tree" }) }),
-    targetKey !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200 min-h-[44px]", children: targetKey !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
       /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "Target key: " }),
       /* @__PURE__ */ jsx("span", { className: "font-mono font-bold text-emerald-600", children: targetKey })
-    ] }) }),
-    splitInfo && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200", children: [
+    ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-400 italic", children: "Target key will appear here..." }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200 min-h-[76px]", children: splitInfo ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-purple-800 mb-1", children: "Node Split" }),
       /* @__PURE__ */ jsxs("div", { className: "text-xs text-purple-700 font-mono", children: [
         /* @__PURE__ */ jsxs("div", { children: [
@@ -18520,7 +18520,7 @@ const BTreeVisualizerComponent = ({
           "]"
         ] })
       ] })
-    ] }),
+    ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-purple-400 italic text-center py-2", children: "Split info will appear here when node overflows..." }) }),
     /* @__PURE__ */ jsxs("div", { className: "mb-4 p-2 bg-blue-50 rounded-lg border border-blue-200", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-blue-800 mb-1", children: "Operations" }),
       /* @__PURE__ */ jsx("div", { className: "text-xs text-blue-700 font-mono", children: OPERATIONS$4.map((op, i) => /* @__PURE__ */ jsxs("span", { className: "mr-2", children: [
@@ -20775,13 +20775,13 @@ const ConsistentHashingVisualizerComponent = ({
       },
       server
     )) }),
-    dataKeys.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-4 overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 overflow-x-auto min-h-[100px]", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-100", children: [
         /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left", children: "Key" }),
         /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left", children: "Hash (°)" }),
         /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left", children: "Server" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: dataKeys.map((key) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("tbody", { children: dataKeys.length > 0 ? dataKeys.map((key) => /* @__PURE__ */ jsxs(
         "tr",
         {
           className: `
@@ -20807,7 +20807,7 @@ const ConsistentHashingVisualizerComponent = ({
           ]
         },
         key.key
-      )) })
+      )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 3, className: "px-2 py-4 text-center text-gray-400 italic", children: "No keys added yet..." }) }) })
     ] }) })
   ] });
   return /* @__PURE__ */ jsx(