@graphty/graph-io 0.3.48 → 0.3.49

package/src/formats/pajek/syntax.ts

@@ -471,7 +471,7 @@ export function isIntervalToken(token: string): boolean {
 }
 
 /**
- * Parse a Pajek time interval token into spells: `[1-5,7-*]` is `[[1, 5], [7, Infinity]]`, a
+ * Parse a Pajek time interval token into spells: `[1-5,7-*]` (or `[1-5/7-*]`) is `[[1, 5], [7, Infinity]]`, a
  * single time point `[3]` is `[[3, 3]]`, `*` at either end is the corresponding infinity, blanks
  * around the parts are ignored and an empty `[]` is no spell at all.
  * @param token - a token isIntervalToken() accepted
@@ -484,7 +484,9 @@ export function parseIntervals(token: string): [number, number][] {
         return [];
     }
     const spells: [number, number][] = [];
-    for (const part of body.split(",")) {
+    // the manual separates intervals with ","; Pajek's own course data writes "/" too (lin-rel4.net:
+    // `[141-383/669-670]`), which no other part of the token uses
+    for (const part of body.split(/[,/]/)) {
         spells.push(parseSpell(token, part));
     }
     return spells;
@@ -609,3 +611,26 @@ export function isParameterKey(text: string): boolean {
     // a number, or a non-finite spelling, at that place reads as a coordinate or the line value
     return !/^[+-]?(\.\d|\d)/.test(text) && !/^[+-]?(?:nan|inf|infinity)$/i.test(text);
 }
+
+/**
+ * The vertex parameters that, written first on a vertex line that names no shape, make Pajek 6.02 draw the line with
+ * none of its parameters (`s_size 2 ic Red`, `bw 3 ic Blue`: a vertex of the default size and colors); a line that
+ * starts with `ic`, `x_fact` or `y_fact` is read whole. Probed in Pajek 6.02's SVG export one key at a time
+ * (`pajek-specimen-node-sizes-opacity` `s-size-no-shape`; the probe files of the third fix round). ponytail: probed
+ * on lines with coordinates only; a line without them, or one that starts with a key Pajek does not know, is read
+ * as written.
+ */
+export const VOIDING_KEYS: ReadonlySet<string> = new Set([
+    "bc",
+    "bw",
+    "s_size",
+    "phi",
+    "r",
+    "q",
+    "lc",
+    "la",
+    "lr",
+    "lphi",
+    "fos",
+    "font",
+]);

package/src/formats/xgmml/emit.ts

@@ -449,7 +449,7 @@ export class XgmmlEmitter {
         }
         const containment = new Containment(this);
         containment.resolve(this.rowList, this.groupTest());
-        this.writeNodeExtras(graph);
+        this.writeNodeExtras(graph, (index) => containment.parentsOf(index));
         this.addEdges(members.edges, header);
         this.finishAliases();
         this.writeGraph(graph);
