@captiveorigins/onepedigree-react 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/PedigreeExplorer.js

@@ -234,7 +234,7 @@ export function PedigreeExplorer(props) {
     const individual = occurrence ? projection.individuals[occurrence.individualId] : undefined;
     const href = individual ? (props.getIndividualHref?.(individual) ?? null) : null;
     const close = () => choose(null);
-    return (_jsxs("div", { ref: root, className: "op-explorer", style: { height: props.height ?? '32rem', ...(theme ? { ...themeStyle(theme, projection.view), background: 'var(--op-background)' } : {}) }, onKeyDown: onKeyDown, onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onClickCapture: (e) => {
+    return (_jsxs("div", { ref: root, className: "op-explorer", "data-legend": props.geneOverlay || props.genotypes ? '' : undefined, style: { height: props.height ?? '32rem', ...(theme ? { ...themeStyle(theme, projection.view), background: 'var(--op-background)' } : {}) }, onKeyDown: onKeyDown, onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onClickCapture: (e) => {
             // A drag ends with a click on the node: don't let it select.
             if (suppressClick.current) {
                 suppressClick.current = false;

package/dist/genetics.d.ts

@@ -39,6 +39,8 @@ export type GenotypeDisplay = {
     records: ReadonlyMap<string, readonly GenotypeRecord[]>;
     /** Needed for sex-linked genes: the heterogametic sex has one copy (one dot). */
     sexOf?: (individualId: string) => SexClass;
+    /** Words for the key (translations). */
+    labels?: Partial<Record<'title' | 'two' | 'one' | 'none' | 'possible' | 'unknown' | 'suggested', string>>;
 };
 /** Allele dots for one gene (SVG, starting at 0,0, vertically centered on 0). */
 export declare function GenotypeDots({ gene, record, hemizygous, r, words }: {

package/dist/genetics.js

@@ -51,8 +51,8 @@ function copies(record, mode, slots) {
         return { filled: 1, possible: 0, unknown: 0 };
     if (state === 'super')
         return { filled: slots, possible: 0, unknown: 0 };
-    // visual: two copies for a recessive (or one when hemizygous); one assumed otherwise
-    return { filled: slots === 1 || mode === 'recessive' ? slots : 1, possible: 0, unknown: 0 };
+    // visual: two copies for a recessive (or one when hemizygous); otherwise at least one, the other not known
+    return slots === 1 || mode === 'recessive' ? { filled: slots, possible: 0, unknown: 0 } : { filled: 1, possible: 0, unknown: 1 };
 }
 /** Allele dots for one gene (SVG, starting at 0,0, vertically centered on 0). */
 export function GenotypeDots({ gene, record, hemizygous = false, r = 4.5, words }) {
@@ -88,7 +88,7 @@ export function genotypeText(display, individualId, words = GENOTYPE_WORDS) {
         .join('; ');
 }
 /** Key for allele dots: each gene's color, and what the dots mean. */
-export function GenotypeKey({ display, labels = {} }) {
+export function GenotypeKey({ display, labels = display.labels ?? {} }) {
     const l = { title: 'Genes', two: 'two copies', one: 'one copy', none: 'none', possible: 'possible (dashed)', unknown: 'not known', suggested: 'suggested from relatives', ...labels };
     const demo = { id: 'demo', label: '', color: '#7a625c', mode: 'recessive' };
     const sample = (record, text) => (_jsxs("li", { children: [_jsx("svg", { width: 22, height: 12, viewBox: "0 -6 22 12", "aria-hidden": "true", children: _jsx(GenotypeDots, { gene: demo, record: record, r: 4 }) }), text] }));

package/dist/styles.css

@@ -142,11 +142,11 @@
 }
 
 /* Heritable trait overlay: genetic pedigree symbols (filled = visual, half = het, dot = possible het, open = not carrying). */
-.op-gene-outline { fill: var(--op-node-background); stroke: var(--op-label); stroke-width: 1.5px; }
+.op-gene-outline { fill: var(--op-node-background, #fff); stroke: var(--op-label, #4c312c); stroke-width: 1.5px; }
 .op-gene-outline[data-dashed] { stroke-dasharray: 2 2; }
-.op-gene-fill { fill: var(--op-label); }
-.op-gene-ring { fill: none; stroke: var(--op-label); stroke-width: 1.25px; }
-.op-gene-text { font-size: 9px; fill: var(--op-label); }
+.op-gene-fill { fill: var(--op-label, #4c312c); }
+.op-gene-ring { fill: none; stroke: var(--op-label, #4c312c); stroke-width: 1.25px; }
+.op-gene-text { font-size: 9px; fill: var(--op-label, #4c312c); }
 .op-gene[data-state='unknown'] .op-gene-outline { stroke: #9a8f8b; }
 .op-gene[data-state='unknown'] .op-gene-text { fill: #9a8f8b; }
 .op-gene-legends { position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 16px); display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
@@ -162,10 +162,15 @@
 
 /* Allele dots: two per gene, one per copy. Filled = carries it (gene color), empty = normal copy,
    dashed = possible, grey dashed = not known. Shape carries the meaning, not color. */
-.op-dot { fill: var(--op-node-background); stroke: var(--op-label); stroke-width: 1.25px; }
+.op-dot { fill: var(--op-node-background, #fff); stroke: var(--op-label, #4c312c); stroke-width: 1.25px; }
 .op-dot[data-dot='possible'] { stroke-dasharray: 1.6 1.6; }
 /* Suggested from relatives (not proven): the copy is drawn with a dashed edge. */
 .op-dot[data-inferred] { stroke-dasharray: 2 1.4; stroke-width: 1.5px; }
 .op-dot[data-dot='unknown'] { stroke: #9a8f8b; stroke-dasharray: 1.6 1.6; }
-.op-gene-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--op-label); }
+.op-gene-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--op-label, #4c312c); }
 .op-genotype-key ul + ul { margin-top: 2px; }
+
+/* With a gene legend, the legend sits under the drawing instead of covering it. */
+.op-explorer[data-legend] { display: flex; flex-direction: column; }
+.op-explorer[data-legend] > svg { flex: 1; min-height: 0; height: auto; }
+.op-explorer[data-legend] .op-gene-legends { position: static; margin: 0 8px 8px; max-width: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@captiveorigins/onepedigree-react",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), an interactive explorer, headless hooks and CSS-variable styling.",
   "homepage": "https://github.com/mgilardi/onepedigree#readme",
   "bugs": {
@@ -46,7 +46,7 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.10"
+    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.11"
   },
   "peerDependencies": {
     "react": ">=18.2"