@tomaszjarosz/react-visualizers 0.2.4 → 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 +440 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +440 -61
- 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",
|
|
@@ -5599,6 +5710,7 @@ const LinkedHashMapVisualizerComponent = ({
|
|
|
5599
5710
|
});
|
|
5600
5711
|
const stepData = currentStepData || {
|
|
5601
5712
|
operation: "init",
|
|
5713
|
+
key: "",
|
|
5602
5714
|
buckets: [],
|
|
5603
5715
|
linkedOrder: [],
|
|
5604
5716
|
description: ""
|
|
@@ -5679,9 +5791,30 @@ const LinkedHashMapVisualizerComponent = ({
|
|
|
5679
5791
|
] }) }),
|
|
5680
5792
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
5681
5793
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
|
|
5682
|
-
/* @__PURE__ */ jsxs("div", { className: "mb-
|
|
5683
|
-
/* @__PURE__ */
|
|
5684
|
-
|
|
5794
|
+
/* @__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: [
|
|
5795
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-orange-800 mb-3 flex items-center gap-2", children: [
|
|
5796
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔗" }),
|
|
5797
|
+
" LinkedHashMap = HashMap + LinkedList"
|
|
5798
|
+
] }),
|
|
5799
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
|
|
5800
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border border-orange-200", children: [
|
|
5801
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-gray-700 mb-1", children: "🗂️ Hash Table" }),
|
|
5802
|
+
/* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500", children: "O(1) get/put • Same as HashMap" })
|
|
5803
|
+
] }),
|
|
5804
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border border-orange-200", children: [
|
|
5805
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-gray-700 mb-1", children: "🔗 Doubly Linked List" }),
|
|
5806
|
+
/* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500", children: [
|
|
5807
|
+
accessOrder ? "Access order (LRU cache)" : "Insertion order",
|
|
5808
|
+
" • O(1) reorder"
|
|
5809
|
+
] })
|
|
5810
|
+
] })
|
|
5811
|
+
] }),
|
|
5812
|
+
stepData.operation === "access" && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-orange-100 rounded-lg border border-orange-300", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center text-orange-800", children: [
|
|
5813
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold", children: "LRU Update:" }),
|
|
5814
|
+
' Entry "',
|
|
5815
|
+
stepData.key,
|
|
5816
|
+
'" moved to end of list (most recently used)'
|
|
5817
|
+
] }) })
|
|
5685
5818
|
] }),
|
|
5686
5819
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
5687
5820
|
/* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
|
|
@@ -5713,22 +5846,31 @@ const LinkedHashMapVisualizerComponent = ({
|
|
|
5713
5846
|
] }, eIdx)) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
|
|
5714
5847
|
] }, idx)) })
|
|
5715
5848
|
] }),
|
|
5716
|
-
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
5717
|
-
/* @__PURE__ */
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
|
|
5724
|
-
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
}
|
|
5728
|
-
|
|
5729
|
-
|
|
5730
|
-
|
|
5731
|
-
|
|
5849
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gradient-to-r from-orange-100 to-amber-100 rounded-xl border-2 border-orange-300", children: [
|
|
5850
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-orange-800 mb-2 flex items-center gap-2", children: [
|
|
5851
|
+
/* @__PURE__ */ jsx("span", { children: "🔗" }),
|
|
5852
|
+
" ",
|
|
5853
|
+
accessOrder ? "Access Order (LRU: oldest → newest)" : "Insertion Order"
|
|
5854
|
+
] }),
|
|
5855
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg p-3 border border-orange-200", children: [
|
|
5856
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: linkedOrder.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5857
|
+
/* @__PURE__ */ jsx("div", { className: "px-2 py-1 bg-gray-100 text-[10px] text-gray-600 rounded font-semibold", children: "HEAD" }),
|
|
5858
|
+
/* @__PURE__ */ jsx("span", { className: "text-orange-400 font-bold", children: "→" }),
|
|
5859
|
+
linkedOrder.map((key, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
5860
|
+
idx > 0 && /* @__PURE__ */ jsx("span", { className: "text-orange-400 font-bold", children: "⇄" }),
|
|
5861
|
+
/* @__PURE__ */ jsx(
|
|
5862
|
+
"div",
|
|
5863
|
+
{
|
|
5864
|
+
className: `px-3 py-1 text-xs font-bold rounded-full transition-colors ${getLinkedNodeStyle(key)}`,
|
|
5865
|
+
children: key
|
|
5866
|
+
}
|
|
5867
|
+
)
|
|
5868
|
+
] }, key)),
|
|
5869
|
+
/* @__PURE__ */ jsx("span", { className: "text-orange-400 font-bold", children: "→" }),
|
|
5870
|
+
/* @__PURE__ */ jsx("div", { className: "px-2 py-1 bg-gray-100 text-[10px] text-gray-600 rounded font-semibold", children: "TAIL" })
|
|
5871
|
+
] }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "HEAD → TAIL (empty)" }) }),
|
|
5872
|
+
linkedOrder.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-orange-200 text-[10px] text-gray-500 text-center", children: "Doubly linked: each entry has prev/next pointers" })
|
|
5873
|
+
] })
|
|
5732
5874
|
] }),
|
|
5733
5875
|
accessOrder && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-blue-700", children: [
|
|
5734
5876
|
/* @__PURE__ */ jsx("strong", { children: "LRU Cache Usage:" }),
|
|
@@ -6435,7 +6577,7 @@ const ArrayDequeVisualizerComponent = ({
|
|
|
6435
6577
|
const isTail = index === tail;
|
|
6436
6578
|
const isHighlighted = index === highlightIndex;
|
|
6437
6579
|
const hasValue = array[index] !== null;
|
|
6438
|
-
let baseStyle = "border-2 transition-
|
|
6580
|
+
let baseStyle = "border-2 transition-colors duration-200 ";
|
|
6439
6581
|
if (resizing) {
|
|
6440
6582
|
baseStyle += "bg-yellow-100 border-yellow-400 ";
|
|
6441
6583
|
} else if (isHighlighted) {
|
|
@@ -6975,6 +7117,59 @@ const TreeSetVisualizerComponent = ({
|
|
|
6975
7117
|
] }) }),
|
|
6976
7118
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
6977
7119
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
|
|
7120
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl border-2 border-emerald-200", children: [
|
|
7121
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-emerald-800 mb-3 flex items-center gap-2", children: [
|
|
7122
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🌳" }),
|
|
7123
|
+
" Binary Search Tree Property"
|
|
7124
|
+
] }),
|
|
7125
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-emerald-200", children: [
|
|
7126
|
+
/* @__PURE__ */ jsxs("div", { className: "text-center text-emerald-700 font-bold text-base mb-2", children: [
|
|
7127
|
+
"left < ",
|
|
7128
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-800", children: "node" }),
|
|
7129
|
+
" < right"
|
|
7130
|
+
] }),
|
|
7131
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "All values in left subtree are smaller • All values in right subtree are larger" })
|
|
7132
|
+
] }),
|
|
7133
|
+
currentStepData.operation === "add" && currentStepData.value !== void 0 && currentNode !== void 0 && currentNode !== currentStepData.value && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
|
|
7134
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold text-emerald-700", children: "Comparing:" }),
|
|
7135
|
+
" ",
|
|
7136
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
7137
|
+
currentStepData.value,
|
|
7138
|
+
" ",
|
|
7139
|
+
currentStepData.value < currentNode ? "<" : ">",
|
|
7140
|
+
" ",
|
|
7141
|
+
currentNode
|
|
7142
|
+
] }),
|
|
7143
|
+
" → ",
|
|
7144
|
+
/* @__PURE__ */ jsxs("span", { className: `font-bold ${currentStepData.value < currentNode ? "text-blue-600" : "text-orange-600"}`, children: [
|
|
7145
|
+
"Go ",
|
|
7146
|
+
currentStepData.value < currentNode ? "LEFT" : "RIGHT"
|
|
7147
|
+
] })
|
|
7148
|
+
] }) }),
|
|
7149
|
+
currentStepData.operation === "contains" && currentStepData.value !== void 0 && currentNode !== void 0 && !found && path.length > 0 && path[path.length - 1] !== currentStepData.value && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
|
|
7150
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold text-emerald-700", children: "Comparing:" }),
|
|
7151
|
+
" ",
|
|
7152
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
7153
|
+
currentStepData.value,
|
|
7154
|
+
" ",
|
|
7155
|
+
currentStepData.value < currentNode ? "<" : ">",
|
|
7156
|
+
" ",
|
|
7157
|
+
currentNode
|
|
7158
|
+
] }),
|
|
7159
|
+
" → ",
|
|
7160
|
+
/* @__PURE__ */ jsxs("span", { className: `font-bold ${currentStepData.value < currentNode ? "text-blue-600" : "text-orange-600"}`, children: [
|
|
7161
|
+
"Go ",
|
|
7162
|
+
currentStepData.value < currentNode ? "LEFT" : "RIGHT"
|
|
7163
|
+
] })
|
|
7164
|
+
] }) }),
|
|
7165
|
+
found === true && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center text-green-800 font-bold", children: [
|
|
7166
|
+
"✓ Found! ",
|
|
7167
|
+
currentStepData.value,
|
|
7168
|
+
" == ",
|
|
7169
|
+
currentNode
|
|
7170
|
+
] }) }),
|
|
7171
|
+
found === false && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300", children: /* @__PURE__ */ jsx("div", { className: "text-xs text-center text-red-800 font-bold", children: "✗ Not found! Reached null (no more children to check)" }) })
|
|
7172
|
+
] }),
|
|
6978
7173
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
6979
7174
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Binary Search Tree" }),
|
|
6980
7175
|
/* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: tree ? /* @__PURE__ */ jsx("svg", { width: "300", height: "250", className: "mx-auto", children: renderTree(tree) }) : /* @__PURE__ */ jsx("div", { className: "h-32 flex items-center justify-center text-gray-400 text-sm", children: "Empty tree" }) })
|
|
@@ -7438,6 +7633,7 @@ const HEAP_CODE = [
|
|
|
7438
7633
|
const LEGEND_ITEMS$6 = [
|
|
7439
7634
|
{ color: "bg-purple-100", label: "Root (min)", border: "#c4b5fd" },
|
|
7440
7635
|
{ color: "bg-purple-500", label: "Active" },
|
|
7636
|
+
{ color: "bg-purple-200", label: "Sift Path", border: "#a78bfa" },
|
|
7441
7637
|
{ color: "bg-yellow-300", label: "Comparing" },
|
|
7442
7638
|
{ color: "bg-green-400", label: "Swapped" }
|
|
7443
7639
|
];
|
|
@@ -7454,6 +7650,15 @@ function generateHeapSteps() {
|
|
|
7454
7650
|
if (op === "offer" && value !== void 0) {
|
|
7455
7651
|
heap.push(value);
|
|
7456
7652
|
let idx = heap.length - 1;
|
|
7653
|
+
const getPathToRoot = (index) => {
|
|
7654
|
+
const path = [index];
|
|
7655
|
+
let i = index;
|
|
7656
|
+
while (i > 0) {
|
|
7657
|
+
i = Math.floor((i - 1) / 2);
|
|
7658
|
+
path.push(i);
|
|
7659
|
+
}
|
|
7660
|
+
return path;
|
|
7661
|
+
};
|
|
7457
7662
|
steps.push({
|
|
7458
7663
|
operation: "offer",
|
|
7459
7664
|
value,
|
|
@@ -7461,7 +7666,9 @@ function generateHeapSteps() {
|
|
|
7461
7666
|
description: `offer(${value}): Add to end of heap at index ${idx}`,
|
|
7462
7667
|
codeLine: 1,
|
|
7463
7668
|
variables: { value, index: idx },
|
|
7464
|
-
highlightIndex: idx
|
|
7669
|
+
highlightIndex: idx,
|
|
7670
|
+
siftPath: getPathToRoot(idx),
|
|
7671
|
+
currentIndex: idx
|
|
7465
7672
|
});
|
|
7466
7673
|
while (idx > 0) {
|
|
7467
7674
|
const parentIdx = Math.floor((idx - 1) / 2);
|
|
@@ -7476,7 +7683,9 @@ function generateHeapSteps() {
|
|
|
7476
7683
|
child: heap[idx],
|
|
7477
7684
|
parentVal: heap[parentIdx]
|
|
7478
7685
|
},
|
|
7479
|
-
compareIndices: [idx, parentIdx]
|
|
7686
|
+
compareIndices: [idx, parentIdx],
|
|
7687
|
+
siftPath: getPathToRoot(idx),
|
|
7688
|
+
currentIndex: idx
|
|
7480
7689
|
});
|
|
7481
7690
|
if (heap[idx] < heap[parentIdx]) {
|
|
7482
7691
|
[heap[idx], heap[parentIdx]] = [heap[parentIdx], heap[idx]];
|
|
@@ -7487,7 +7696,9 @@ function generateHeapSteps() {
|
|
|
7487
7696
|
codeLine: 8,
|
|
7488
7697
|
variables: { swapped: heap[parentIdx], index: parentIdx },
|
|
7489
7698
|
swapIndices: [idx, parentIdx],
|
|
7490
|
-
highlightIndex: parentIdx
|
|
7699
|
+
highlightIndex: parentIdx,
|
|
7700
|
+
siftPath: getPathToRoot(parentIdx),
|
|
7701
|
+
currentIndex: parentIdx
|
|
7491
7702
|
});
|
|
7492
7703
|
idx = parentIdx;
|
|
7493
7704
|
} else {
|
|
@@ -7497,7 +7708,9 @@ function generateHeapSteps() {
|
|
|
7497
7708
|
description: `siftUp: ${heap[idx]} >= ${heap[parentIdx]}, heap property satisfied!`,
|
|
7498
7709
|
codeLine: 7,
|
|
7499
7710
|
variables: { index: idx },
|
|
7500
|
-
highlightIndex: idx
|
|
7711
|
+
highlightIndex: idx,
|
|
7712
|
+
siftPath: getPathToRoot(idx),
|
|
7713
|
+
currentIndex: idx
|
|
7501
7714
|
});
|
|
7502
7715
|
break;
|
|
7503
7716
|
}
|
|
@@ -7507,6 +7720,21 @@ function generateHeapSteps() {
|
|
|
7507
7720
|
const removed = heap[0];
|
|
7508
7721
|
const last = heap.pop();
|
|
7509
7722
|
if (last === void 0) continue;
|
|
7723
|
+
const getPathToLeaf = (heapSize, startIdx) => {
|
|
7724
|
+
const path = [startIdx];
|
|
7725
|
+
let i = startIdx;
|
|
7726
|
+
while (2 * i + 1 < heapSize) {
|
|
7727
|
+
const left = 2 * i + 1;
|
|
7728
|
+
const right = 2 * i + 2;
|
|
7729
|
+
if (right < heapSize) {
|
|
7730
|
+
path.push(left, right);
|
|
7731
|
+
} else {
|
|
7732
|
+
path.push(left);
|
|
7733
|
+
}
|
|
7734
|
+
i = left;
|
|
7735
|
+
}
|
|
7736
|
+
return path;
|
|
7737
|
+
};
|
|
7510
7738
|
if (heap.length === 0) {
|
|
7511
7739
|
steps.push({
|
|
7512
7740
|
operation: "poll",
|
|
@@ -7526,7 +7754,9 @@ function generateHeapSteps() {
|
|
|
7526
7754
|
description: `poll(): Remove min ${removed}, move last element ${last} to root`,
|
|
7527
7755
|
codeLine: 13,
|
|
7528
7756
|
variables: { removed, moved: last },
|
|
7529
|
-
highlightIndex: 0
|
|
7757
|
+
highlightIndex: 0,
|
|
7758
|
+
siftPath: getPathToLeaf(heap.length, 0),
|
|
7759
|
+
currentIndex: 0
|
|
7530
7760
|
});
|
|
7531
7761
|
let idx = 0;
|
|
7532
7762
|
while (true) {
|
|
@@ -7546,7 +7776,8 @@ function generateHeapSteps() {
|
|
|
7546
7776
|
description: `siftDown: ${heap[idx]} is smaller than children, heap property satisfied!`,
|
|
7547
7777
|
codeLine: 14,
|
|
7548
7778
|
variables: { index: idx, value: heap[idx] },
|
|
7549
|
-
highlightIndex: idx
|
|
7779
|
+
highlightIndex: idx,
|
|
7780
|
+
currentIndex: idx
|
|
7550
7781
|
});
|
|
7551
7782
|
break;
|
|
7552
7783
|
}
|
|
@@ -7560,7 +7791,9 @@ function generateHeapSteps() {
|
|
|
7560
7791
|
child: heap[smallestIdx],
|
|
7561
7792
|
childIdx: smallestIdx
|
|
7562
7793
|
},
|
|
7563
|
-
compareIndices: [idx, smallestIdx]
|
|
7794
|
+
compareIndices: [idx, smallestIdx],
|
|
7795
|
+
siftPath: [idx, leftIdx < heap.length ? leftIdx : -1, rightIdx < heap.length ? rightIdx : -1].filter((i) => i >= 0),
|
|
7796
|
+
currentIndex: idx
|
|
7564
7797
|
});
|
|
7565
7798
|
[heap[idx], heap[smallestIdx]] = [heap[smallestIdx], heap[idx]];
|
|
7566
7799
|
steps.push({
|
|
@@ -7570,7 +7803,8 @@ function generateHeapSteps() {
|
|
|
7570
7803
|
codeLine: 14,
|
|
7571
7804
|
variables: { index: smallestIdx },
|
|
7572
7805
|
swapIndices: [idx, smallestIdx],
|
|
7573
|
-
highlightIndex: smallestIdx
|
|
7806
|
+
highlightIndex: smallestIdx,
|
|
7807
|
+
currentIndex: smallestIdx
|
|
7574
7808
|
});
|
|
7575
7809
|
idx = smallestIdx;
|
|
7576
7810
|
}
|
|
@@ -7696,7 +7930,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
7696
7930
|
heap: [],
|
|
7697
7931
|
description: ""
|
|
7698
7932
|
};
|
|
7699
|
-
const { heap, highlightIndex, swapIndices, compareIndices, description } = currentStepData;
|
|
7933
|
+
const { heap, highlightIndex, swapIndices, compareIndices, description, siftPath, currentIndex } = currentStepData;
|
|
7700
7934
|
const positions = getTreePositions(heap.length);
|
|
7701
7935
|
const getNodeStyle = (idx) => {
|
|
7702
7936
|
if (idx === highlightIndex) {
|
|
@@ -7708,11 +7942,25 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
7708
7942
|
if (compareIndices == null ? void 0 : compareIndices.includes(idx)) {
|
|
7709
7943
|
return "fill-yellow-300 stroke-yellow-400";
|
|
7710
7944
|
}
|
|
7945
|
+
if ((siftPath == null ? void 0 : siftPath.includes(idx)) && idx !== currentIndex) {
|
|
7946
|
+
return "fill-purple-200 stroke-purple-400";
|
|
7947
|
+
}
|
|
7711
7948
|
if (idx === 0) {
|
|
7712
7949
|
return "fill-purple-100 stroke-purple-300";
|
|
7713
7950
|
}
|
|
7714
7951
|
return "fill-white stroke-gray-300";
|
|
7715
7952
|
};
|
|
7953
|
+
const isEdgeOnPath = (parentIdx, childIdx) => {
|
|
7954
|
+
if (!siftPath || siftPath.length < 2) return false;
|
|
7955
|
+
for (let i = 0; i < siftPath.length - 1; i++) {
|
|
7956
|
+
const a = siftPath[i];
|
|
7957
|
+
const b = siftPath[i + 1];
|
|
7958
|
+
if (a === parentIdx && b === childIdx || a === childIdx && b === parentIdx) {
|
|
7959
|
+
return true;
|
|
7960
|
+
}
|
|
7961
|
+
}
|
|
7962
|
+
return false;
|
|
7963
|
+
};
|
|
7716
7964
|
const getTextColor = (idx) => {
|
|
7717
7965
|
if (idx === highlightIndex || (swapIndices == null ? void 0 : swapIndices.includes(idx))) {
|
|
7718
7966
|
return "white";
|
|
@@ -7733,6 +7981,49 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
7733
7981
|
] }) }) }),
|
|
7734
7982
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
7735
7983
|
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, children: [
|
|
7984
|
+
/* @__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: [
|
|
7985
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
|
|
7986
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "🏔️" }),
|
|
7987
|
+
" Min-Heap Property"
|
|
7988
|
+
] }),
|
|
7989
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-purple-200", children: [
|
|
7990
|
+
/* @__PURE__ */ jsx("div", { className: "text-center text-purple-700 font-bold mb-2", children: "heap[parent] ≤ heap[children]" }),
|
|
7991
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs text-gray-600", children: [
|
|
7992
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
|
|
7993
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold", children: "parent(i)" }),
|
|
7994
|
+
" = ⌊(i-1)/2⌋"
|
|
7995
|
+
] }),
|
|
7996
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
|
|
7997
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold", children: "left(i)" }),
|
|
7998
|
+
" = 2i + 1"
|
|
7999
|
+
] }),
|
|
8000
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
|
|
8001
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold", children: "right(i)" }),
|
|
8002
|
+
" = 2i + 2"
|
|
8003
|
+
] })
|
|
8004
|
+
] })
|
|
8005
|
+
] }),
|
|
8006
|
+
currentIndex !== void 0 && currentIndex >= 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-purple-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 text-center", children: [
|
|
8007
|
+
/* @__PURE__ */ jsxs("span", { className: "font-semibold text-purple-700", children: [
|
|
8008
|
+
"Current: i = ",
|
|
8009
|
+
currentIndex
|
|
8010
|
+
] }),
|
|
8011
|
+
currentIndex > 0 && /* @__PURE__ */ jsxs("span", { className: "mx-2", children: [
|
|
8012
|
+
"→ parent(",
|
|
8013
|
+
currentIndex,
|
|
8014
|
+
") = ⌊(",
|
|
8015
|
+
currentIndex,
|
|
8016
|
+
"-1)/2⌋ = ",
|
|
8017
|
+
/* @__PURE__ */ jsx("span", { className: "text-purple-600 font-bold", children: Math.floor((currentIndex - 1) / 2) })
|
|
8018
|
+
] }),
|
|
8019
|
+
2 * currentIndex + 1 < heap.length && /* @__PURE__ */ jsxs("span", { className: "mx-2", children: [
|
|
8020
|
+
"→ left(",
|
|
8021
|
+
currentIndex,
|
|
8022
|
+
") = ",
|
|
8023
|
+
/* @__PURE__ */ jsx("span", { className: "text-purple-600 font-bold", children: 2 * currentIndex + 1 })
|
|
8024
|
+
] })
|
|
8025
|
+
] }) })
|
|
8026
|
+
] }),
|
|
7736
8027
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
7737
8028
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Binary Heap Structure" }),
|
|
7738
8029
|
/* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: heap.length > 0 ? /* @__PURE__ */ jsxs(
|
|
@@ -7749,6 +8040,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
7749
8040
|
const childPos = positions[idx];
|
|
7750
8041
|
if (!parentPos || !childPos) return null;
|
|
7751
8042
|
const isHighlighted = (compareIndices == null ? void 0 : compareIndices.includes(idx)) && (compareIndices == null ? void 0 : compareIndices.includes(parentIdx)) || (swapIndices == null ? void 0 : swapIndices.includes(idx)) && (swapIndices == null ? void 0 : swapIndices.includes(parentIdx));
|
|
8043
|
+
const isOnPath = isEdgeOnPath(parentIdx, idx);
|
|
7752
8044
|
return /* @__PURE__ */ jsx(
|
|
7753
8045
|
"line",
|
|
7754
8046
|
{
|
|
@@ -7756,8 +8048,9 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
7756
8048
|
y1: parentPos.y,
|
|
7757
8049
|
x2: childPos.x,
|
|
7758
8050
|
y2: childPos.y,
|
|
7759
|
-
stroke: isHighlighted ? "#a855f7" : "#d1d5db",
|
|
7760
|
-
strokeWidth: isHighlighted ? 2 : 1
|
|
8051
|
+
stroke: isHighlighted ? "#a855f7" : isOnPath ? "#c4b5fd" : "#d1d5db",
|
|
8052
|
+
strokeWidth: isHighlighted ? 3 : isOnPath ? 2 : 1,
|
|
8053
|
+
strokeDasharray: isOnPath && !isHighlighted ? "4,2" : void 0
|
|
7761
8054
|
},
|
|
7762
8055
|
`edge-${idx}`
|
|
7763
8056
|
);
|
|
@@ -7774,7 +8067,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
7774
8067
|
"circle",
|
|
7775
8068
|
{
|
|
7776
8069
|
r: "18",
|
|
7777
|
-
className: `${getNodeStyle(idx)} stroke-2 transition-
|
|
8070
|
+
className: `${getNodeStyle(idx)} stroke-2 transition-colors`
|
|
7778
8071
|
}
|
|
7779
8072
|
),
|
|
7780
8073
|
/* @__PURE__ */ jsx(
|
|
@@ -8153,6 +8446,25 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
|
|
|
8153
8446
|
] }) }),
|
|
8154
8447
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8155
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
|
+
] }),
|
|
8156
8468
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
8157
8469
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Segments (independent locks)" }),
|
|
8158
8470
|
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: segments.map((seg, idx) => /* @__PURE__ */ jsxs(
|
|
@@ -8503,13 +8815,39 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8503
8815
|
] }) }) }),
|
|
8504
8816
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8505
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
|
+
] }),
|
|
8506
8844
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
|
|
8507
8845
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
8508
8846
|
/* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 mb-2 text-center", children: "Producers" }),
|
|
8509
8847
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ["P1", "P2"].map((p) => /* @__PURE__ */ jsxs(
|
|
8510
8848
|
"div",
|
|
8511
8849
|
{
|
|
8512
|
-
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"}`,
|
|
8513
8851
|
children: [
|
|
8514
8852
|
p,
|
|
8515
8853
|
blockedProducers.includes(p) && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
|
|
@@ -8530,7 +8868,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8530
8868
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: queue.length > 0 ? queue.map((item, idx) => /* @__PURE__ */ jsx(
|
|
8531
8869
|
"div",
|
|
8532
8870
|
{
|
|
8533
|
-
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"}`,
|
|
8534
8872
|
children: item.value
|
|
8535
8873
|
},
|
|
8536
8874
|
item.id
|
|
@@ -8538,7 +8876,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8538
8876
|
/* @__PURE__ */ jsx("div", { className: "mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
8539
8877
|
"div",
|
|
8540
8878
|
{
|
|
8541
|
-
className: `h-full transition-
|
|
8879
|
+
className: `h-full transition-colors ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
|
|
8542
8880
|
style: { width: `${queue.length / capacity * 100}%` }
|
|
8543
8881
|
}
|
|
8544
8882
|
) })
|
|
@@ -8549,7 +8887,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
|
|
|
8549
8887
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ["C1", "C2"].map((c) => /* @__PURE__ */ jsxs(
|
|
8550
8888
|
"div",
|
|
8551
8889
|
{
|
|
8552
|
-
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"}`,
|
|
8553
8891
|
children: [
|
|
8554
8892
|
c,
|
|
8555
8893
|
blockedConsumers.includes(c) && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
|
|
@@ -8833,7 +9171,7 @@ const CopyOnWriteVisualizerComponent = ({
|
|
|
8833
9171
|
/* @__PURE__ */ jsx("div", { className: "flex justify-center gap-1", children: arr.map((item, idx) => /* @__PURE__ */ jsx(
|
|
8834
9172
|
"div",
|
|
8835
9173
|
{
|
|
8836
|
-
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"}`,
|
|
8837
9175
|
children: item
|
|
8838
9176
|
},
|
|
8839
9177
|
idx
|
|
@@ -8874,6 +9212,25 @@ const CopyOnWriteVisualizerComponent = ({
|
|
|
8874
9212
|
] }) }),
|
|
8875
9213
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
8876
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
|
+
] }),
|
|
8877
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: [
|
|
8878
9235
|
renderArray(oldArray, "Old Array (readers use this)"),
|
|
8879
9236
|
/* @__PURE__ */ jsx("div", { className: "text-2xl text-gray-400", children: "→" }),
|
|
@@ -9151,7 +9508,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
|
|
|
9151
9508
|
original.map((item, idx) => /* @__PURE__ */ jsx(
|
|
9152
9509
|
"div",
|
|
9153
9510
|
{
|
|
9154
|
-
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"}`,
|
|
9155
9512
|
children: item
|
|
9156
9513
|
},
|
|
9157
9514
|
idx
|
|
@@ -9584,14 +9941,14 @@ const GCVisualizerComponent = ({
|
|
|
9584
9941
|
/* @__PURE__ */ jsx(
|
|
9585
9942
|
"div",
|
|
9586
9943
|
{
|
|
9587
|
-
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",
|
|
9588
9945
|
style: { width: `${fillPercent}%` }
|
|
9589
9946
|
}
|
|
9590
9947
|
),
|
|
9591
9948
|
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-wrap items-center gap-1 p-1", children: genObjects.map((obj) => /* @__PURE__ */ jsxs(
|
|
9592
9949
|
"div",
|
|
9593
9950
|
{
|
|
9594
|
-
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)}`,
|
|
9595
9952
|
title: `${obj.id} (age: ${obj.age}, ${obj.reachable ? "reachable" : "garbage"})`,
|
|
9596
9953
|
children: [
|
|
9597
9954
|
obj.id.replace("obj", ""),
|
|
@@ -9649,6 +10006,28 @@ const GCVisualizerComponent = ({
|
|
|
9649
10006
|
] }) }),
|
|
9650
10007
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
9651
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
|
+
] }),
|
|
9652
10031
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
9653
10032
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "JVM Heap Memory" }),
|
|
9654
10033
|
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: [
|