@tomaszjarosz/react-visualizers 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -3240,7 +3240,58 @@ const DijkstraVisualizerComponent = ({
           ] })
         ] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-4 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 500, className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border-2 border-orange-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-orange-800 mb-3", children: "Distance Array (shortest paths from node 0)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: distances.map((dist, idx) => {
+                const isSource = idx === 0;
+                const isCurrent = idx === current;
+                const isVisited = visited.includes(idx);
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: `flex flex-col items-center p-2 rounded-lg border-2 min-w-[60px] transition-colors ${isCurrent ? "bg-yellow-100 border-yellow-400 ring-2 ring-yellow-300" : isVisited ? "bg-green-100 border-green-400" : "bg-white border-gray-300"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-xs font-medium ${isCurrent ? "text-yellow-800" : isVisited ? "text-green-800" : "text-gray-500"}`, children: [
+                        "Node ",
+                        idx,
+                        isSource && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: "(src)" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-xl font-bold font-mono ${isCurrent ? "text-yellow-900" : isVisited ? "text-green-900" : "text-gray-700"}`, children: dist === Infinity ? "∞" : dist }),
+                      isCurrent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-yellow-700 font-bold", children: "← PROCESSING" }),
+                      isVisited && !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-green-600", children: "✓ Final" })
+                    ]
+                  },
+                  idx
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blue-800 mb-2", children: "Relaxation Formula" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm text-center", children: [
+                "if dist[u] + weight(u,v) < dist[v] → ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600 font-bold", children: "update dist[v]" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 rounded-lg border border-orange-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-orange-800", children: "Priority Queue (min-heap)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-orange-600", children: "(node:distance)" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: priorityQueue.length > 0 ? priorityQueue.sort((a, b) => a.dist - b.dist).map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: `px-3 py-1.5 rounded-lg font-mono text-sm font-medium ${index === 0 ? "bg-orange-200 text-orange-900 ring-2 ring-orange-400" : "bg-white text-orange-800 border border-orange-300"}`,
+                  children: [
+                    item.node,
+                    ":",
+                    item.dist,
+                    index === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs", children: "← MIN" })
+                  ]
+                },
+                index
+              )) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400 italic", children: "empty" }) })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 420 300", className: "w-full h-64 md:h-72", children: [
               graph.edges.map((edge, index) => {
                 const fromNode = graph.nodes[edge.from];
@@ -3310,7 +3361,7 @@ const DijkstraVisualizerComponent = ({
                     cx: node.x,
                     cy: node.y,
                     r: 22,
-                    className: `${getNodeColor(node.id)} stroke-2 transition-all duration-300`
+                    className: `${getNodeColor(node.id)} stroke-2 transition-colors duration-300`
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -3325,38 +3376,6 @@ const DijkstraVisualizerComponent = ({
                 )
               ] }, node.id))
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: "Dist:" }),
-                distances.map((dist, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: `px-2 py-0.5 text-xs font-mono rounded ${idx === current ? "bg-yellow-200 text-yellow-900" : visited.includes(idx) ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-600"}`,
-                    children: [
-                      idx,
-                      ":",
-                      dist === Infinity ? "∞" : dist
-                    ]
-                  },
-                  idx
-                ))
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: "PQ:" }),
-                priorityQueue.length > 0 ? priorityQueue.sort((a, b) => a.dist - b.dist).map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: "px-2 py-0.5 bg-orange-100 text-orange-800 text-xs rounded font-mono",
-                    children: [
-                      item.node,
-                      ":",
-                      item.dist
-                    ]
-                  },
-                  index
-                )) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "empty" })
-              ] })
-            ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
               StatusPanel,
               {
@@ -3512,7 +3531,7 @@ const DPVisualizerComponent = ({
   showCode = true,
   className = ""
 }) => {
-  var _a;
+  var _a, _b, _c;
   const [items] = React.useState(DEFAULT_ITEMS);
   const [capacity] = React.useState(DEFAULT_CAPACITY);
   const [speed, setSpeed] = React.useState(25);
@@ -3636,33 +3655,83 @@ const DPVisualizerComponent = ({
           ] })
         ] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 450, className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl border-2 border-teal-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-teal-800 mb-3", children: "DP Recurrence Formula" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-teal-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 mb-2", children: [
+                  "dp[i][w] = max(",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-600 font-bold", children: " skip" }),
+                  ",",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600 font-bold", children: " take" }),
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 text-xs mt-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-yellow-50 p-2 rounded border border-yellow-200", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-700 font-bold", children: "skip" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: " = dp[i-1][w]" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 mt-1", children: "Don't take item i" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-50 p-2 rounded border border-green-200", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-700 font-bold", children: "take" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: " = dp[i-1][w-weight] + value" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 mt-1", children: "Take item i" })
+                  ] })
+                ] })
+              ] }),
+              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.jsxs("div", { className: "text-sm font-semibold text-purple-800 mb-2", children: [
+                  "Current: dp[",
+                  currentI,
+                  "][",
+                  currentW,
+                  "]"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600", children: [
+                    "Item ",
+                    currentI,
+                    ": ",
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                      "w=",
+                      (_b = items[currentI - 1]) == null ? void 0 : _b.weight,
+                      ", v=",
+                      (_c = items[currentI - 1]) == null ? void 0 : _c.value
+                    ] })
+                  ] }),
+                  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.jsxs("div", { className: "flex gap-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-36", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-40", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items (i = item index):" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: `px-2 py-1 rounded text-xs ${idx + 1 === currentI ? "bg-purple-100 text-purple-800 font-medium" : idx + 1 < currentI ? "bg-blue-50 text-blue-600" : "bg-gray-100 text-gray-500"}`,
+                    className: `px-2 py-1.5 rounded text-xs transition-colors ${idx + 1 === currentI ? "bg-purple-200 text-purple-900 font-bold ring-2 ring-purple-400" : idx + 1 < currentI ? "bg-blue-50 text-blue-600" : "bg-gray-100 text-gray-500"}`,
                     children: [
-                      "Item ",
-                      idx + 1,
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                        "i=",
+                        idx + 1
+                      ] }),
                       ": w=",
                       item.weight,
                       ", v=",
-                      item.value
+                      item.value,
+                      idx + 1 === currentI && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: "← CURRENT" })
                     ]
                   },
                   idx
                 )) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-sm", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "Capacity:" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-sm p-2 bg-gray-100 rounded", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "Max Capacity:" }),
                   " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900", children: capacity })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 font-mono", children: capacity })
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-x-auto", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table (w = current capacity):" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "text-xs border-collapse", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("th", { className: "w-8 p-1 text-gray-500 font-normal", children: "i\\w" }),