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