@tomaszjarosz/react-visualizers 0.4.9 → 0.4.11

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: [
@@ -7823,7 +7823,7 @@ const TreeSetInterviewVisualizerComponent = ({
       /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-white px-2 py-0.5 rounded", children: "left < node < right" })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: tree ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "300", height: "250", className: "mx-auto", children: renderTree(tree) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-32 flex items-center justify-center text-gray-400 text-sm", children: "Empty tree" }) }) }),
-    path.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg min-h-[44px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600", children: path.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Path:" }),
       " ",
       path.map((v, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
@@ -7836,7 +7836,7 @@ const TreeSetInterviewVisualizerComponent = ({
           }
         )
       ] }, idx))
-    ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Path will appear here..." }) }) })
   ] });
   const sidePanel = mode === "interview" ? /* @__PURE__ */ jsxRuntime.jsx(
     InterviewModePanel,
@@ -8135,13 +8135,13 @@ const SortingInterviewVisualizerComponent = ({
         "]"
       ] })
     ] }, index)) }) }),
-    pivot !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-purple-800", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200 min-h-[44px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-purple-800", children: pivot !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Pivot:" }),
       " ",
       array[pivot],
       " at index ",
       pivot
-    ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-400 italic", children: "Pivot will be selected..." }) }) })
   ] });
   const modeToggle = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 bg-gray-200 rounded-lg p-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -8940,15 +8940,15 @@ const BloomFilterInterviewVisualizerComponent = ({
         );
       }) })
     ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `mb-4 p-3 rounded-lg border ${result === "probably_yes" ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`,
+        className: `mb-4 p-3 rounded-lg border min-h-[44px] ${result === "probably_yes" ? "bg-amber-50 border-amber-200" : result === "definitely_no" ? "bg-green-50 border-green-200" : "bg-gray-50 border-gray-200"}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: `text-sm font-medium text-center ${result === "probably_yes" ? "text-amber-800" : "text-green-800"}`,
-            children: result === "probably_yes" ? "⚠️ Probably in set (could be false positive)" : "✓ Definitely NOT in set"
+            className: `text-sm font-medium text-center ${result === "probably_yes" ? "text-amber-800" : result === "definitely_no" ? "text-green-800" : "text-gray-400 italic"}`,
+            children: result === "probably_yes" ? "⚠️ Probably in set (could be false positive)" : result === "definitely_no" ? "✓ Definitely NOT in set" : "Query result will appear here..."
           }
         )
       }
@@ -10191,7 +10191,7 @@ const DPInterviewVisualizerComponent = ({
         row.map((cell, w) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: `p-1 text-center rounded ${getCellStyle(i, w)}`, children: cell }, w))
       ] }, i)) })
     ] }) }),
-    currentI > 0 && currentW > 0 && decision && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-3 py-1 rounded-full font-bold text-sm ${decision === "take" ? "bg-green-100 text-green-700" : "bg-amber-100 text-amber-700"}`, children: decision === "take" ? "✓ TAKE" : "✗ SKIP" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-center min-h-[32px] flex items-center justify-center", children: currentI > 0 && currentW > 0 && decision ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-3 py-1 rounded-full font-bold text-sm ${decision === "take" ? "bg-green-100 text-green-700" : "bg-amber-100 text-amber-700"}`, children: decision === "take" ? "✓ TAKE" : "✗ SKIP" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 text-xs italic", children: "Decision will appear here..." }) })
   ] });
   const modeToggle = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 bg-gray-200 rounded-lg p-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -10618,13 +10618,13 @@ const ConsistentHashingInterviewVisualizerComponent = ({
       },
       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: `${highlightKey === key.key ? "bg-yellow-100" : ""} ${(movingKeys == null ? void 0 : movingKeys.includes(key.key)) ? "bg-red-100" : ""}`,
@@ -10638,7 +10638,7 @@ const ConsistentHashingInterviewVisualizerComponent = ({
           ]
         },
         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: "Keys will be added here..." }) }) })
     ] }) })
   ] });
   const modeToggle = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 bg-gray-200 rounded-lg p-0.5", children: [
@@ -11068,10 +11068,10 @@ const RaftInterviewVisualizerComponent = ({
         ] }, node.id);
       })
     ] }) }),
-    stepData.messageType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-center min-h-[32px] flex items-center justify-center", children: stepData.messageType ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium", children: [
       "📨 ",
       stepData.messageType
-    ] }) }),
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 text-xs italic", children: "Message type will appear here..." }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto", 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: "Node" }),
@@ -11561,11 +11561,11 @@ const TrieInterviewVisualizerComponent = ({
         depth: 0
       }
     ) }),
-    stepData.matchedWords && stepData.matchedWords.length > 0 && stepData.operation !== "done" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 p-2 bg-purple-50 rounded border border-purple-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-purple-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 p-2 rounded border min-h-[36px] flex items-center justify-center bg-purple-50 border-purple-200", children: stepData.matchedWords && stepData.matchedWords.length > 0 && stepData.operation !== "done" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-purple-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Found:" }),
       " ",
       stepData.matchedWords.join(", ")
-    ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-400 text-xs italic", children: "Matched words will appear here..." }) })
   ] });
   const modeToggle = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 bg-gray-200 rounded-lg p-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -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,
@@ -21452,7 +21452,7 @@ function generateGCSteps() {
     variables: { edenUsed: eden.length },
     activeSurvivor
   });
-  for (let gc = 0; gc < 2; gc++) {
+  for (let gc = 0; gc < 4; gc++) {
     steps.push({
       operation: "minor_gc",
       objects: objects.map((o) => ({ ...o })),
@@ -21517,12 +21517,27 @@ function generateGCSteps() {
       activeSurvivor: activeSurvivor === 0 ? 1 : 0
     });
     activeSurvivor = activeSurvivor === 0 ? 1 : 0;
-    if (gc < 1) {
+    if (gc < 3) {
+      const newObjs = [];
       for (let i = 0; i < 3; i++) {
-        const obj = createObject(true);
+        const obj = createObject(gc < 2 ? true : i === 0);
         objects.push(obj);
         eden.push(obj.id);
+        newObjs.push(obj);
       }
+      steps.push({
+        operation: "allocate",
+        objects: objects.map((o) => ({ ...o })),
+        eden: [...eden],
+        survivor0: [...survivor0],
+        survivor1: [...survivor1],
+        old: [...old],
+        description: `Allocated ${newObjs.length} new objects in Eden.`,
+        codeLine: 3,
+        variables: { edenUsed: eden.length },
+        highlightObjects: newObjs.map((o) => o.id),
+        activeSurvivor
+      });
     }
   }
   const oldObjs = objects.filter((o) => old.includes(o.id));