@tomaszjarosz/react-visualizers 0.2.13 → 0.2.14

package/dist/index.js

@@ -1635,11 +1635,46 @@ const ALGORITHM_NAMES$1 = {
   merge: "MergeSort"
 };
 const ALGORITHM_COMPLEXITIES$1 = {
-  bubble: { time: "O(n²)", space: "O(1)" },
-  selection: { time: "O(n²)", space: "O(1)" },
-  insertion: { time: "O(n²)", space: "O(1)" },
-  quick: { time: "O(n log n)", space: "O(log n)" },
-  merge: { time: "O(n log n)", space: "O(n)" }
+  bubble: {
+    time: "O(n²)",
+    best: "O(n)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: true
+  },
+  selection: {
+    time: "O(n²)",
+    best: "O(n²)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: false
+  },
+  insertion: {
+    time: "O(n²)",
+    best: "O(n)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: true
+  },
+  quick: {
+    time: "O(n log n)",
+    best: "O(n log n)",
+    average: "O(n log n)",
+    worst: "O(n²)",
+    space: "O(log n)",
+    stable: false
+  },
+  merge: {
+    time: "O(n log n)",
+    best: "O(n log n)",
+    average: "O(n log n)",
+    worst: "O(n log n)",
+    space: "O(n)",
+    stable: true
+  }
 };
 const ALGORITHM_CODE$1 = {
   bubble: [
@@ -2640,6 +2675,7 @@ const SortingVisualizerComponent = ({
   const [customArray, setCustomArray] = useState(null);
   const [historyCollapsed, setHistoryCollapsed] = useState(true);
   const [urlStateLoaded, setUrlStateLoaded] = useState(false);
+  const [showComplexityTable, setShowComplexityTable] = useState(false);
   const playingRef = useRef(false);
   const timeoutRef = useRef(null);
   const VISUALIZER_ID = "sorting-visualizer";
@@ -2944,6 +2980,63 @@ const SortingVisualizerComponent = ({
             /* @__PURE__ */ jsx(HelpPanel, {})
           ] })
         ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setShowComplexityTable(!showComplexityTable),
+              className: "flex items-center gap-2 text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: `w-4 h-4 transition-transform ${showComplexityTable ? "rotate-90" : ""}`,
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                  }
+                ),
+                "Algorithm Complexity Comparison"
+              ]
+            }
+          ),
+          showComplexityTable && /* @__PURE__ */ jsxs("div", { className: "mt-3 p-4 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl border border-indigo-200", children: [
+            /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-left text-indigo-900", children: [
+                /* @__PURE__ */ jsx("th", { className: "pb-2 pr-4 font-semibold", children: "Algorithm" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Best" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Average" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Worst" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Space" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 pl-3 font-semibold text-center", children: "Stable" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { className: "text-gray-700", children: Object.keys(ALGORITHM_NAMES$1).map((alg) => {
+                const comp = ALGORITHM_COMPLEXITIES$1[alg];
+                const isCurrentAlgorithm = alg === algorithm;
+                return /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: `border-t border-indigo-100 ${isCurrentAlgorithm ? "bg-indigo-100/50 font-medium" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsx("td", { className: "py-2 pr-4", children: /* @__PURE__ */ jsx("span", { className: isCurrentAlgorithm ? "text-indigo-700" : "", children: ALGORITHM_NAMES$1[alg] }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.best.includes("log") ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: comp.best }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.average.includes("log") ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: comp.average }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.worst.includes("log") ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`, children: comp.worst }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.space === "O(1)" ? "bg-green-100 text-green-700" : "bg-purple-100 text-purple-700"}`, children: comp.space }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 pl-3 text-center", children: comp.stable ? /* @__PURE__ */ jsx("span", { className: "text-green-600", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-red-400", children: "✗" }) })
+                    ]
+                  },
+                  alg
+                );
+              }) })
+            ] }) }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-indigo-600", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Stable:" }),
+              " A sorting algorithm is stable if elements with equal keys maintain their relative order."
+            ] })
+          ] })
+        ] }),
         showControls && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
           /* @__PURE__ */ jsx(
             ControlPanel,
@@ -17458,15 +17551,75 @@ const SQLJoinVisualizerComponent = ({
                 }) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400 text-center py-2", children: "No results yet" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-blue-700", children: [
-              /* @__PURE__ */ jsxs("strong", { children: [
-                joinType.toUpperCase(),
-                " JOIN:"
+            /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-lg border border-cyan-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 60", className: "w-24 h-14 flex-shrink-0", children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "35",
+                    cy: "30",
+                    r: "22",
+                    fill: joinType === "left" || joinType === "full" ? "#06b6d4" : joinType === "inner" ? "transparent" : "#e5e7eb",
+                    fillOpacity: joinType === "left" || joinType === "full" ? 0.6 : joinType === "inner" ? 0 : 0.5,
+                    stroke: "#0891b2",
+                    strokeWidth: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "65",
+                    cy: "30",
+                    r: "22",
+                    fill: joinType === "right" || joinType === "full" ? "#06b6d4" : joinType === "inner" ? "transparent" : "#e5e7eb",
+                    fillOpacity: joinType === "right" || joinType === "full" ? 0.6 : joinType === "inner" ? 0 : 0.5,
+                    stroke: "#0891b2",
+                    strokeWidth: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsx("clipPath", { id: "leftClip", children: /* @__PURE__ */ jsx("circle", { cx: "35", cy: "30", r: "22" }) }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "65",
+                    cy: "30",
+                    r: "22",
+                    fill: "#22c55e",
+                    fillOpacity: "0.7",
+                    clipPath: "url(#leftClip)"
+                  }
+                ),
+                /* @__PURE__ */ jsx("text", { x: "22", y: "33", fontSize: "8", fill: "#0e7490", fontWeight: "bold", children: "L" }),
+                /* @__PURE__ */ jsx("text", { x: "74", y: "33", fontSize: "8", fill: "#0e7490", fontWeight: "bold", children: "R" })
               ] }),
-              joinType === "inner" && " Returns only rows with matches in BOTH tables.",
-              joinType === "left" && " Returns ALL rows from left + matching rows from right (NULL if no match).",
-              joinType === "right" && " Returns ALL rows from right + matching rows from left (NULL if no match).",
-              joinType === "full" && " Returns ALL rows from BOTH tables (NULL where no match exists)."
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-cyan-800 mb-1", children: [
+                  joinType.toUpperCase(),
+                  " JOIN"
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "text-xs text-cyan-700", children: [
+                  joinType === "inner" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns only rows with matches in ",
+                    /* @__PURE__ */ jsx("strong", { children: "both" }),
+                    " tables (green intersection)."
+                  ] }),
+                  joinType === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsx("strong", { children: "all" }),
+                    " rows from left table + matching rows from right. NULL if no match."
+                  ] }),
+                  joinType === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsx("strong", { children: "all" }),
+                    " rows from right table + matching rows from left. NULL if no match."
+                  ] }),
+                  joinType === "full" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsx("strong", { children: "all" }),
+                    " rows from both tables. NULL where no match exists."
+                  ] })
+                ] })
+              ] })
             ] }) }),
             /* @__PURE__ */ jsx(
               StatusPanel,