@tomaszjarosz/react-visualizers 0.4.10 → 0.4.12

package/dist/index.cjs

@@ -4440,7 +4440,7 @@ const DPVisualizerComponent = ({
           ] })
         ] })
       ] }),
-      currentI > 0 && currentW > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-white rounded-lg border-2 border-purple-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-white rounded-lg border-2 border-purple-300 min-h-[76px]", children: currentI > 0 && currentW > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-purple-800 mb-2", children: [
           "Current: dp[",
           currentI,
@@ -4462,7 +4462,7 @@ const DPVisualizerComponent = ({
           ] }),
           decision && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-3 py-1 rounded-full font-bold ${decision === "take" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: decision === "take" ? "✓ TAKE" : "✗ SKIP" })
         ] })
-      ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-purple-400 italic text-center py-2", children: "Current cell calculation will appear here..." }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-40", children: [
@@ -18027,7 +18027,7 @@ const BloomFilterVisualizerComponent = ({
         "]"
       ] }, idx)) })
     ] }),
-    stepData.element && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200 min-h-[44px]", children: stepData.element ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "Element: " }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono font-bold text-purple-600", children: [
         '"',
@@ -18042,8 +18042,8 @@ const BloomFilterVisualizerComponent = ({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-bold text-pink-600", children: stepData.hashIndex })
       ] })
-    ] }) }),
-    stepData.operation === "init" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-indigo-50 rounded-lg border border-indigo-200", children: [
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-400 italic", children: "Current operation will appear here..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-indigo-50 rounded-lg border border-indigo-200 min-h-[76px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium text-indigo-800 mb-2", children: [
         "Hash Functions (k=",
         NUM_HASH_FUNCTIONS,
@@ -18499,11 +18499,11 @@ const BTreeVisualizerComponent = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Empty tree" }) }),
-    targetKey !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200 min-h-[44px]", children: targetKey !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "Target key: " }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-bold text-emerald-600", children: targetKey })
-    ] }) }),
-    splitInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200", children: [
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-400 italic", children: "Target key will appear here..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200 min-h-[76px]", children: splitInfo ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-purple-800 mb-1", children: "Node Split" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-purple-700 font-mono", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -18522,7 +18522,7 @@ const BTreeVisualizerComponent = ({
           "]"
         ] })
       ] })
-    ] }),
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-purple-400 italic text-center py-2", children: "Split info will appear here when node overflows..." }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-2 bg-blue-50 rounded-lg border border-blue-200", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-blue-800 mb-1", children: "Operations" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-blue-700 font-mono", children: OPERATIONS$4.map((op, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2", children: [
@@ -20777,13 +20777,13 @@ const ConsistentHashingVisualizerComponent = ({
       },
       server
     )) }),
-    dataKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto min-h-[100px]", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-gray-100", children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Key" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Hash (°)" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Server" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: dataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: dataKeys.length > 0 ? dataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
         "tr",
         {
           className: `
@@ -20809,7 +20809,7 @@ const ConsistentHashingVisualizerComponent = ({
           ]
         },
         key.key
-      )) })
+      )) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 3, className: "px-2 py-4 text-center text-gray-400 italic", children: "No keys added yet..." }) }) })
     ] }) })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(