@tomaszjarosz/react-visualizers 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +53 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +53 -34
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -3240,7 +3240,58 @@ const DijkstraVisualizerComponent = ({
|
|
|
3240
3240
|
] })
|
|
3241
3241
|
] }) }) }),
|
|
3242
3242
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-4 min-w-0", children: [
|
|
3243
|
-
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight:
|
|
3243
|
+
/* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 500, className: "flex-1 min-w-0", children: [
|
|
3244
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border-2 border-orange-200", children: [
|
|
3245
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-orange-800 mb-3", children: "Distance Array (shortest paths from node 0)" }),
|
|
3246
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: distances.map((dist, idx) => {
|
|
3247
|
+
const isSource = idx === 0;
|
|
3248
|
+
const isCurrent = idx === current;
|
|
3249
|
+
const isVisited = visited.includes(idx);
|
|
3250
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3251
|
+
"div",
|
|
3252
|
+
{
|
|
3253
|
+
className: `flex flex-col items-center p-2 rounded-lg border-2 min-w-[60px] transition-colors ${isCurrent ? "bg-yellow-100 border-yellow-400 ring-2 ring-yellow-300" : isVisited ? "bg-green-100 border-green-400" : "bg-white border-gray-300"}`,
|
|
3254
|
+
children: [
|
|
3255
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-xs font-medium ${isCurrent ? "text-yellow-800" : isVisited ? "text-green-800" : "text-gray-500"}`, children: [
|
|
3256
|
+
"Node ",
|
|
3257
|
+
idx,
|
|
3258
|
+
isSource && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: "(src)" })
|
|
3259
|
+
] }),
|
|
3260
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-xl font-bold font-mono ${isCurrent ? "text-yellow-900" : isVisited ? "text-green-900" : "text-gray-700"}`, children: dist === Infinity ? "∞" : dist }),
|
|
3261
|
+
isCurrent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-yellow-700 font-bold", children: "← PROCESSING" }),
|
|
3262
|
+
isVisited && !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-green-600", children: "✓ Final" })
|
|
3263
|
+
]
|
|
3264
|
+
},
|
|
3265
|
+
idx
|
|
3266
|
+
);
|
|
3267
|
+
}) })
|
|
3268
|
+
] }),
|
|
3269
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200", children: [
|
|
3270
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blue-800 mb-2", children: "Relaxation Formula" }),
|
|
3271
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm text-center", children: [
|
|
3272
|
+
"if dist[u] + weight(u,v) < dist[v] → ",
|
|
3273
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600 font-bold", children: "update dist[v]" })
|
|
3274
|
+
] })
|
|
3275
|
+
] }),
|
|
3276
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 rounded-lg border border-orange-200", children: [
|
|
3277
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
|
|
3278
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-orange-800", children: "Priority Queue (min-heap)" }),
|
|
3279
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-orange-600", children: "(node:distance)" })
|
|
3280
|
+
] }),
|
|
3281
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: priorityQueue.length > 0 ? priorityQueue.sort((a, b) => a.dist - b.dist).map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3282
|
+
"span",
|
|
3283
|
+
{
|
|
3284
|
+
className: `px-3 py-1.5 rounded-lg font-mono text-sm font-medium ${index === 0 ? "bg-orange-200 text-orange-900 ring-2 ring-orange-400" : "bg-white text-orange-800 border border-orange-300"}`,
|
|
3285
|
+
children: [
|
|
3286
|
+
item.node,
|
|
3287
|
+
":",
|
|
3288
|
+
item.dist,
|
|
3289
|
+
index === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs", children: "← MIN" })
|
|
3290
|
+
]
|
|
3291
|
+
},
|
|
3292
|
+
index
|
|
3293
|
+
)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400 italic", children: "empty" }) })
|
|
3294
|
+
] }),
|
|
3244
3295
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 420 300", className: "w-full h-64 md:h-72", children: [
|
|
3245
3296
|
graph.edges.map((edge, index) => {
|
|
3246
3297
|
const fromNode = graph.nodes[edge.from];
|
|
@@ -3310,7 +3361,7 @@ const DijkstraVisualizerComponent = ({
|
|
|
3310
3361
|
cx: node.x,
|
|
3311
3362
|
cy: node.y,
|
|
3312
3363
|
r: 22,
|
|
3313
|
-
className: `${getNodeColor(node.id)} stroke-2 transition-
|
|
3364
|
+
className: `${getNodeColor(node.id)} stroke-2 transition-colors duration-300`
|
|
3314
3365
|
}
|
|
3315
3366
|
),
|
|
3316
3367
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3325,38 +3376,6 @@ const DijkstraVisualizerComponent = ({
|
|
|
3325
3376
|
)
|
|
3326
3377
|
] }, node.id))
|
|
3327
3378
|
] }) }),
|
|
3328
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-3", children: [
|
|
3329
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
3330
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: "Dist:" }),
|
|
3331
|
-
distances.map((dist, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3332
|
-
"span",
|
|
3333
|
-
{
|
|
3334
|
-
className: `px-2 py-0.5 text-xs font-mono rounded ${idx === current ? "bg-yellow-200 text-yellow-900" : visited.includes(idx) ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-600"}`,
|
|
3335
|
-
children: [
|
|
3336
|
-
idx,
|
|
3337
|
-
":",
|
|
3338
|
-
dist === Infinity ? "∞" : dist
|
|
3339
|
-
]
|
|
3340
|
-
},
|
|
3341
|
-
idx
|
|
3342
|
-
))
|
|
3343
|
-
] }),
|
|
3344
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
3345
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: "PQ:" }),
|
|
3346
|
-
priorityQueue.length > 0 ? priorityQueue.sort((a, b) => a.dist - b.dist).map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3347
|
-
"span",
|
|
3348
|
-
{
|
|
3349
|
-
className: "px-2 py-0.5 bg-orange-100 text-orange-800 text-xs rounded font-mono",
|
|
3350
|
-
children: [
|
|
3351
|
-
item.node,
|
|
3352
|
-
":",
|
|
3353
|
-
item.dist
|
|
3354
|
-
]
|
|
3355
|
-
},
|
|
3356
|
-
index
|
|
3357
|
-
)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "empty" })
|
|
3358
|
-
] })
|
|
3359
|
-
] }),
|
|
3360
3379
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3361
3380
|
StatusPanel,
|
|
3362
3381
|
{
|