@carlonicora/nextjs-jsonapi 1.97.2 → 1.99.0

package/src/components/forms/FormDateTime.tsx

@@ -26,6 +26,7 @@ export function FormDateTime({
   minDate,
   onChange,
   allowEmpty,
+  defaultMonth,
 }: {
   form: any;
   id: string;
@@ -34,12 +35,18 @@ export function FormDateTime({
   minDate?: Date;
   onChange?: (date?: Date) => Promise<void>;
   allowEmpty?: boolean;
+  defaultMonth?: Date;
 }) {
   const [open, setOpen] = useState<boolean>(false);
   const t = useI18nTranslations();
   const locale = useI18nLocale();
   const dateFnsLocale = useI18nDateFnsLocale();
 
+  const [displayMonth, setDisplayMonth] = useState<Date>(() => {
+    const currentValue = form.getValues(id);
+    return currentValue || defaultMonth || new Date();
+  });
+
   // Locale-aware date-time formatter
   const dateTimeFormatter = useMemo(
     () =>
@@ -123,7 +130,10 @@ export function FormDateTime({
                 <div className="flex flex-col space-y-4">
                   <Calendar
                     mode="single"
+                    captionLayout="dropdown"
                     selected={field.value}
+                    month={displayMonth}
+                    onMonthChange={setDisplayMonth}
                     onSelect={(date) => {
                       if (date) {
                         // Preserve the current time when selecting a new date
@@ -135,6 +145,7 @@ export function FormDateTime({
                           newDate.setHours(selectedHours, selectedMinutes);
                         }
                         form.setValue(id, newDate);
+                        setDisplayMonth(newDate);
                         if (onChange) onChange(newDate);
 
                         // Update time state values
@@ -144,6 +155,9 @@ export function FormDateTime({
                     }}
                     disabled={(date) => (minDate && date < minDate ? true : false)}
                     locale={dateFnsLocale}
+                    weekStartsOn={1}
+                    startMonth={new Date(1900, 0)}
+                    endMonth={new Date(new Date().getFullYear() + 10, 11)}
                   />
                   <div className="flex flex-row items-end justify-center space-x-4">
                     <div className="flex flex-col space-y-2">
@@ -201,14 +215,32 @@ export function FormDateTime({
                       </Select>
                     </div>
                   </div>
-                  <Button
-                    className="mt-2"
-                    onClick={() => {
-                      setOpen(false);
-                    }}
-                  >
-                    {t(`ui.buttons.select_date`)}
-                  </Button>
+                  <div className="mt-2 flex flex-row gap-x-2">
+                    {allowEmpty !== false && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="flex-1"
+                        disabled={!field.value}
+                        onClick={() => {
+                          if (onChange) onChange(undefined);
+                          form.setValue(id, "");
+                          setOpen(false);
+                        }}
+                      >
+                        {t(`ui.buttons.clear`)}
+                      </Button>
+                    )}
+                    <Button
+                      type="button"
+                      className="flex-1"
+                      onClick={() => {
+                        setOpen(false);
+                      }}
+                    >
+                      {t(`ui.buttons.select_date`)}
+                    </Button>
+                  </div>
                 </div>
               </PopoverContent>
             </Popover>

package/src/hooks/__tests__/computeLayeredLayout.spec.ts

@@ -0,0 +1,152 @@
+import { describe, expect, it } from "vitest";
+import { computeLayeredLayout } from "../computeLayeredLayout";
+import type { D3Link, D3Node } from "../../interfaces";
+
+function makeNode(id: string, name = id, extra: Partial<D3Node> = {}): D3Node {
+  return { id, name, instanceType: "test", ...extra };
+}
+
+function makeLink(source: string, target: string): D3Link {
+  return { source, target } as D3Link;
+}
+
+const MIN_WIDTH = 80;
+const MIN_HEIGHT = 80;
+
+describe("computeLayeredLayout", () => {
+  it("returns an empty map for an empty graph", () => {
+    const result = computeLayeredLayout([], [], {
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    expect(result!.size).toBe(0);
+  });
+
+  it("places a single isolated node at a finite coordinate", () => {
+    const nodes = [makeNode("a")];
+    const result = computeLayeredLayout(nodes, [], {
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    const pos = result!.get("a");
+    expect(pos).toBeDefined();
+    expect(Number.isFinite(pos!.x)).toBe(true);
+    expect(Number.isFinite(pos!.y)).toBe(true);
+  });
+
+  it("orders a linear chain left-to-right when rankdir=LR", () => {
+    const nodes = [makeNode("a"), makeNode("b"), makeNode("c")];
+    const links = [makeLink("a", "b"), makeLink("b", "c")];
+    const result = computeLayeredLayout(nodes, links, {
+      rankdir: "LR",
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    const a = result!.get("a")!;
+    const b = result!.get("b")!;
+    const c = result!.get("c")!;
+    expect(a.x).toBeLessThan(b.x);
+    expect(b.x).toBeLessThan(c.x);
+  });
+
+  it("orders a linear chain top-to-bottom when rankdir=TB", () => {
+    const nodes = [makeNode("a"), makeNode("b"), makeNode("c")];
+    const links = [makeLink("a", "b"), makeLink("b", "c")];
+    const result = computeLayeredLayout(nodes, links, {
+      rankdir: "TB",
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    const a = result!.get("a")!;
+    const b = result!.get("b")!;
+    const c = result!.get("c")!;
+    expect(a.y).toBeLessThan(b.y);
+    expect(b.y).toBeLessThan(c.y);
+  });
+
+  it("places siblings on the same rank but separated", () => {
+    const nodes = [makeNode("a"), makeNode("b"), makeNode("c")];
+    const links = [makeLink("a", "b"), makeLink("a", "c")];
+    const result = computeLayeredLayout(nodes, links, {
+      rankdir: "LR",
+      nodesep: 50,
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    const a = result!.get("a")!;
+    const b = result!.get("b")!;
+    const c = result!.get("c")!;
+    expect(b.x).toBeGreaterThan(a.x);
+    expect(c.x).toBeGreaterThan(a.x);
+    expect(Math.abs(b.x - c.x)).toBeLessThan(5);
+    expect(Math.abs(b.y - c.y)).toBeGreaterThanOrEqual(50);
+  });
+
+  it("uses label width to widen ranks for long names", () => {
+    const nodes = [makeNode("a", "x"), makeNode("b", "x".repeat(50))];
+    const links = [makeLink("a", "b")];
+    const narrow = computeLayeredLayout(nodes, links, {
+      rankdir: "LR",
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    const wider = computeLayeredLayout(
+      [makeNode("a", "x".repeat(50)), makeNode("b", "x".repeat(50))],
+      [makeLink("a", "b")],
+      {
+        rankdir: "LR",
+        minNodeWidth: MIN_WIDTH,
+        minNodeHeight: MIN_HEIGHT,
+      },
+    );
+    const narrowGap = narrow!.get("b")!.x - narrow!.get("a")!.x;
+    const widerGap = wider!.get("b")!.x - wider!.get("a")!.x;
+    expect(widerGap).toBeGreaterThan(narrowGap);
+  });
+
+  it("handles a scene-shaped graph (scene chain + location branches)", () => {
+    const nodes = [
+      makeNode("s1", "Scene 1", { instanceType: "scenes" }),
+      makeNode("s2", "Scene 2", { instanceType: "scenes" }),
+      makeNode("s3", "Scene 3", { instanceType: "scenes" }),
+      makeNode("loc1", "Loc 1", { instanceType: "locations" }),
+      makeNode("loc2", "Loc 2", { instanceType: "locations" }),
+      makeNode("loc3", "Loc 3", { instanceType: "locations" }),
+    ];
+    const links = [
+      makeLink("s1", "s2"),
+      makeLink("s2", "s3"),
+      makeLink("s1", "loc1"),
+      makeLink("s2", "loc2"),
+      makeLink("s3", "loc3"),
+    ];
+    const result = computeLayeredLayout(nodes, links, {
+      rankdir: "LR",
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    expect(result!.size).toBe(6);
+    expect(result!.get("s1")!.x).toBeLessThan(result!.get("s2")!.x);
+    expect(result!.get("s2")!.x).toBeLessThan(result!.get("s3")!.x);
+    expect(result!.get("loc1")!.x).toBeGreaterThan(result!.get("s1")!.x);
+    expect(result!.get("loc2")!.x).toBeGreaterThan(result!.get("s2")!.x);
+    expect(result!.get("loc3")!.x).toBeGreaterThan(result!.get("s3")!.x);
+  });
+
+  it("ignores links to/from unknown nodes", () => {
+    const nodes = [makeNode("a"), makeNode("b")];
+    const links = [makeLink("a", "b"), makeLink("a", "ghost"), makeLink("ghost", "b")];
+    const result = computeLayeredLayout(nodes, links, {
+      minNodeWidth: MIN_WIDTH,
+      minNodeHeight: MIN_HEIGHT,
+    });
+    expect(result).not.toBeNull();
+    expect(result!.size).toBe(2);
+  });
+});

package/src/hooks/computeLayeredLayout.ts

@@ -0,0 +1,96 @@
+import * as dagre from "dagre";
+import { D3Link, D3Node } from "../interfaces";
+
+export type LayeredRankDir = "LR" | "RL" | "TB" | "BT";
+
+export interface LayeredLayoutOptions {
+  rankdir?: LayeredRankDir;
+  nodesep?: number;
+  ranksep?: number;
+  minNodeWidth: number;
+  minNodeHeight: number;
+}
+
+export interface LayeredLayoutPosition {
+  x: number;
+  y: number;
+}
+
+const DEFAULT_RANKDIR: LayeredRankDir = "LR";
+const DEFAULT_NODESEP = 50;
+const DEFAULT_RANKSEP = 120;
+
+const TITLE_PX_PER_CHAR_16 = 8;
+const NAME_PX_PER_CHAR_12 = 6.5;
+const NAME_PX_PER_CHAR_16_BOLD = 8;
+const SUBTITLE_PX_PER_CHAR_11 = 6;
+const LABEL_PADDING_PX = 16;
+
+function estimateLabelWidth(node: D3Node): number {
+  if (node.subtitle) {
+    const titleWidth = (node.name?.length ?? 0) * TITLE_PX_PER_CHAR_16;
+    const subtitleWidth = node.subtitle.length * SUBTITLE_PX_PER_CHAR_11;
+    return Math.max(titleWidth, subtitleWidth) + LABEL_PADDING_PX;
+  }
+  const perChar = node.bold ? NAME_PX_PER_CHAR_16_BOLD : NAME_PX_PER_CHAR_12;
+  return (node.name?.length ?? 0) * perChar + LABEL_PADDING_PX;
+}
+
+function linkEndpointId(end: D3Link["source"] | D3Link["target"]): string {
+  return typeof end === "string" ? end : end.id;
+}
+
+/**
+ * Compute a layered DAG layout using dagre. Pure function: no DOM, no React,
+ * no d3 globals. Returns a Map of node.id -> { x, y } in graph coordinates.
+ *
+ * Returns null if dagre.layout throws (e.g. an unexpected cycle). Callers
+ * should fall back to their previous layout in that case.
+ */
+export function computeLayeredLayout(
+  nodes: D3Node[],
+  links: D3Link[],
+  opts: LayeredLayoutOptions,
+): Map<string, LayeredLayoutPosition> | null {
+  if (nodes.length === 0) return new Map();
+
+  const rankdir = opts.rankdir ?? DEFAULT_RANKDIR;
+  const nodesep = opts.nodesep ?? DEFAULT_NODESEP;
+  const ranksep = opts.ranksep ?? DEFAULT_RANKSEP;
+
+  const g = new dagre.graphlib.Graph({ directed: true });
+  g.setGraph({ rankdir, nodesep, ranksep, marginx: 20, marginy: 20 });
+  g.setDefaultEdgeLabel(() => ({}));
+
+  for (const node of nodes) {
+    const width = Math.max(opts.minNodeWidth, estimateLabelWidth(node));
+    const height = opts.minNodeHeight;
+    g.setNode(node.id, { width, height });
+  }
+
+  const seen = new Set<string>();
+  for (const link of links) {
+    const sourceId = linkEndpointId(link.source);
+    const targetId = linkEndpointId(link.target);
+    if (!g.hasNode(sourceId) || !g.hasNode(targetId)) continue;
+    const key = `${sourceId}->${targetId}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    g.setEdge(sourceId, targetId);
+  }
+
+  try {
+    dagre.layout(g);
+  } catch {
+    return null;
+  }
+
+  const positions = new Map<string, LayeredLayoutPosition>();
+  for (const node of nodes) {
+    const laid = g.node(node.id);
+    if (laid && Number.isFinite(laid.x) && Number.isFinite(laid.y)) {
+      positions.set(node.id, { x: laid.x, y: laid.y });
+    }
+  }
+  return positions;
+}

package/src/hooks/index.ts

@@ -35,3 +35,9 @@ export * from "./useNotificationSync";
 export * from "./usePageTracker";
 export * from "./usePushNotifications";
 export * from "./useSocket";
+export {
+  computeLayeredLayout,
+  type LayeredLayoutOptions,
+  type LayeredLayoutPosition,
+  type LayeredRankDir,
+} from "./computeLayeredLayout";