@tomaszjarosz/react-visualizers 0.2.7 → 0.2.11
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 +280 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +280 -31
- package/dist/index.js.map +1 -1
- package/package.json +29 -10
package/dist/index.cjs
CHANGED
|
@@ -1210,6 +1210,46 @@ const ALGORITHM_COMPLEXITIES$1 = {
|
|
|
1210
1210
|
quick: { time: "O(n log n)", space: "O(log n)" },
|
|
1211
1211
|
merge: { time: "O(n log n)", space: "O(n)" }
|
|
1212
1212
|
};
|
|
1213
|
+
const ALGORITHM_CODE$1 = {
|
|
1214
|
+
bubble: [
|
|
1215
|
+
"for (i = 0; i < n-1; i++)",
|
|
1216
|
+
" for (j = 0; j < n-i-1; j++)",
|
|
1217
|
+
" if (arr[j] > arr[j+1])",
|
|
1218
|
+
" swap(arr[j], arr[j+1])"
|
|
1219
|
+
],
|
|
1220
|
+
selection: [
|
|
1221
|
+
"for (i = 0; i < n-1; i++)",
|
|
1222
|
+
" minIdx = i",
|
|
1223
|
+
" for (j = i+1; j < n; j++)",
|
|
1224
|
+
" if (arr[j] < arr[minIdx])",
|
|
1225
|
+
" minIdx = j",
|
|
1226
|
+
" swap(arr[i], arr[minIdx])"
|
|
1227
|
+
],
|
|
1228
|
+
insertion: [
|
|
1229
|
+
"for (i = 1; i < n; i++)",
|
|
1230
|
+
" key = arr[i]",
|
|
1231
|
+
" j = i - 1",
|
|
1232
|
+
" while (j >= 0 && arr[j] > key)",
|
|
1233
|
+
" arr[j+1] = arr[j]",
|
|
1234
|
+
" j--",
|
|
1235
|
+
" arr[j+1] = key"
|
|
1236
|
+
],
|
|
1237
|
+
quick: [
|
|
1238
|
+
"quickSort(arr, low, high)",
|
|
1239
|
+
" if (low < high)",
|
|
1240
|
+
" pi = partition(arr, low, high)",
|
|
1241
|
+
" quickSort(arr, low, pi-1)",
|
|
1242
|
+
" quickSort(arr, pi+1, high)"
|
|
1243
|
+
],
|
|
1244
|
+
merge: [
|
|
1245
|
+
"mergeSort(arr, l, r)",
|
|
1246
|
+
" if (l < r)",
|
|
1247
|
+
" m = (l + r) / 2",
|
|
1248
|
+
" mergeSort(arr, l, m)",
|
|
1249
|
+
" mergeSort(arr, m+1, r)",
|
|
1250
|
+
" merge(arr, l, m, r)"
|
|
1251
|
+
]
|
|
1252
|
+
};
|
|
1213
1253
|
const BINARY_SEARCH_CODE = [
|
|
1214
1254
|
"binarySearch(arr, target):",
|
|
1215
1255
|
" left = 0, right = n - 1",
|
|
@@ -1496,11 +1536,64 @@ const BinarySearchVisualizerComponent = ({
|
|
|
1496
1536
|
] }) }),
|
|
1497
1537
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
1498
1538
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
1539
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
1540
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-green-800 mb-3 flex items-center gap-2", children: [
|
|
1541
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🎯" }),
|
|
1542
|
+
" Binary Search Invariant"
|
|
1543
|
+
] }),
|
|
1544
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-green-200", children: [
|
|
1545
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-green-700 font-bold mb-2", children: "target ∈ arr[left..right]" }),
|
|
1546
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 text-center", children: "If target exists, it must be within current search bounds" })
|
|
1547
|
+
] }),
|
|
1548
|
+
left <= right && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 p-2 bg-white rounded-lg border border-green-200", children: [
|
|
1549
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-xs", children: [
|
|
1550
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1551
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-green-700", children: "Search space:" }),
|
|
1552
|
+
" ",
|
|
1553
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
|
|
1554
|
+
"[",
|
|
1555
|
+
left,
|
|
1556
|
+
"..",
|
|
1557
|
+
right,
|
|
1558
|
+
"]"
|
|
1559
|
+
] }),
|
|
1560
|
+
" = ",
|
|
1561
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-green-600", children: right - left + 1 }),
|
|
1562
|
+
" elements"
|
|
1563
|
+
] }),
|
|
1564
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500", children: currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1565
|
+
"Eliminated: ",
|
|
1566
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-red-500", children: [
|
|
1567
|
+
Math.round((1 - (right - left + 1) / array.length) * 100),
|
|
1568
|
+
"%"
|
|
1569
|
+
] })
|
|
1570
|
+
] }) })
|
|
1571
|
+
] }),
|
|
1572
|
+
mid >= 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-xs text-center text-gray-600", children: [
|
|
1573
|
+
"mid = ⌊(",
|
|
1574
|
+
left,
|
|
1575
|
+
" + ",
|
|
1576
|
+
right,
|
|
1577
|
+
") / 2⌋ = ",
|
|
1578
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-purple-600", children: mid })
|
|
1579
|
+
] })
|
|
1580
|
+
] }),
|
|
1581
|
+
found === true && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-800 font-bold", children: [
|
|
1582
|
+
"✓ Found in ",
|
|
1583
|
+
currentStep,
|
|
1584
|
+
" steps (log₂",
|
|
1585
|
+
array.length,
|
|
1586
|
+
" ≈ ",
|
|
1587
|
+
Math.ceil(Math.log2(array.length)),
|
|
1588
|
+
" max)"
|
|
1589
|
+
] }) }),
|
|
1590
|
+
found === false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-800 font-bold", children: "✗ Not found - search space exhausted" }) })
|
|
1591
|
+
] }),
|
|
1499
1592
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1 flex-wrap mb-4", children: array.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
|
|
1500
1593
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1501
1594
|
"div",
|
|
1502
1595
|
{
|
|
1503
|
-
className: `w-10 h-10 flex items-center justify-center rounded-lg font-medium text-sm transition-
|
|
1596
|
+
className: `w-10 h-10 flex items-center justify-center rounded-lg font-medium text-sm transition-colors duration-300 ${getElementStyle(index)}`,
|
|
1504
1597
|
children: value
|
|
1505
1598
|
}
|
|
1506
1599
|
),
|
|
@@ -2371,7 +2464,7 @@ const SortingVisualizerComponent = ({
|
|
|
2371
2464
|
/* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
|
|
2372
2465
|
"div",
|
|
2373
2466
|
{
|
|
2374
|
-
className: `${getBarColor(bar.state)} rounded-t transition-
|
|
2467
|
+
className: `${getBarColor(bar.state)} rounded-t transition-colors duration-200 flex items-end justify-center relative group`,
|
|
2375
2468
|
style: {
|
|
2376
2469
|
height: `${bar.value / maxValue * 100}%`,
|
|
2377
2470
|
width: `${Math.max(100 / bars.length - 1, 8)}%`,
|
|
@@ -2721,6 +2814,8 @@ function generateRandomArray(size) {
|
|
|
2721
2814
|
return Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 5);
|
|
2722
2815
|
}
|
|
2723
2816
|
const SortingComparisonVisualizerComponent = ({
|
|
2817
|
+
showControls = true,
|
|
2818
|
+
showCode = true,
|
|
2724
2819
|
className = ""
|
|
2725
2820
|
}) => {
|
|
2726
2821
|
const [algorithm1, setAlgorithm1] = React.useState("bubble");
|
|
@@ -2831,7 +2926,7 @@ const SortingComparisonVisualizerComponent = ({
|
|
|
2831
2926
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
|
|
2832
2927
|
"div",
|
|
2833
2928
|
{
|
|
2834
|
-
className: `${getBarColor(step, index)} rounded-t transition-
|
|
2929
|
+
className: `${getBarColor(step, index)} rounded-t transition-colors duration-150`,
|
|
2835
2930
|
style: {
|
|
2836
2931
|
height: `${value / maxValue * 100}%`,
|
|
2837
2932
|
width: `${Math.max(100 / step.array.length - 1, 6)}%`,
|
|
@@ -2889,7 +2984,17 @@ const SortingComparisonVisualizerComponent = ({
|
|
|
2889
2984
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-2xl font-bold text-gray-300", children: "VS" }),
|
|
2890
2985
|
renderAlgorithmPanel(algorithm2, state2, setAlgorithm2, algorithm1, "border-purple-200")
|
|
2891
2986
|
] }) }) }),
|
|
2892
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3
|
|
2987
|
+
showCode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
2988
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2989
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-indigo-600 mb-2", children: ALGORITHM_NAMES$1[algorithm1] }),
|
|
2990
|
+
/* @__PURE__ */ jsxRuntime.jsx(CodePanel, { code: ALGORITHM_CODE$1[algorithm1], activeLine: -1 })
|
|
2991
|
+
] }),
|
|
2992
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2993
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-purple-600 mb-2", children: ALGORITHM_NAMES$1[algorithm2] }),
|
|
2994
|
+
/* @__PURE__ */ jsxRuntime.jsx(CodePanel, { code: ALGORITHM_CODE$1[algorithm2], activeLine: -1 })
|
|
2995
|
+
] })
|
|
2996
|
+
] }) }),
|
|
2997
|
+
showControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
|
|
2893
2998
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
2894
2999
|
isPlaying && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs text-indigo-600 font-medium", children: [
|
|
2895
3000
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 bg-indigo-500 rounded-full animate-pulse" }),
|
|
@@ -4142,6 +4247,25 @@ const GraphVisualizerComponent = ({
|
|
|
4142
4247
|
] }) }),
|
|
4143
4248
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
4144
4249
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, children: [
|
|
4250
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
4251
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
|
|
4252
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔍" }),
|
|
4253
|
+
" DFS vs BFS"
|
|
4254
|
+
] }),
|
|
4255
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
|
|
4256
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "dfs" ? "bg-purple-100 border-purple-300" : "bg-gray-100 border-gray-300"}`, children: [
|
|
4257
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-purple-700", children: "Depth-First (DFS)" }),
|
|
4258
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-purple-600", children: "Uses: Stack" }),
|
|
4259
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-purple-500", children: "Go deep before wide" })
|
|
4260
|
+
] }),
|
|
4261
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "bfs" ? "bg-indigo-100 border-indigo-300" : "bg-gray-100 border-gray-300"}`, children: [
|
|
4262
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-indigo-700", children: "Breadth-First (BFS)" }),
|
|
4263
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-indigo-600", children: "Uses: Queue" }),
|
|
4264
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-indigo-500", children: "Level by level" })
|
|
4265
|
+
] })
|
|
4266
|
+
] }),
|
|
4267
|
+
/* @__PURE__ */ jsxRuntime.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)" })
|
|
4268
|
+
] }),
|
|
4145
4269
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
|
|
4146
4270
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 400 300", className: "w-full h-64", children: [
|
|
4147
4271
|
graph.edges.map((edge, index) => {
|
|
@@ -4166,7 +4290,7 @@ const GraphVisualizerComponent = ({
|
|
|
4166
4290
|
cx: node.x,
|
|
4167
4291
|
cy: node.y,
|
|
4168
4292
|
r: 20,
|
|
4169
|
-
className: `${getNodeColor(node.id)} stroke-2 transition-
|
|
4293
|
+
className: `${getNodeColor(node.id)} stroke-2 transition-colors duration-300`
|
|
4170
4294
|
}
|
|
4171
4295
|
),
|
|
4172
4296
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4499,6 +4623,40 @@ const HashMapVisualizerComponent = ({
|
|
|
4499
4623
|
] }) }),
|
|
4500
4624
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
4501
4625
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, className: showCode ? "flex-1" : "w-full", children: [
|
|
4626
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
4627
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-indigo-800 mb-3 flex items-center gap-2", children: [
|
|
4628
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "#️⃣" }),
|
|
4629
|
+
" Hash Function"
|
|
4630
|
+
] }),
|
|
4631
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-indigo-200", children: [
|
|
4632
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-indigo-700 font-bold mb-2", children: "index = hashCode(key) % capacity" }),
|
|
4633
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 text-center", children: "Same key → same index (deterministic) • Different keys may collide → chaining" })
|
|
4634
|
+
] }),
|
|
4635
|
+
stepData.hash !== void 0 && stepData.key && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-3 bg-white rounded-lg border border-indigo-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center", children: [
|
|
4636
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono mb-1", children: [
|
|
4637
|
+
"hashCode(",
|
|
4638
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-indigo-600 font-bold", children: [
|
|
4639
|
+
'"',
|
|
4640
|
+
stepData.key,
|
|
4641
|
+
'"'
|
|
4642
|
+
] }),
|
|
4643
|
+
") = ",
|
|
4644
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 font-bold", children: stepData.hash })
|
|
4645
|
+
] }),
|
|
4646
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono", children: [
|
|
4647
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600", children: stepData.hash }),
|
|
4648
|
+
" % ",
|
|
4649
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: BUCKET_COUNT$1 }),
|
|
4650
|
+
" = ",
|
|
4651
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-indigo-600 font-bold text-lg", children: stepData.bucketIndex })
|
|
4652
|
+
] }),
|
|
4653
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-indigo-600 text-lg", children: [
|
|
4654
|
+
"↓ bucket[",
|
|
4655
|
+
stepData.bucketIndex,
|
|
4656
|
+
"]"
|
|
4657
|
+
] })
|
|
4658
|
+
] }) })
|
|
4659
|
+
] }),
|
|
4502
4660
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
4503
4661
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
|
|
4504
4662
|
"Bucket Array (capacity: ",
|
|
@@ -4529,22 +4687,6 @@ const HashMapVisualizerComponent = ({
|
|
|
4529
4687
|
] }, eIdx)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
|
|
4530
4688
|
] }, idx)) })
|
|
4531
4689
|
] }),
|
|
4532
|
-
stepData.hash !== void 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: [
|
|
4533
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Hash Calculation:" }),
|
|
4534
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 font-mono text-indigo-600", children: [
|
|
4535
|
-
'hashCode("',
|
|
4536
|
-
stepData.key,
|
|
4537
|
-
'") = ',
|
|
4538
|
-
stepData.hash
|
|
4539
|
-
] }),
|
|
4540
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-purple-600", children: [
|
|
4541
|
-
stepData.hash,
|
|
4542
|
-
" % ",
|
|
4543
|
-
BUCKET_COUNT$1,
|
|
4544
|
-
" = ",
|
|
4545
|
-
stepData.bucketIndex
|
|
4546
|
-
] })
|
|
4547
|
-
] }) }),
|
|
4548
4690
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4549
4691
|
StatusPanel,
|
|
4550
4692
|
{
|
|
@@ -5217,6 +5359,27 @@ const LinkedListVisualizerComponent = ({
|
|
|
5217
5359
|
] }) }),
|
|
5218
5360
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
5219
5361
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, className: showCode ? "flex-1" : "w-full", children: [
|
|
5362
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
5363
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-blue-800 mb-3 flex items-center gap-2", children: [
|
|
5364
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔗" }),
|
|
5365
|
+
" LinkedList vs ArrayList"
|
|
5366
|
+
] }),
|
|
5367
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
|
|
5368
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-blue-200 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-gray-700 mb-1", children: "Operation" }) }),
|
|
5369
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-blue-700 mb-1", children: "LinkedList" }) }),
|
|
5370
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-orange-700 mb-1", children: "ArrayList" }) }),
|
|
5371
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (ends)" }),
|
|
5372
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)" }),
|
|
5373
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)*" }),
|
|
5374
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (middle)" }),
|
|
5375
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)**" }),
|
|
5376
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300 text-center font-bold text-red-700", children: "O(n)" }),
|
|
5377
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "get(index)" }),
|
|
5378
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300 text-center font-bold text-red-700", children: "O(n)" }),
|
|
5379
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)" })
|
|
5380
|
+
] }),
|
|
5381
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-[10px] text-gray-500 text-center", children: "* amortized | ** if you have the node reference" })
|
|
5382
|
+
] }),
|
|
5220
5383
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
5221
5384
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Doubly-Linked List" }),
|
|
5222
5385
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg p-4 overflow-x-auto", children: nodes.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-max", children: [
|
|
@@ -5225,7 +5388,7 @@ const LinkedListVisualizerComponent = ({
|
|
|
5225
5388
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5226
5389
|
"div",
|
|
5227
5390
|
{
|
|
5228
|
-
className: `flex flex-col items-center transition-
|
|
5391
|
+
className: `flex flex-col items-center transition-colors ${node.id === highlightNode ? "scale-110" : ""}`,
|
|
5229
5392
|
children: [
|
|
5230
5393
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5231
5394
|
"div",
|
|
@@ -6468,7 +6631,7 @@ const ArrayDequeVisualizerComponent = ({
|
|
|
6468
6631
|
const isTail = index === tail;
|
|
6469
6632
|
const isHighlighted = index === highlightIndex;
|
|
6470
6633
|
const hasValue = array[index] !== null;
|
|
6471
|
-
let baseStyle = "border-2 transition-
|
|
6634
|
+
let baseStyle = "border-2 transition-colors duration-200 ";
|
|
6472
6635
|
if (resizing) {
|
|
6473
6636
|
baseStyle += "bg-yellow-100 border-yellow-400 ";
|
|
6474
6637
|
} else if (isHighlighted) {
|
|
@@ -8337,6 +8500,25 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
|
|
|
8337
8500
|
] }) }),
|
|
8338
8501
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8339
8502
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
8503
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
8504
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-red-800 mb-3 flex items-center gap-2", children: [
|
|
8505
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "⚡" }),
|
|
8506
|
+
" Why ConcurrentHashMap?"
|
|
8507
|
+
] }),
|
|
8508
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
|
|
8509
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300", children: [
|
|
8510
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-red-700", children: "synchronized HashMap" }),
|
|
8511
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-600", children: "❌ Single lock for entire map" }),
|
|
8512
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-red-500", children: "All threads wait for one lock" })
|
|
8513
|
+
] }),
|
|
8514
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300", children: [
|
|
8515
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-green-700", children: "ConcurrentHashMap" }),
|
|
8516
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-600", children: "✓ Segment-level locking" }),
|
|
8517
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-green-500", children: "Threads work in parallel on different segments" })
|
|
8518
|
+
] })
|
|
8519
|
+
] }),
|
|
8520
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "get() never blocks • put() only locks one segment • Much better concurrency!" })
|
|
8521
|
+
] }),
|
|
8340
8522
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
8341
8523
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Segments (independent locks)" }),
|
|
8342
8524
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: segments.map((seg, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -8687,13 +8869,39 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8687
8869
|
] }) }) }),
|
|
8688
8870
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8689
8871
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
8872
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
8873
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-cyan-800 mb-3 flex items-center gap-2", children: [
|
|
8874
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔄" }),
|
|
8875
|
+
" Producer-Consumer Pattern"
|
|
8876
|
+
] }),
|
|
8877
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
|
|
8878
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center", children: [
|
|
8879
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-green-700", children: "Producers" }),
|
|
8880
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-600", children: "put() → queue" }),
|
|
8881
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-green-500", children: "Block if FULL" })
|
|
8882
|
+
] }),
|
|
8883
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-100 p-2 rounded-lg border border-gray-300 text-center", children: [
|
|
8884
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-gray-700", children: "BlockingQueue" }),
|
|
8885
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: "Thread-safe buffer" }),
|
|
8886
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] text-gray-500", children: [
|
|
8887
|
+
"Capacity: ",
|
|
8888
|
+
capacity
|
|
8889
|
+
] })
|
|
8890
|
+
] }),
|
|
8891
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
|
|
8892
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-blue-700", children: "Consumers" }),
|
|
8893
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: "take() ← queue" }),
|
|
8894
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-blue-500", children: "Block if EMPTY" })
|
|
8895
|
+
] })
|
|
8896
|
+
] })
|
|
8897
|
+
] }),
|
|
8690
8898
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
|
|
8691
8899
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
8692
8900
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 mb-2 text-center", children: "Producers" }),
|
|
8693
8901
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: ["P1", "P2"].map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8694
8902
|
"div",
|
|
8695
8903
|
{
|
|
8696
|
-
className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-
|
|
8904
|
+
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"}`,
|
|
8697
8905
|
children: [
|
|
8698
8906
|
p,
|
|
8699
8907
|
blockedProducers.includes(p) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
|
|
@@ -8714,7 +8922,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8714
8922
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: queue.length > 0 ? queue.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
8715
8923
|
"div",
|
|
8716
8924
|
{
|
|
8717
|
-
className: `px-2 py-1.5 bg-white rounded border text-xs font-medium text-center transition-
|
|
8925
|
+
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"}`,
|
|
8718
8926
|
children: item.value
|
|
8719
8927
|
},
|
|
8720
8928
|
item.id
|
|
@@ -8722,7 +8930,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8722
8930
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
8723
8931
|
"div",
|
|
8724
8932
|
{
|
|
8725
|
-
className: `h-full transition-
|
|
8933
|
+
className: `h-full transition-colors ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
|
|
8726
8934
|
style: { width: `${queue.length / capacity * 100}%` }
|
|
8727
8935
|
}
|
|
8728
8936
|
) })
|
|
@@ -8733,7 +8941,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8733
8941
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: ["C1", "C2"].map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8734
8942
|
"div",
|
|
8735
8943
|
{
|
|
8736
|
-
className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-
|
|
8944
|
+
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"}`,
|
|
8737
8945
|
children: [
|
|
8738
8946
|
c,
|
|
8739
8947
|
blockedConsumers.includes(c) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
|
|
@@ -9017,7 +9225,7 @@ const CopyOnWriteVisualizerComponent = ({
|
|
|
9017
9225
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center gap-1", children: arr.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9018
9226
|
"div",
|
|
9019
9227
|
{
|
|
9020
|
-
className: `w-10 h-10 flex items-center justify-center rounded border-2 font-medium transition-
|
|
9228
|
+
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"}`,
|
|
9021
9229
|
children: item
|
|
9022
9230
|
},
|
|
9023
9231
|
idx
|
|
@@ -9058,6 +9266,25 @@ const CopyOnWriteVisualizerComponent = ({
|
|
|
9058
9266
|
] }) }),
|
|
9059
9267
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
9060
9268
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
|
|
9269
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
9270
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-lime-800 mb-3 flex items-center gap-2", children: [
|
|
9271
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "📋" }),
|
|
9272
|
+
" Copy-on-Write Pattern"
|
|
9273
|
+
] }),
|
|
9274
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
|
|
9275
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
|
|
9276
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-blue-700", children: "Read (get)" }),
|
|
9277
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-blue-600", children: "O(1)" }),
|
|
9278
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-blue-500", children: "No lock, no copy" })
|
|
9279
|
+
] }),
|
|
9280
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: [
|
|
9281
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-orange-700", children: "Write (add/set)" }),
|
|
9282
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-orange-600", children: "O(n)" }),
|
|
9283
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-orange-500", children: "Full array copy" })
|
|
9284
|
+
] })
|
|
9285
|
+
] }),
|
|
9286
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "Best for: Read-heavy, rarely-modified collections • Iterators never throw ConcurrentModificationException" })
|
|
9287
|
+
] }),
|
|
9061
9288
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg", children: showCopy ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
|
|
9062
9289
|
renderArray(oldArray, "Old Array (readers use this)"),
|
|
9063
9290
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-gray-400", children: "→" }),
|
|
@@ -9335,7 +9562,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
|
|
|
9335
9562
|
original.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9336
9563
|
"div",
|
|
9337
9564
|
{
|
|
9338
|
-
className: `w-12 h-12 flex items-center justify-center rounded-lg border-2 font-bold transition-
|
|
9565
|
+
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"}`,
|
|
9339
9566
|
children: item
|
|
9340
9567
|
},
|
|
9341
9568
|
idx
|
|
@@ -9768,14 +9995,14 @@ const GCVisualizerComponent = ({
|
|
|
9768
9995
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
9769
9996
|
"div",
|
|
9770
9997
|
{
|
|
9771
|
-
className: "absolute inset-y-0 left-0 bg-opacity-30 bg-gray-500 transition-
|
|
9998
|
+
className: "absolute inset-y-0 left-0 bg-opacity-30 bg-gray-500 transition-[width] duration-300",
|
|
9772
9999
|
style: { width: `${fillPercent}%` }
|
|
9773
10000
|
}
|
|
9774
10001
|
),
|
|
9775
10002
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-wrap items-center gap-1 p-1", children: genObjects.map((obj) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9776
10003
|
"div",
|
|
9777
10004
|
{
|
|
9778
|
-
className: `px-1.5 py-0.5 text-[9px] font-medium rounded transition-
|
|
10005
|
+
className: `px-1.5 py-0.5 text-[9px] font-medium rounded transition-colors duration-200 ${getObjectStyle(obj)}`,
|
|
9779
10006
|
title: `${obj.id} (age: ${obj.age}, ${obj.reachable ? "reachable" : "garbage"})`,
|
|
9780
10007
|
children: [
|
|
9781
10008
|
obj.id.replace("obj", ""),
|
|
@@ -9833,6 +10060,28 @@ const GCVisualizerComponent = ({
|
|
|
9833
10060
|
] }) }),
|
|
9834
10061
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
9835
10062
|
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
|
|
10063
|
+
/* @__PURE__ */ jsxRuntime.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: [
|
|
10064
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
|
|
10065
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🧬" }),
|
|
10066
|
+
" Generational Hypothesis"
|
|
10067
|
+
] }),
|
|
10068
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-purple-200", children: [
|
|
10069
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-purple-700 font-bold mb-2", children: '"Most objects die young"' }),
|
|
10070
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 text-center", children: "~95% of objects become garbage before first GC • Optimize for the common case" })
|
|
10071
|
+
] }),
|
|
10072
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
|
|
10073
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
|
|
10074
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-blue-700", children: "Young Gen" }),
|
|
10075
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: "Fast copy collection" }),
|
|
10076
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-blue-500", children: "Minor GC (frequent)" })
|
|
10077
|
+
] }),
|
|
10078
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-amber-100 p-2 rounded-lg border border-amber-300 text-center", children: [
|
|
10079
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-amber-700", children: "Old Gen" }),
|
|
10080
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-amber-600", children: "Mark-sweep collection" }),
|
|
10081
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-amber-500", children: "Major GC (rare, slow)" })
|
|
10082
|
+
] })
|
|
10083
|
+
] })
|
|
10084
|
+
] }),
|
|
9836
10085
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
9837
10086
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "JVM Heap Memory" }),
|
|
9838
10087
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: [
|