@@ -815,8 +815,9 @@ export class XgmmlEmitter {
      * Write the per-node values: label, attributes, XML attributes, graphics, positions, nested
      * network pointers and subgraph memberships.
      * @param graph - the subnetwork, or null
+     * @param parentsOf - each node's group nodes, by node index
      */
-    private writeNodeExtras(graph: GraphRec | null): void {
+    private writeNodeExtras(graph: GraphRec | null, parentsOf: (index: number) => readonly number[]): void {
         const labels: (string | undefined)[] = [];
         const positions = new Positions(this, this.dialect.cytoscape ? this.settings.zAs : "position");
         const graphics = new JsonColumn(this, "node", GRAPHICS_COLUMN, XGMML_ORIGIN_NAMESPACE, "graphics");
@@ -840,7 +841,7 @@ export class XgmmlEmitter {
             this.checkAbort();
         }
         this.writeLabels("node", labels, (row) => this.rowList[row].index);
-        positions.write();
+        positions.write(parentsOf);
         pointers.write();
         if (graph === null) {
             this.writeNetworks();
@@ -1440,6 +1441,9 @@ class JsonColumn {
 class Positions {
     private readonly values = new Map<number, [number, number, number]>();
 
+    /** Cytoscape's stored group locations by node index: per group network, a group's center or a member's offset. */
+    private readonly locations = new Map<number, Map<string, [number, number]>>();
+
     private readonly zValues = new Map<number, number>();
 
     private hasZ = false;
@@ -1460,6 +1464,12 @@ class Positions {
      * @param record - the record
      */
     add(row: NodeRow, record: NodeRec): void {
+        // a member stores its offset in its own atts, a group its center in its nested graph's
+        const locations =
+            row.index < 0 ? null : groupLocations([...record.atts, ...record.nested.flatMap((g) => g.atts)]);
+        if (locations !== null) {
+            this.locations.set(row.index, locations);
+        }
         if (row.index < 0 || (record.x === null && record.y === null && record.z === null)) {
             return;
         }
@@ -1501,8 +1511,34 @@ class Positions {
         return n;
     }
 
-    /** Declare and write the position and z columns. */
-    write(): void {
+    /**
+     * Places the members of a collapsed Cytoscape group, which the file stores with no coordinates of their own, where
+     * Cytoscape puts them when the group is expanded: the group's stored center in that group network plus the
+     * member's stored offset (`__xLocation`, `__yLocation`, per `__groupNetworks.SUID`).
+     * @param parentsOf - each node's group nodes, by node index
+     */
+    private followGroups(parentsOf: (index: number) => readonly number[]): void {
+        for (const [index, own] of this.locations) {
+            if (this.values.has(index)) {
+                continue;
+            }
+            const at = parentsOf(index)
+                .flatMap((p) =>
+                    [...own].map(([network, [dx, dy]]) => ({ center: this.locations.get(p)?.get(network), dx, dy })),
+                )
+                .find((c) => c.center !== undefined);
+            if (at?.center !== undefined) {
+                this.values.set(index, [at.center[0] + at.dx, flipY(at.center[1] + at.dy), 0]);
+            }
+        }
+    }
+
+    /**
+     * Declare and write the position and z columns.
+     * @param parentsOf - each node's group nodes, by node index
+     */
+    write(parentsOf: (index: number) => readonly number[]): void {
+        this.followGroups(parentsOf);
         const sink = this.emitter.target;
         if (this.values.size > 0) {
             const handle = this.emitter.declare("node", {
@@ -1542,6 +1578,29 @@ class Positions {
     }
 }
 
+/**
+ * A node's stored Cytoscape group locations: `__xLocation` and `__yLocation` lists, item by item, keyed by the group
+ * network `__groupNetworks.SUID` names at the same index.
+ * @param atts - the node's atts
+ * @returns network to location, or null when the node stores none
+ */
+function groupLocations(atts: readonly AttRec[]): Map<string, [number, number]> | null {
+    const list = (name: string): (string | null)[] =>
+        atts.find((a) => a.name === name)?.children.map((c) => c.value) ?? [];
+    const networks = list("__groupNetworks.SUID");
+    const xs = list("__xLocation");
+    const ys = list("__yLocation");
+    const out = new Map<string, [number, number]>();
+    networks.forEach((network, i) => {
+        const x = Number(xs[i] ?? Number.NaN);
+        const y = Number(ys[i] ?? Number.NaN);
+        if (network !== null && Number.isFinite(x) && Number.isFinite(y)) {
+            out.set(network, [x, y]);
+        }
+    });
+    return out.size > 0 ? out : null;
+}
+
 /**
  * Nested-network pointers: a node-nested graph that is not a group names a network.
  */
@@ -1751,6 +1810,15 @@ class Containment {
         return false;
     }
 
+    /**
+     * A node's group nodes.
+     * @param index - the node's index
+     * @returns the group nodes' indices
+     */
+    parentsOf(index: number): readonly number[] {
+        return this.parents.get(index) ?? [];
+    }
+
     /** Declare and write the parent (or parents) and subgraph columns. */
     write(): void {
         const sink = this.emitter.target;

package/src/formats/xgmml/styles.ts

@@ -7,6 +7,7 @@
 
 import type { GraphSnapshot } from "@graphty/graph-format";
 
+import { type BendPoint, canonBends } from "../../styles/canon/bends.js";
 import { STYLE_ISSUE } from "../../styles/codes.js";
 import {
     type CytoscapeDialect,
@@ -14,13 +15,19 @@ import {
     cytoscapeWritableProperties,
 } from "../../styles/cytoscape/emit.js";
 import { normalizeVisualProperties } from "../../styles/cytoscape/lexicon.js";
-import { emptyCytoscapeStyle } from "../../styles/cytoscape/mappings.js";
-import { cytoscapeBackground, type CytoscapeBypass, resolveCytoscapeBypasses } from "../../styles/cytoscape/resolve.js";
-import { blockStyles, parseStyleBlock, STYLE_BLOCK_NAME } from "../../styles/io/block.js";
+import { type CytoscapeStyle, emptyCytoscapeStyle } from "../../styles/cytoscape/mappings.js";
+import {
+    cytoscapeBackground,
+    type CytoscapeBypass,
+    type CytoscapeElements,
+    edgeEnds,
+    resolveCytoscapeBypasses,
+} from "../../styles/cytoscape/resolve.js";
+import { STYLE_BLOCK_NAME } from "../../styles/io/block.js";
+import { takeFromBlock } from "../../styles/io/round-trip.js";
 import type { ExporterStyleInput } from "../../styles/io/writer.js";
 import { StyleNotes } from "../../styles/notes.js";
-import { styleFingerprint } from "../../styles/plan/features.js";
-import { plainCell, resolveStyles } from "../../styles/plan/resolve.js";
+import { plainCell } from "../../styles/plan/resolve.js";
 import type {
     EdgeStyleProperty,
     GraphStyle,
@@ -37,7 +44,7 @@ import type {
 } from "../../styles/types.js";
 import type { LossNote } from "../../types.js";
 import { lossOf } from "../cx/styles.js";
-import { GRAPHICS_COLUMN, XGMML_ORIGIN_NAMESPACE } from "./constants.js";
+import { GRAPHICS_COLUMN, SUBGRAPH_COLUMN, XGMML_ORIGIN_NAMESPACE } from "./constants.js";
 
 type Table = GraphSnapshot["nodes"];
 
@@ -118,9 +125,14 @@ export function readXgmmlStyles(
         const n = target === "node" ? snapshot.nodeCount : snapshot.edgeCount;
         const maps = graphicsBypasses(table, target, n, notes);
         const values = maps.some((m) => m !== null)
-            ? resolveCytoscapeBypasses(target, maps, { notes, budget: context.budget })
+            ? resolveCytoscapeBypasses(target, maps, {
+                  notes,
+                  budget: context.budget,
+                  value: (column, i) => (table.has(column) ? plainCell(table.value(column, i)) : null),
+                  ...(target === "edge" ? { ends: edgeEnds(snapshot, out.node.values) } : {}),
+              })
             : {};
-        hiddenToVisible(table, settings.hiddenColumn ?? null, n, values);
+        drawnAsDesktop(snapshot, target, out.node.values, values, settings);
         exactFromBlock(snapshot, target, values);
         out[target] = { values: nonEmpty(values) };
     }
@@ -136,6 +148,95 @@ export function readXgmmlStyles(
     };
 }
 
+/**
+ * What Cytoscape desktop draws of an XGMML file's resolved values: hidden elements, the groups it hides and the
+ * edges of every node it does not draw not visible, nodes with no label labeled by their names, and edge bends at the
+ * network origin.
+ * @param snapshot - the graph
+ * @param target - nodes or edges
+ * @param nodes - the node values per property (read for edges)
+ * @param values - the values per property, changed in place
+ * @param settings - the tool and the hidden-state column
+ */
+function drawnAsDesktop(
+    snapshot: GraphSnapshot,
+    target: StyleTarget,
+    nodes: Partial<Record<string, StyleColumn>>,
+    values: Partial<Record<string, StyleColumn>>,
+    settings: XgmmlStyleSettings,
+): void {
+    const table = target === "node" ? snapshot.nodes : snapshot.edges;
+    const n = target === "node" ? snapshot.nodeCount : snapshot.edgeCount;
+    const desktop = settings.tool === "cytoscape";
+    if (target === "edge" && desktop) {
+        bendsAtOrigin(snapshot, values);
+    }
+    hiddenToVisible(table, settings.hiddenColumn ?? null, n, values);
+    hideWhatCytoscapeHides(snapshot, target, nodes, values);
+    if (target === "node") {
+        if (desktop && values.label === undefined && !snapshot.graph.has(STYLE_BLOCK_NAME)) {
+            nameLabels(table, n, values);
+        }
+    }
+}
+
+/**
+ * Every bend of an edge where Cytoscape desktop draws it from an XGMML file: at the network's origin. Its XGMML reader
+ * turns each `EDGE_BEND` handle (`cos,sin,ratio`, relative to the line between the two nodes) into a point while
+ * every node is still at the origin and keeps that point, so each handle of each edge is drawn at (0, 0) of the
+ * network, wherever the nodes then go (measured on Cytoscape 3.10.5's own SVG of an XGMML file with handles; its CX
+ * reader places the same handles along their lines). An edge whose nodes have no position keeps its handles.
+ * @param snapshot - the graph
+ * @param values - the edge values per property, changed in place
+ */
+function bendsAtOrigin(snapshot: GraphSnapshot, values: Partial<Record<string, StyleColumn>>): void {
+    const { bends } = values;
+    const position = snapshot.nodes.byRole("position");
+    if (bends === undefined || position === null) {
+        return;
+    }
+    const center = (i: number): BendPoint | null => {
+        const v = position.isSet(i) ? (position.value(i) as ArrayLike<number>) : null;
+        return v === null ? null : [v[0], v[1]];
+    };
+    const { src, dst } = snapshot.edgeList();
+    values.bends = bends.map((v, e) => {
+        const [s, t] = [center(src[e]), center(dst[e])];
+        if (typeof v !== "string" || s === null || t === null) {
+            return v;
+        }
+        const handles = v.trim().split(/\s+/).length;
+        return (
+            canonBends(
+                s,
+                t,
+                Array.from({ length: handles }, (): BendPoint => [0, 0]),
+                false,
+            ) ?? v
+        );
+    });
+}
+
+/**
+ * The labels Cytoscape shows for nodes whose graphics state none: its default style labels a node by its name, and
+ * a node with no `name` att is named by its `label=` (Cytoscape 2.x files often carry only that). Not for a file
+ * graphty wrote: its block says what to draw.
+ * @param table - the node table
+ * @param n - the node count
+ * @param values - the values per property, changed in place
+ */
+function nameLabels(table: Table, n: number, values: Partial<Record<string, StyleColumn>>): void {
+    const label = table.byRole("label")?.meta.name ?? null;
+    const text = (column: string | null, i: number): string | null => {
+        const v = column !== null && table.has(column) ? plainCell(table.value(column, i)) : null;
+        return typeof v === "string" || typeof v === "number" ? String(v) : null;
+    };
+    const labels = Array.from({ length: n }, (_v, i) => text("name", i) ?? text(label, i));
+    if (labels.some((v) => v !== null)) {
+        values.label = labels;
+    }
+}
+
 /**
  * The styles of an XGMML file: its elements' resolved values, with Cytoscape desktop's default style beneath.
  * @param snapshot - the graph
@@ -155,71 +256,71 @@ export function readXgmmlFileStyles(snapshot: GraphSnapshot, context: StyleReadC
  * @param target - nodes or edges
  * @param values - the values per property, changed in place
  * @param dialect - the Cytoscape dialect the file's values are written in
+ * @param created - the order desktop creates the elements in, when the file is read with it (CX version 1)
  */
 export function exactFromBlock(
     snapshot: GraphSnapshot,
     target: StyleTarget,
     values: Partial<Record<string, StyleColumn>>,
     dialect: CytoscapeDialect = "desktop",
+    created?: NonNullable<CytoscapeElements["ends"]>["created"],
 ): void {
     const text = snapshot.graph.has(STYLE_BLOCK_NAME) ? plainCell(snapshot.graph.value(STYLE_BLOCK_NAME, 0)) : null;
     if (typeof text !== "string") {
         return;
     }
-    const parsed = parseStyleBlock(text, styleFingerprint(snapshot));
-    const ex = parsed.ok ? blockStyles(parsed.block, snapshot, "xgmml") : null;
-    if (ex === null) {
-        return;
-    }
-    const n = target === "node" ? snapshot.nodeCount : snapshot.edgeCount;
-    const want = new Map<string, readonly (StyleValue | null)[]>();
-    const exact = (property: string): readonly (StyleValue | null)[] => {
-        let held = want.get(property);
-        if (held === undefined) {
-            held = resolveStyles(ex, target, property as StyleProperty, snapshot);
-            want.set(property, held);
+    takeFromBlock(snapshot, text, "xgmml", (t, block) => {
+        if (t !== target) {
+            return null;
         }
-        return held;
-    };
-    // What each element's exact values are written as, read back the way the file is read.
-    const written = Array.from({ length: n }, (_v, i) =>
-        cytoscapeElementProperties(
-            target,
-            (property) => exact(property)[i] ?? null,
-            dialect,
-            () => undefined,
-        ),
-    );
-    const readBack = resolveCytoscapeBypasses(target, written, { notes: new StyleNotes() });
-    for (const [property, native] of Object.entries(values)) {
-        const back = readBack[property];
-        if (native !== undefined && back !== undefined) {
-            values[property] = withBlockValues(native, back, exact(property));
-        }
-    }
+        const n = target === "node" ? snapshot.nodeCount : snapshot.edgeCount;
+        // What each element's exact values are written as, read back the way the file is read.
+        const written = Array.from({ length: n }, (_v, i) =>
+            cytoscapeElementProperties(
+                target,
+                (property) => block(target, property)[i] ?? null,
+                dialect,
+                () => undefined,
+            ),
+        );
+        // Desktop fans the curved edges between the same two nodes by the nodes' size, as the file is read
+        const ends =
+            target === "edge"
+                ? {
+                      ends: {
+                          ...edgeEnds(snapshot, {
+                              width: block("node", "width"),
+                              height: block("node", "height"),
+                              borderWidth: block("node", "borderWidth"),
+                          }),
+                          ...(created === undefined ? {} : { created }),
+                      },
+                  }
+                : {};
+        const readBack = resolveCytoscapeBypasses(target, written, { notes: new StyleNotes(), ...ends });
+        return {
+            values,
+            properties: Object.keys(values).filter((p) => values[p] !== undefined && readBack[p] !== undefined),
+            readBack: (i) => (property) => readBack[property]?.[i] ?? null,
+            // a fan spacing, a curve or a loop's handles only desktop's fanning and looping give (graphty wrote none:
+            // EDGE_CURVED defaults to true there) is graphty's own default again, and so is a label's place beside its
+            // node, which desktop's anchors spell as an offset and a shift
+            take: (property, wanted) => wanted !== null || BLOCK_DEFAULTED.has(property),
+        };
+    });
 }
 
-/**
- * A property's values with the block's exact value wherever the file's value is what the writer wrote for it.
- * @param native - the file's values
- * @param back - what the writer wrote for the block's values, read back
- * @param w - the block's values
- * @returns the values, the file's own array when none changes
- */
-function withBlockValues(
-    native: StyleColumn,
-    back: readonly (StyleValue | null)[],
-    w: readonly (StyleValue | null)[],
-): StyleColumn {
-    let changed: (StyleValue | null)[] | null = null;
-    for (let i = 0; i < native.length; i++) {
-        if (w[i] !== null && native[i] !== w[i] && native[i] === back[i]) {
-            changed ??= [...native];
-            changed[i] = w[i];
-        }
-    }
-    return changed ?? native;
-}
+/** What a file graphty wrote leaves unset where Cytoscape's reading of it gives a value. */
+const BLOCK_DEFAULTED: ReadonlySet<string> = new Set([
+    "fanSpacing",
+    "curved",
+    "bends",
+    "bendCurve",
+    "labelOffsetX",
+    "labelOffsetY",
+    "labelShiftX",
+    "labelShiftY",
+]);
 
 /**
  * Marks the elements a hidden-state column holds true as not visible.
@@ -249,6 +350,145 @@ export function hiddenToVisible(
     }
 }
 
+/**
+ * Marks not visible what Cytoscape does not draw of its groups: an expanded group's own node (its members are drawn
+ * in its place), and every node inside a collapsed group (the group's node is drawn in their place). A group is
+ * collapsed when its nested graph's `__groupCollapsed.SUID` names the network being read. A file graphty wrote is
+ * left alone: its block says what to draw.
+ * @param snapshot - the graph
+ * @param values - the node values per property, changed in place
+ */
+function hideGroupsCytoscapeHides(snapshot: GraphSnapshot, values: Partial<Record<string, StyleColumn>>): void {
+    const parent = snapshot.nodes.byRole("parent");
+    if (parent === null || snapshot.graph.has(STYLE_BLOCK_NAME)) {
+        return;
+    }
+    const n = snapshot.nodeCount;
+    const members = membersOf(parent, n);
+    if (members.size === 0) {
+        return;
+    }
+    const network = (snapshot.meta.extra as { xgmml?: { graphId?: unknown } } | undefined)?.xgmml?.graphId;
+    const visible = values.visible === undefined ? new Array<StyleValue | null>(n).fill(null) : [...values.visible];
+    for (const [group, inside] of members) {
+        if (!collapsedIn(snapshot, group, network)) {
+            visible[group] = false;
+            continue;
+        }
+        for (const i of insideAtAnyDepth(group, inside, members)) {
+            visible[i] = false;
+        }
+    }
+    values.visible = visible;
+}
+
+/**
+ * Marks not visible what Cytoscape does not draw of its groups, and the edges of every node it does not draw.
+ * @param snapshot - the graph
+ * @param target - nodes or edges
+ * @param nodes - the node values per property (read for edges)
+ * @param values - the target's values per property, changed in place
+ */
+export function hideWhatCytoscapeHides(
+    snapshot: GraphSnapshot,
+    target: StyleTarget,
+    nodes: Partial<Record<string, StyleColumn>>,
+    values: Partial<Record<string, StyleColumn>>,
+): void {
+    if (target === "node") {
+        hideGroupsCytoscapeHides(snapshot, values);
+    } else {
+        hideEdgesOfHiddenNodes(snapshot, nodes, values);
+    }
+}
+
+/**
+ * Marks not visible every edge with an end Cytoscape does not draw: a collapsed group's members' own edges (the
+ * group's meta-edges are drawn in their place), an expanded group node's meta-edges, and a hidden node's edges. A
+ * file graphty wrote is left alone: its block says what to draw.
+ * @param snapshot - the graph
+ * @param nodes - the node values per property
+ * @param values - the edge values per property, changed in place
+ */
+function hideEdgesOfHiddenNodes(
+    snapshot: GraphSnapshot,
+    nodes: Partial<Record<string, StyleColumn>>,
+    values: Partial<Record<string, StyleColumn>>,
+): void {
+    const shown = nodes.visible;
+    if (shown === undefined || !shown.includes(false) || snapshot.graph.has(STYLE_BLOCK_NAME)) {
+        return;
+    }
+    const { src, dst } = snapshot.edgeList();
+    const visible =
+        values.visible === undefined ? new Array<StyleValue | null>(src.length).fill(null) : [...values.visible];
+    for (let e = 0; e < src.length; e++) {
+        if (shown[src[e]] === false || shown[dst[e]] === false) {
+            visible[e] = false;
+        }
+    }
+    values.visible = visible;
+}
+
+/**
+ * Each group node's direct members.
+ * @param parent - the node parent column
+ * @param n - the node count
+ * @returns group node to its members
+ */
+function membersOf(
+    parent: NonNullable<ReturnType<GraphSnapshot["nodes"]["byRole"]>>,
+    n: number,
+): Map<number, number[]> {
+    const members = new Map<number, number[]>();
+    for (let i = 0; i < n; i++) {
+        const g = parent.isSet(i) ? plainCell(parent.value(i)) : null;
+        if (typeof g === "number" && g !== i) {
+            members.set(g, [...(members.get(g) ?? []), i]);
+        }
+    }
+    return members;
+}
+
+/**
+ * Every node inside a group, at any depth.
+ * @param group - the group node
+ * @param inside - its direct members
+ * @param members - each group node's direct members
+ * @returns the nodes inside
+ */
+function insideAtAnyDepth(group: number, inside: readonly number[], members: Map<number, number[]>): Set<number> {
+    const stack = [...inside];
+    const seen = new Set<number>([group]);
+    const out = new Set<number>();
+    for (let i = stack.pop(); i !== undefined; i = stack.pop()) {
+        if (!seen.has(i)) {
+            seen.add(i);
+            out.add(i);
+            stack.push(...(members.get(i) ?? []));
+        }
+    }
+    return out;
+}
+
+/**
+ * Whether a group node's nested graph says the group is collapsed in a network (`__groupCollapsed.SUID` lists it).
+ * @param snapshot - the graph
+ * @param group - the group node
+ * @param network - the id of the network being read, or anything else when unknown
+ * @returns true when collapsed there
+ */
+function collapsedIn(snapshot: GraphSnapshot, group: number, network: unknown): boolean {
+    if (typeof network !== "string" || !snapshot.nodes.has(SUBGRAPH_COLUMN)) {
+        return false;
+    }
+    const sub = plainCell(snapshot.nodes.value(SUBGRAPH_COLUMN, group));
+    const atts = sub !== null && typeof sub === "object" ? (sub as { atts?: unknown }).atts : null;
+    const collapsed =
+        atts !== null && typeof atts === "object" ? (atts as Record<string, unknown>)["__groupCollapsed.SUID"] : null;
+    return Array.isArray(collapsed) && collapsed.some((v) => String(v) === network);
+}
+
 /**
  * The properties with at least one value.
  * @param values - per property, each element's value
@@ -265,27 +505,46 @@ export function nonEmpty(values: Partial<Record<string, StyleColumn>>): Partial<
 }
 
 /**
- * The graph's background from its own graphics (`NETWORK_BACKGROUND_PAINT`).
+ * The graph's background: its own graphics' `NETWORK_BACKGROUND_PAINT`, the locked one (`lockedVisualProperties`, a
+ * session view's bypass) on top, over the style's own.
  * @param snapshot - the graph
  * @param notes - where a bad value is noted
+ * @param style - the style whose network defaults the graph's graphics override, or none
  * @returns the graph style
+ * @category Styles
  */
-function graphStyleOf(snapshot: GraphSnapshot, notes: StyleNotes): GraphStyle {
-    const name = graphicsColumnOf(snapshot.graph);
-    const g = name === null ? null : plainCell(snapshot.graph.value(name, 0));
-    if (g === null || typeof g !== "object") {
-        return {};
+export function graphStyleOf(snapshot: GraphSnapshot, notes: StyleNotes, style?: CytoscapeStyle): GraphStyle {
+    const merged = emptyCytoscapeStyle();
+    for (const [k, v] of style?.network.defaults ?? []) {
+        merged.network.defaults.set(k, v);
     }
-    const style = emptyCytoscapeStyle();
-    for (const [k, v] of normalizeVisualProperties("node", g, notes)) {
-        if (k.startsWith("NETWORK_")) {
-            style.network.defaults.set(k, v);
-        }
+    for (const [k, v] of networkBypasses(snapshot, notes)) {
+        merged.network.defaults.set(k, v);
     }
-    const background = cytoscapeBackground(style, notes);
+    const background = cytoscapeBackground(merged, notes);
     return background === null ? {} : { background };
 }
 
+/**
+ * The network visual properties a graph's own graphics set, the locked ones (`lockedVisualProperties`) last.
+ * @param snapshot - the graph
+ * @param notes - where too-deep nesting is noted
+ * @returns visual property name to raw value, in the order they apply
+ */
+function networkBypasses(snapshot: GraphSnapshot, notes: StyleNotes): [string, unknown][] {
+    const name = graphicsColumnOf(snapshot.graph);
+    const g = name === null ? null : plainCell(snapshot.graph.value(name, 0));
+    if (g === null || typeof g !== "object" || Array.isArray(g)) {
+        return [];
+    }
+    const locked = Object.hasOwn(g, "lockedVisualProperties")
+        ? (g as Record<string, unknown>).lockedVisualProperties
+        : undefined;
+    return [g, locked].flatMap((layer) =>
+        [...normalizeVisualProperties("node", layer, notes)].filter(([k]) => k.startsWith("NETWORK_")),
+    );
+}
+
 // ------------------------------------------------------------------ writing
 
 /**