@tomaszjarosz/react-visualizers 0.2.7 → 0.2.10
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/README.md +73 -31
- package/dist/index.cjs +227 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +227 -30
- package/dist/index.js.map +1 -1
- package/package.json +22 -3
package/dist/index.js
CHANGED
|
@@ -1494,11 +1494,64 @@ const BinarySearchVisualizerComponent = ({
|
|
|
1494
1494
|
] }) }),
|
|
1495
1495
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
1496
1496
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
1497
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border-2 border-green-200", children: [
|
|
1498
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-green-800 mb-3 flex items-center gap-2", children: [
|
|
1499
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🎯" }),
|
|
1500
|
+
" Binary Search Invariant"
|
|
1501
|
+
] }),
|
|
1502
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-green-200", children: [
|
|
1503
|
+
/* @__PURE__ */ jsx("div", { className: "text-center text-green-700 font-bold mb-2", children: "target ∈ arr[left..right]" }),
|
|
1504
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "If target exists, it must be within current search bounds" })
|
|
1505
|
+
] }),
|
|
1506
|
+
left <= right && /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-white rounded-lg border border-green-200", children: [
|
|
1507
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-xs", children: [
|
|
1508
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1509
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold text-green-700", children: "Search space:" }),
|
|
1510
|
+
" ",
|
|
1511
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
1512
|
+
"[",
|
|
1513
|
+
left,
|
|
1514
|
+
"..",
|
|
1515
|
+
right,
|
|
1516
|
+
"]"
|
|
1517
|
+
] }),
|
|
1518
|
+
" = ",
|
|
1519
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold text-green-600", children: right - left + 1 }),
|
|
1520
|
+
" elements"
|
|
1521
|
+
] }),
|
|
1522
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-500", children: currentStep > 0 && /* @__PURE__ */ jsxs("span", { children: [
|
|
1523
|
+
"Eliminated: ",
|
|
1524
|
+
/* @__PURE__ */ jsxs("span", { className: "font-bold text-red-500", children: [
|
|
1525
|
+
Math.round((1 - (right - left + 1) / array.length) * 100),
|
|
1526
|
+
"%"
|
|
1527
|
+
] })
|
|
1528
|
+
] }) })
|
|
1529
|
+
] }),
|
|
1530
|
+
mid >= 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-center text-gray-600", children: [
|
|
1531
|
+
"mid = ⌊(",
|
|
1532
|
+
left,
|
|
1533
|
+
" + ",
|
|
1534
|
+
right,
|
|
1535
|
+
") / 2⌋ = ",
|
|
1536
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold text-purple-600", children: mid })
|
|
1537
|
+
] })
|
|
1538
|
+
] }),
|
|
1539
|
+
found === true && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300 text-center", children: /* @__PURE__ */ jsxs("span", { className: "text-green-800 font-bold", children: [
|
|
1540
|
+
"✓ Found in ",
|
|
1541
|
+
currentStep,
|
|
1542
|
+
" steps (log₂",
|
|
1543
|
+
array.length,
|
|
1544
|
+
" ≈ ",
|
|
1545
|
+
Math.ceil(Math.log2(array.length)),
|
|
1546
|
+
" max)"
|
|
1547
|
+
] }) }),
|
|
1548
|
+
found === false && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300 text-center", children: /* @__PURE__ */ jsx("span", { className: "text-red-800 font-bold", children: "✗ Not found - search space exhausted" }) })
|
|
1549
|
+
] }),
|
|
1497
1550
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1 flex-wrap mb-4", children: array.map((value, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
|
|
1498
1551
|
/* @__PURE__ */ jsx(
|
|
1499
1552
|
"div",
|
|
1500
1553
|
{
|
|
1501
|
-
className: `w-10 h-10 flex items-center justify-center rounded-lg font-medium text-sm transition-
|
|
1554
|
+
className: `w-10 h-10 flex items-center justify-center rounded-lg font-medium text-sm transition-colors duration-300 ${getElementStyle(index)}`,
|
|
1502
1555
|
children: value
|
|
1503
1556
|
}
|
|
1504
1557
|
),
|
|
@@ -2369,7 +2422,7 @@ const SortingVisualizerComponent = ({
|
|
|
2369
2422
|
/* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-1 h-48 bg-gray-50 rounded-lg p-4", children: bars.map((bar, index) => /* @__PURE__ */ jsxs(
|
|
2370
2423
|
"div",
|
|
2371
2424
|
{
|
|
2372
|
-
className: `${getBarColor(bar.state)} rounded-t transition-
|
|
2425
|
+
className: `${getBarColor(bar.state)} rounded-t transition-colors duration-200 flex items-end justify-center relative group`,
|
|
2373
2426
|
style: {
|
|
2374
2427
|
height: `${bar.value / maxValue * 100}%`,
|
|
2375
2428
|
width: `${Math.max(100 / bars.length - 1, 8)}%`,
|
|
@@ -2829,7 +2882,7 @@ const SortingComparisonVisualizerComponent = ({
|
|
|
2829
2882
|
/* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-0.5 h-32 bg-gray-50 rounded p-2", children: step.array.map((value, index) => /* @__PURE__ */ jsx(
|
|
2830
2883
|
"div",
|
|
2831
2884
|
{
|
|
2832
|
-
className: `${getBarColor(step, index)} rounded-t transition-
|
|
2885
|
+
className: `${getBarColor(step, index)} rounded-t transition-colors duration-150`,
|
|
2833
2886
|
style: {
|
|
2834
2887
|
height: `${value / maxValue * 100}%`,
|
|
2835
2888
|
width: `${Math.max(100 / step.array.length - 1, 6)}%`,
|
|
@@ -4140,6 +4193,25 @@ const GraphVisualizerComponent = ({
|
|
|
4140
4193
|
] }) }),
|
|
4141
4194
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
4142
4195
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, children: [
|
|
4196
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border-2 border-purple-200", children: [
|
|
4197
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
|
|
4198
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔍" }),
|
|
4199
|
+
" DFS vs BFS"
|
|
4200
|
+
] }),
|
|
4201
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
|
|
4202
|
+
/* @__PURE__ */ jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "dfs" ? "bg-purple-100 border-purple-300" : "bg-gray-100 border-gray-300"}`, children: [
|
|
4203
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-purple-700", children: "Depth-First (DFS)" }),
|
|
4204
|
+
/* @__PURE__ */ jsx("div", { className: "text-purple-600", children: "Uses: Stack" }),
|
|
4205
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-purple-500", children: "Go deep before wide" })
|
|
4206
|
+
] }),
|
|
4207
|
+
/* @__PURE__ */ jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "bfs" ? "bg-indigo-100 border-indigo-300" : "bg-gray-100 border-gray-300"}`, children: [
|
|
4208
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-indigo-700", children: "Breadth-First (BFS)" }),
|
|
4209
|
+
/* @__PURE__ */ jsx("div", { className: "text-indigo-600", children: "Uses: Queue" }),
|
|
4210
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-indigo-500", children: "Level by level" })
|
|
4211
|
+
] })
|
|
4212
|
+
] }),
|
|
4213
|
+
/* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "Both O(V+E) time • DFS for paths/cycles • BFS for shortest path (unweighted)" })
|
|
4214
|
+
] }),
|
|
4143
4215
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
|
|
4144
4216
|
/* @__PURE__ */ jsx("div", { className: "flex-1 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 400 300", className: "w-full h-64", children: [
|
|
4145
4217
|
graph.edges.map((edge, index) => {
|
|
@@ -4164,7 +4236,7 @@ const GraphVisualizerComponent = ({
|
|
|
4164
4236
|
cx: node.x,
|
|
4165
4237
|
cy: node.y,
|
|
4166
4238
|
r: 20,
|
|
4167
|
-
className: `${getNodeColor(node.id)} stroke-2 transition-
|
|
4239
|
+
className: `${getNodeColor(node.id)} stroke-2 transition-colors duration-300`
|
|
4168
4240
|
}
|
|
4169
4241
|
),
|
|
4170
4242
|
/* @__PURE__ */ jsx(
|
|
@@ -4497,6 +4569,40 @@ const HashMapVisualizerComponent = ({
|
|
|
4497
4569
|
] }) }),
|
|
4498
4570
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
4499
4571
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 350, className: showCode ? "flex-1" : "w-full", children: [
|
|
4572
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl border-2 border-indigo-200", children: [
|
|
4573
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-indigo-800 mb-3 flex items-center gap-2", children: [
|
|
4574
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "#️⃣" }),
|
|
4575
|
+
" Hash Function"
|
|
4576
|
+
] }),
|
|
4577
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-indigo-200", children: [
|
|
4578
|
+
/* @__PURE__ */ jsx("div", { className: "text-center text-indigo-700 font-bold mb-2", children: "index = hashCode(key) % capacity" }),
|
|
4579
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "Same key → same index (deterministic) • Different keys may collide → chaining" })
|
|
4580
|
+
] }),
|
|
4581
|
+
stepData.hash !== void 0 && stepData.key && /* @__PURE__ */ jsx("div", { className: "mt-3 p-3 bg-white rounded-lg border border-indigo-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
|
|
4582
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono mb-1", children: [
|
|
4583
|
+
"hashCode(",
|
|
4584
|
+
/* @__PURE__ */ jsxs("span", { className: "text-indigo-600 font-bold", children: [
|
|
4585
|
+
'"',
|
|
4586
|
+
stepData.key,
|
|
4587
|
+
'"'
|
|
4588
|
+
] }),
|
|
4589
|
+
") = ",
|
|
4590
|
+
/* @__PURE__ */ jsx("span", { className: "text-purple-600 font-bold", children: stepData.hash })
|
|
4591
|
+
] }),
|
|
4592
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono", children: [
|
|
4593
|
+
/* @__PURE__ */ jsx("span", { className: "text-purple-600", children: stepData.hash }),
|
|
4594
|
+
" % ",
|
|
4595
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: BUCKET_COUNT$1 }),
|
|
4596
|
+
" = ",
|
|
4597
|
+
/* @__PURE__ */ jsx("span", { className: "text-indigo-600 font-bold text-lg", children: stepData.bucketIndex })
|
|
4598
|
+
] }),
|
|
4599
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-2 text-indigo-600 text-lg", children: [
|
|
4600
|
+
"↓ bucket[",
|
|
4601
|
+
stepData.bucketIndex,
|
|
4602
|
+
"]"
|
|
4603
|
+
] })
|
|
4604
|
+
] }) })
|
|
4605
|
+
] }),
|
|
4500
4606
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
4501
4607
|
/* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
|
|
4502
4608
|
"Bucket Array (capacity: ",
|
|
@@ -4527,22 +4633,6 @@ const HashMapVisualizerComponent = ({
|
|
|
4527
4633
|
] }, eIdx)) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
|
|
4528
4634
|
] }, idx)) })
|
|
4529
4635
|
] }),
|
|
4530
|
-
stepData.hash !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600", children: [
|
|
4531
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium", children: "Hash Calculation:" }),
|
|
4532
|
-
/* @__PURE__ */ jsxs("div", { className: "mt-1 font-mono text-indigo-600", children: [
|
|
4533
|
-
'hashCode("',
|
|
4534
|
-
stepData.key,
|
|
4535
|
-
'") = ',
|
|
4536
|
-
stepData.hash
|
|
4537
|
-
] }),
|
|
4538
|
-
/* @__PURE__ */ jsxs("div", { className: "font-mono text-purple-600", children: [
|
|
4539
|
-
stepData.hash,
|
|
4540
|
-
" % ",
|
|
4541
|
-
BUCKET_COUNT$1,
|
|
4542
|
-
" = ",
|
|
4543
|
-
stepData.bucketIndex
|
|
4544
|
-
] })
|
|
4545
|
-
] }) }),
|
|
4546
4636
|
/* @__PURE__ */ jsx(
|
|
4547
4637
|
StatusPanel,
|
|
4548
4638
|
{
|
|
@@ -5215,6 +5305,27 @@ const LinkedListVisualizerComponent = ({
|
|
|
5215
5305
|
] }) }),
|
|
5216
5306
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
5217
5307
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 350, className: showCode ? "flex-1" : "w-full", children: [
|
|
5308
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200", children: [
|
|
5309
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-blue-800 mb-3 flex items-center gap-2", children: [
|
|
5310
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔗" }),
|
|
5311
|
+
" LinkedList vs ArrayList"
|
|
5312
|
+
] }),
|
|
5313
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
|
|
5314
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-blue-200 text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-700 mb-1", children: "Operation" }) }),
|
|
5315
|
+
/* @__PURE__ */ jsx("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-blue-700 mb-1", children: "LinkedList" }) }),
|
|
5316
|
+
/* @__PURE__ */ jsx("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-orange-700 mb-1", children: "ArrayList" }) }),
|
|
5317
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (ends)" }),
|
|
5318
|
+
/* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)" }),
|
|
5319
|
+
/* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)*" }),
|
|
5320
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (middle)" }),
|
|
5321
|
+
/* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)**" }),
|
|
5322
|
+
/* @__PURE__ */ jsx("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300 text-center font-bold text-red-700", children: "O(n)" }),
|
|
5323
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "get(index)" }),
|
|
5324
|
+
/* @__PURE__ */ jsx("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300 text-center font-bold text-red-700", children: "O(n)" }),
|
|
5325
|
+
/* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)" })
|
|
5326
|
+
] }),
|
|
5327
|
+
/* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-500 text-center", children: "* amortized | ** if you have the node reference" })
|
|
5328
|
+
] }),
|
|
5218
5329
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
5219
5330
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Doubly-Linked List" }),
|
|
5220
5331
|
/* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-4 overflow-x-auto", children: nodes.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-max", children: [
|
|
@@ -5223,7 +5334,7 @@ const LinkedListVisualizerComponent = ({
|
|
|
5223
5334
|
/* @__PURE__ */ jsxs(
|
|
5224
5335
|
"div",
|
|
5225
5336
|
{
|
|
5226
|
-
className: `flex flex-col items-center transition-
|
|
5337
|
+
className: `flex flex-col items-center transition-colors ${node.id === highlightNode ? "scale-110" : ""}`,
|
|
5227
5338
|
children: [
|
|
5228
5339
|
/* @__PURE__ */ jsx(
|
|
5229
5340
|
"div",
|
|
@@ -6466,7 +6577,7 @@ const ArrayDequeVisualizerComponent = ({
|
|
|
6466
6577
|
const isTail = index === tail;
|
|
6467
6578
|
const isHighlighted = index === highlightIndex;
|
|
6468
6579
|
const hasValue = array[index] !== null;
|
|
6469
|
-
let baseStyle = "border-2 transition-
|
|
6580
|
+
let baseStyle = "border-2 transition-colors duration-200 ";
|
|
6470
6581
|
if (resizing) {
|
|
6471
6582
|
baseStyle += "bg-yellow-100 border-yellow-400 ";
|
|
6472
6583
|
} else if (isHighlighted) {
|
|
@@ -8335,6 +8446,25 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
|
|
|
8335
8446
|
] }) }),
|
|
8336
8447
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8337
8448
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
8449
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-red-50 to-orange-50 rounded-xl border-2 border-red-200", children: [
|
|
8450
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-red-800 mb-3 flex items-center gap-2", children: [
|
|
8451
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "⚡" }),
|
|
8452
|
+
" Why ConcurrentHashMap?"
|
|
8453
|
+
] }),
|
|
8454
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
|
|
8455
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300", children: [
|
|
8456
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-red-700", children: "synchronized HashMap" }),
|
|
8457
|
+
/* @__PURE__ */ jsx("div", { className: "text-red-600", children: "❌ Single lock for entire map" }),
|
|
8458
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-red-500", children: "All threads wait for one lock" })
|
|
8459
|
+
] }),
|
|
8460
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300", children: [
|
|
8461
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-green-700", children: "ConcurrentHashMap" }),
|
|
8462
|
+
/* @__PURE__ */ jsx("div", { className: "text-green-600", children: "✓ Segment-level locking" }),
|
|
8463
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-green-500", children: "Threads work in parallel on different segments" })
|
|
8464
|
+
] })
|
|
8465
|
+
] }),
|
|
8466
|
+
/* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "get() never blocks • put() only locks one segment • Much better concurrency!" })
|
|
8467
|
+
] }),
|
|
8338
8468
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
8339
8469
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Segments (independent locks)" }),
|
|
8340
8470
|
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: segments.map((seg, idx) => /* @__PURE__ */ jsxs(
|
|
@@ -8685,13 +8815,39 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8685
8815
|
] }) }) }),
|
|
8686
8816
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8687
8817
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
8818
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl border-2 border-cyan-200", children: [
|
|
8819
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-cyan-800 mb-3 flex items-center gap-2", children: [
|
|
8820
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔄" }),
|
|
8821
|
+
" Producer-Consumer Pattern"
|
|
8822
|
+
] }),
|
|
8823
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
|
|
8824
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center", children: [
|
|
8825
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-green-700", children: "Producers" }),
|
|
8826
|
+
/* @__PURE__ */ jsx("div", { className: "text-green-600", children: "put() → queue" }),
|
|
8827
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-green-500", children: "Block if FULL" })
|
|
8828
|
+
] }),
|
|
8829
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-gray-100 p-2 rounded-lg border border-gray-300 text-center", children: [
|
|
8830
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-gray-700", children: "BlockingQueue" }),
|
|
8831
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-600", children: "Thread-safe buffer" }),
|
|
8832
|
+
/* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500", children: [
|
|
8833
|
+
"Capacity: ",
|
|
8834
|
+
capacity
|
|
8835
|
+
] })
|
|
8836
|
+
] }),
|
|
8837
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
|
|
8838
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-blue-700", children: "Consumers" }),
|
|
8839
|
+
/* @__PURE__ */ jsx("div", { className: "text-blue-600", children: "take() ← queue" }),
|
|
8840
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-blue-500", children: "Block if EMPTY" })
|
|
8841
|
+
] })
|
|
8842
|
+
] })
|
|
8843
|
+
] }),
|
|
8688
8844
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
|
|
8689
8845
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
8690
8846
|
/* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 mb-2 text-center", children: "Producers" }),
|
|
8691
8847
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ["P1", "P2"].map((p) => /* @__PURE__ */ jsxs(
|
|
8692
8848
|
"div",
|
|
8693
8849
|
{
|
|
8694
|
-
className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-
|
|
8850
|
+
className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-colors ${activeThread === p ? "bg-green-500 text-white" : blockedProducers.includes(p) ? "bg-red-100 text-red-700 border-2 border-red-300" : "bg-green-100 text-green-700"}`,
|
|
8695
8851
|
children: [
|
|
8696
8852
|
p,
|
|
8697
8853
|
blockedProducers.includes(p) && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
|
|
@@ -8712,7 +8868,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8712
8868
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: queue.length > 0 ? queue.map((item, idx) => /* @__PURE__ */ jsx(
|
|
8713
8869
|
"div",
|
|
8714
8870
|
{
|
|
8715
|
-
className: `px-2 py-1.5 bg-white rounded border text-xs font-medium text-center transition-
|
|
8871
|
+
className: `px-2 py-1.5 bg-white rounded border text-xs font-medium text-center transition-colors ${idx === 0 ? "border-blue-300 bg-blue-50" : "border-gray-200"}`,
|
|
8716
8872
|
children: item.value
|
|
8717
8873
|
},
|
|
8718
8874
|
item.id
|
|
@@ -8720,7 +8876,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8720
8876
|
/* @__PURE__ */ jsx("div", { className: "mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
8721
8877
|
"div",
|
|
8722
8878
|
{
|
|
8723
|
-
className: `h-full transition-
|
|
8879
|
+
className: `h-full transition-colors ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
|
|
8724
8880
|
style: { width: `${queue.length / capacity * 100}%` }
|
|
8725
8881
|
}
|
|
8726
8882
|
) })
|
|
@@ -8731,7 +8887,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8731
8887
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ["C1", "C2"].map((c) => /* @__PURE__ */ jsxs(
|
|
8732
8888
|
"div",
|
|
8733
8889
|
{
|
|
8734
|
-
className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-
|
|
8890
|
+
className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-colors ${activeThread === c ? "bg-blue-500 text-white" : blockedConsumers.includes(c) ? "bg-red-100 text-red-700 border-2 border-red-300" : "bg-blue-100 text-blue-700"}`,
|
|
8735
8891
|
children: [
|
|
8736
8892
|
c,
|
|
8737
8893
|
blockedConsumers.includes(c) && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
|
|
@@ -9015,7 +9171,7 @@ const CopyOnWriteVisualizerComponent = ({
|
|
|
9015
9171
|
/* @__PURE__ */ jsx("div", { className: "flex justify-center gap-1", children: arr.map((item, idx) => /* @__PURE__ */ jsx(
|
|
9016
9172
|
"div",
|
|
9017
9173
|
{
|
|
9018
|
-
className: `w-10 h-10 flex items-center justify-center rounded border-2 font-medium transition-
|
|
9174
|
+
className: `w-10 h-10 flex items-center justify-center rounded border-2 font-medium transition-colors ${isNew && idx === highlightIndex ? "bg-green-500 border-green-600 text-white" : isNew ? "bg-green-100 border-green-300 text-green-700" : "bg-gray-100 border-gray-300 text-gray-700"}`,
|
|
9019
9175
|
children: item
|
|
9020
9176
|
},
|
|
9021
9177
|
idx
|
|
@@ -9056,6 +9212,25 @@ const CopyOnWriteVisualizerComponent = ({
|
|
|
9056
9212
|
] }) }),
|
|
9057
9213
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
9058
9214
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
9215
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-lime-50 to-green-50 rounded-xl border-2 border-lime-200", children: [
|
|
9216
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-lime-800 mb-3 flex items-center gap-2", children: [
|
|
9217
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "📋" }),
|
|
9218
|
+
" Copy-on-Write Pattern"
|
|
9219
|
+
] }),
|
|
9220
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
|
|
9221
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
|
|
9222
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-blue-700", children: "Read (get)" }),
|
|
9223
|
+
/* @__PURE__ */ jsx("div", { className: "text-2xl text-blue-600", children: "O(1)" }),
|
|
9224
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-blue-500", children: "No lock, no copy" })
|
|
9225
|
+
] }),
|
|
9226
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: [
|
|
9227
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-orange-700", children: "Write (add/set)" }),
|
|
9228
|
+
/* @__PURE__ */ jsx("div", { className: "text-2xl text-orange-600", children: "O(n)" }),
|
|
9229
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-orange-500", children: "Full array copy" })
|
|
9230
|
+
] })
|
|
9231
|
+
] }),
|
|
9232
|
+
/* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "Best for: Read-heavy, rarely-modified collections • Iterators never throw ConcurrentModificationException" })
|
|
9233
|
+
] }),
|
|
9059
9234
|
/* @__PURE__ */ jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg", children: showCopy ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
9060
9235
|
renderArray(oldArray, "Old Array (readers use this)"),
|
|
9061
9236
|
/* @__PURE__ */ jsx("div", { className: "text-2xl text-gray-400", children: "→" }),
|
|
@@ -9333,7 +9508,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
|
|
|
9333
9508
|
original.map((item, idx) => /* @__PURE__ */ jsx(
|
|
9334
9509
|
"div",
|
|
9335
9510
|
{
|
|
9336
|
-
className: `w-12 h-12 flex items-center justify-center rounded-lg border-2 font-bold transition-
|
|
9511
|
+
className: `w-12 h-12 flex items-center justify-center rounded-lg border-2 font-bold transition-colors ${error ? "bg-red-100 border-red-300 text-red-700 animate-pulse" : "bg-violet-100 border-violet-300 text-violet-700"}`,
|
|
9337
9512
|
children: item
|
|
9338
9513
|
},
|
|
9339
9514
|
idx
|
|
@@ -9766,14 +9941,14 @@ const GCVisualizerComponent = ({
|
|
|
9766
9941
|
/* @__PURE__ */ jsx(
|
|
9767
9942
|
"div",
|
|
9768
9943
|
{
|
|
9769
|
-
className: "absolute inset-y-0 left-0 bg-opacity-30 bg-gray-500 transition-
|
|
9944
|
+
className: "absolute inset-y-0 left-0 bg-opacity-30 bg-gray-500 transition-[width] duration-300",
|
|
9770
9945
|
style: { width: `${fillPercent}%` }
|
|
9771
9946
|
}
|
|
9772
9947
|
),
|
|
9773
9948
|
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-wrap items-center gap-1 p-1", children: genObjects.map((obj) => /* @__PURE__ */ jsxs(
|
|
9774
9949
|
"div",
|
|
9775
9950
|
{
|
|
9776
|
-
className: `px-1.5 py-0.5 text-[9px] font-medium rounded transition-
|
|
9951
|
+
className: `px-1.5 py-0.5 text-[9px] font-medium rounded transition-colors duration-200 ${getObjectStyle(obj)}`,
|
|
9777
9952
|
title: `${obj.id} (age: ${obj.age}, ${obj.reachable ? "reachable" : "garbage"})`,
|
|
9778
9953
|
children: [
|
|
9779
9954
|
obj.id.replace("obj", ""),
|
|
@@ -9831,6 +10006,28 @@ const GCVisualizerComponent = ({
|
|
|
9831
10006
|
] }) }),
|
|
9832
10007
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
9833
10008
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
|
|
10009
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border-2 border-purple-200", children: [
|
|
10010
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
|
|
10011
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🧬" }),
|
|
10012
|
+
" Generational Hypothesis"
|
|
10013
|
+
] }),
|
|
10014
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-purple-200", children: [
|
|
10015
|
+
/* @__PURE__ */ jsx("div", { className: "text-center text-purple-700 font-bold mb-2", children: '"Most objects die young"' }),
|
|
10016
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "~95% of objects become garbage before first GC • Optimize for the common case" })
|
|
10017
|
+
] }),
|
|
10018
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
|
|
10019
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
|
|
10020
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-blue-700", children: "Young Gen" }),
|
|
10021
|
+
/* @__PURE__ */ jsx("div", { className: "text-blue-600", children: "Fast copy collection" }),
|
|
10022
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-blue-500", children: "Minor GC (frequent)" })
|
|
10023
|
+
] }),
|
|
10024
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-amber-100 p-2 rounded-lg border border-amber-300 text-center", children: [
|
|
10025
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-amber-700", children: "Old Gen" }),
|
|
10026
|
+
/* @__PURE__ */ jsx("div", { className: "text-amber-600", children: "Mark-sweep collection" }),
|
|
10027
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-amber-500", children: "Major GC (rare, slow)" })
|
|
10028
|
+
] })
|
|
10029
|
+
] })
|
|
10030
|
+
] }),
|
|
9834
10031
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
9835
10032
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "JVM Heap Memory" }),
|
|
9836
10033
|
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: [
|