@tomaszjarosz/react-visualizers 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +115 -46
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +115 -46
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3238,7 +3238,58 @@ const DijkstraVisualizerComponent = ({
|
|
|
3238
3238
|
] })
|
|
3239
3239
|
] }) }) }),
|
|
3240
3240
|
/* @__PURE__ */ jsx("div", { className: "p-4 overflow-x-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4 min-w-0", children: [
|
|
3241
|
-
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight:
|
|
3241
|
+
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 500, className: "flex-1 min-w-0", children: [
|
|
3242
|
+
/* @__PURE__ */ 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: [
|
|
3243
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-orange-800 mb-3", children: "Distance Array (shortest paths from node 0)" }),
|
|
3244
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: distances.map((dist, idx) => {
|
|
3245
|
+
const isSource = idx === 0;
|
|
3246
|
+
const isCurrent = idx === current;
|
|
3247
|
+
const isVisited = visited.includes(idx);
|
|
3248
|
+
return /* @__PURE__ */ jsxs(
|
|
3249
|
+
"div",
|
|
3250
|
+
{
|
|
3251
|
+
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"}`,
|
|
3252
|
+
children: [
|
|
3253
|
+
/* @__PURE__ */ jsxs("div", { className: `text-xs font-medium ${isCurrent ? "text-yellow-800" : isVisited ? "text-green-800" : "text-gray-500"}`, children: [
|
|
3254
|
+
"Node ",
|
|
3255
|
+
idx,
|
|
3256
|
+
isSource && /* @__PURE__ */ jsx("span", { className: "ml-1", children: "(src)" })
|
|
3257
|
+
] }),
|
|
3258
|
+
/* @__PURE__ */ jsx("div", { className: `text-xl font-bold font-mono ${isCurrent ? "text-yellow-900" : isVisited ? "text-green-900" : "text-gray-700"}`, children: dist === Infinity ? "∞" : dist }),
|
|
3259
|
+
isCurrent && /* @__PURE__ */ jsx("div", { className: "text-xs text-yellow-700 font-bold", children: "← PROCESSING" }),
|
|
3260
|
+
isVisited && !isCurrent && /* @__PURE__ */ jsx("div", { className: "text-xs text-green-600", children: "✓ Final" })
|
|
3261
|
+
]
|
|
3262
|
+
},
|
|
3263
|
+
idx
|
|
3264
|
+
);
|
|
3265
|
+
}) })
|
|
3266
|
+
] }),
|
|
3267
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200", children: [
|
|
3268
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-blue-800 mb-2", children: "Relaxation Formula" }),
|
|
3269
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm text-center", children: [
|
|
3270
|
+
"if dist[u] + weight(u,v) < dist[v] → ",
|
|
3271
|
+
/* @__PURE__ */ jsx("span", { className: "text-green-600 font-bold", children: "update dist[v]" })
|
|
3272
|
+
] })
|
|
3273
|
+
] }),
|
|
3274
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-orange-50 rounded-lg border border-orange-200", children: [
|
|
3275
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
|
|
3276
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-orange-800", children: "Priority Queue (min-heap)" }),
|
|
3277
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs text-orange-600", children: "(node:distance)" })
|
|
3278
|
+
] }),
|
|
3279
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: priorityQueue.length > 0 ? priorityQueue.sort((a, b) => a.dist - b.dist).map((item, index) => /* @__PURE__ */ jsxs(
|
|
3280
|
+
"span",
|
|
3281
|
+
{
|
|
3282
|
+
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"}`,
|
|
3283
|
+
children: [
|
|
3284
|
+
item.node,
|
|
3285
|
+
":",
|
|
3286
|
+
item.dist,
|
|
3287
|
+
index === 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs", children: "← MIN" })
|
|
3288
|
+
]
|
|
3289
|
+
},
|
|
3290
|
+
index
|
|
3291
|
+
)) : /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-400 italic", children: "empty" }) })
|
|
3292
|
+
] }),
|
|
3242
3293
|
/* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 420 300", className: "w-full h-64 md:h-72", children: [
|
|
3243
3294
|
graph.edges.map((edge, index) => {
|
|
3244
3295
|
const fromNode = graph.nodes[edge.from];
|
|
@@ -3308,7 +3359,7 @@ const DijkstraVisualizerComponent = ({
|
|
|
3308
3359
|
cx: node.x,
|
|
3309
3360
|
cy: node.y,
|
|
3310
3361
|
r: 22,
|
|
3311
|
-
className: `${getNodeColor(node.id)} stroke-2 transition-
|
|
3362
|
+
className: `${getNodeColor(node.id)} stroke-2 transition-colors duration-300`
|
|
3312
3363
|
}
|
|
3313
3364
|
),
|
|
3314
3365
|
/* @__PURE__ */ jsx(
|
|
@@ -3323,38 +3374,6 @@ const DijkstraVisualizerComponent = ({
|
|
|
3323
3374
|
)
|
|
3324
3375
|
] }, node.id))
|
|
3325
3376
|
] }) }),
|
|
3326
|
-
/* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-3", children: [
|
|
3327
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
3328
|
-
/* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: "Dist:" }),
|
|
3329
|
-
distances.map((dist, idx) => /* @__PURE__ */ jsxs(
|
|
3330
|
-
"span",
|
|
3331
|
-
{
|
|
3332
|
-
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"}`,
|
|
3333
|
-
children: [
|
|
3334
|
-
idx,
|
|
3335
|
-
":",
|
|
3336
|
-
dist === Infinity ? "∞" : dist
|
|
3337
|
-
]
|
|
3338
|
-
},
|
|
3339
|
-
idx
|
|
3340
|
-
))
|
|
3341
|
-
] }),
|
|
3342
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
3343
|
-
/* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: "PQ:" }),
|
|
3344
|
-
priorityQueue.length > 0 ? priorityQueue.sort((a, b) => a.dist - b.dist).map((item, index) => /* @__PURE__ */ jsxs(
|
|
3345
|
-
"span",
|
|
3346
|
-
{
|
|
3347
|
-
className: "px-2 py-0.5 bg-orange-100 text-orange-800 text-xs rounded font-mono",
|
|
3348
|
-
children: [
|
|
3349
|
-
item.node,
|
|
3350
|
-
":",
|
|
3351
|
-
item.dist
|
|
3352
|
-
]
|
|
3353
|
-
},
|
|
3354
|
-
index
|
|
3355
|
-
)) : /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "empty" })
|
|
3356
|
-
] })
|
|
3357
|
-
] }),
|
|
3358
3377
|
/* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
|
|
3359
3378
|
StatusPanel,
|
|
3360
3379
|
{
|
|
@@ -3510,7 +3529,7 @@ const DPVisualizerComponent = ({
|
|
|
3510
3529
|
showCode = true,
|
|
3511
3530
|
className = ""
|
|
3512
3531
|
}) => {
|
|
3513
|
-
var _a;
|
|
3532
|
+
var _a, _b, _c;
|
|
3514
3533
|
const [items] = useState(DEFAULT_ITEMS);
|
|
3515
3534
|
const [capacity] = useState(DEFAULT_CAPACITY);
|
|
3516
3535
|
const [speed, setSpeed] = useState(25);
|
|
@@ -3634,33 +3653,83 @@ const DPVisualizerComponent = ({
|
|
|
3634
3653
|
] })
|
|
3635
3654
|
] }) }) }),
|
|
3636
3655
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
3637
|
-
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight:
|
|
3656
|
+
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 450, className: "flex-1 min-w-0", children: [
|
|
3657
|
+
/* @__PURE__ */ 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: [
|
|
3658
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-teal-800 mb-3", children: "DP Recurrence Formula" }),
|
|
3659
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-teal-200", children: [
|
|
3660
|
+
/* @__PURE__ */ jsxs("div", { className: "text-gray-600 mb-2", children: [
|
|
3661
|
+
"dp[i][w] = max(",
|
|
3662
|
+
/* @__PURE__ */ jsx("span", { className: "text-yellow-600 font-bold", children: " skip" }),
|
|
3663
|
+
",",
|
|
3664
|
+
/* @__PURE__ */ jsx("span", { className: "text-green-600 font-bold", children: " take" }),
|
|
3665
|
+
")"
|
|
3666
|
+
] }),
|
|
3667
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-xs mt-3", children: [
|
|
3668
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-yellow-50 p-2 rounded border border-yellow-200", children: [
|
|
3669
|
+
/* @__PURE__ */ jsx("span", { className: "text-yellow-700 font-bold", children: "skip" }),
|
|
3670
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: " = dp[i-1][w]" }),
|
|
3671
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-500 mt-1", children: "Don't take item i" })
|
|
3672
|
+
] }),
|
|
3673
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-green-50 p-2 rounded border border-green-200", children: [
|
|
3674
|
+
/* @__PURE__ */ jsx("span", { className: "text-green-700 font-bold", children: "take" }),
|
|
3675
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: " = dp[i-1][w-weight] + value" }),
|
|
3676
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-500 mt-1", children: "Take item i" })
|
|
3677
|
+
] })
|
|
3678
|
+
] })
|
|
3679
|
+
] }),
|
|
3680
|
+
currentI > 0 && currentW > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-white rounded-lg border-2 border-purple-300", children: [
|
|
3681
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-purple-800 mb-2", children: [
|
|
3682
|
+
"Current: dp[",
|
|
3683
|
+
currentI,
|
|
3684
|
+
"][",
|
|
3685
|
+
currentW,
|
|
3686
|
+
"]"
|
|
3687
|
+
] }),
|
|
3688
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
|
|
3689
|
+
/* @__PURE__ */ jsxs("div", { className: "text-gray-600", children: [
|
|
3690
|
+
"Item ",
|
|
3691
|
+
currentI,
|
|
3692
|
+
": ",
|
|
3693
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
3694
|
+
"w=",
|
|
3695
|
+
(_b = items[currentI - 1]) == null ? void 0 : _b.weight,
|
|
3696
|
+
", v=",
|
|
3697
|
+
(_c = items[currentI - 1]) == null ? void 0 : _c.value
|
|
3698
|
+
] })
|
|
3699
|
+
] }),
|
|
3700
|
+
decision && /* @__PURE__ */ 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" })
|
|
3701
|
+
] })
|
|
3702
|
+
] })
|
|
3703
|
+
] }),
|
|
3638
3704
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
|
|
3639
|
-
/* @__PURE__ */ jsxs("div", { className: "w-
|
|
3640
|
-
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items:" }),
|
|
3705
|
+
/* @__PURE__ */ jsxs("div", { className: "w-40", children: [
|
|
3706
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items (i = item index):" }),
|
|
3641
3707
|
/* @__PURE__ */ jsx("div", { className: "space-y-1", children: items.map((item, idx) => /* @__PURE__ */ jsxs(
|
|
3642
3708
|
"div",
|
|
3643
3709
|
{
|
|
3644
|
-
className: `px-2 py-1 rounded text-xs ${idx + 1 === currentI ? "bg-purple-
|
|
3710
|
+
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"}`,
|
|
3645
3711
|
children: [
|
|
3646
|
-
"
|
|
3647
|
-
|
|
3712
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
3713
|
+
"i=",
|
|
3714
|
+
idx + 1
|
|
3715
|
+
] }),
|
|
3648
3716
|
": w=",
|
|
3649
3717
|
item.weight,
|
|
3650
3718
|
", v=",
|
|
3651
|
-
item.value
|
|
3719
|
+
item.value,
|
|
3720
|
+
idx + 1 === currentI && /* @__PURE__ */ jsx("span", { className: "ml-1", children: "← CURRENT" })
|
|
3652
3721
|
]
|
|
3653
3722
|
},
|
|
3654
3723
|
idx
|
|
3655
3724
|
)) }),
|
|
3656
|
-
/* @__PURE__ */ jsxs("div", { className: "mt-3 text-sm", children: [
|
|
3657
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Capacity:" }),
|
|
3725
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-3 text-sm p-2 bg-gray-100 rounded", children: [
|
|
3726
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Max Capacity:" }),
|
|
3658
3727
|
" ",
|
|
3659
|
-
/* @__PURE__ */ jsx("span", { className: "text-gray-900", children: capacity })
|
|
3728
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 font-mono", children: capacity })
|
|
3660
3729
|
] })
|
|
3661
3730
|
] }),
|
|
3662
3731
|
/* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-x-auto", children: [
|
|
3663
|
-
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table:" }),
|
|
3732
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table (w = current capacity):" }),
|
|
3664
3733
|
/* @__PURE__ */ jsxs("table", { className: "text-xs border-collapse", children: [
|
|
3665
3734
|
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
3666
3735
|
/* @__PURE__ */ jsx("th", { className: "w-8 p-1 text-gray-500 font-normal", children: "i\\w" }),
|