refactor: extract default properties from jsdoc annotations

extract-default-properties.mjs

@@ -0,0 +1,45 @@
+import { createGenerator } from "ts-json-schema-generator";
+import { writeFileSync } from "fs";
+
+/** @type {import('ts-json-schema-generator/dist/src/Config').Config} */
+const config = {
+  tsconfig: "./tsconfig.json",
+  type: "InSchema",
+  sortProps: false,
+};
+
+const schema = createGenerator(config).createSchema(config.type);
+
+function generateDefaults(schema) {
+  function generateProps(properties) {
+    const lines = [];
+    for (const [key, value] of Object.entries(properties)) {
+      if (value.default !== undefined) {
+        lines.push(`  ${key}: ${JSON.stringify(value.default)}`);
+      } else {
+        console.warn(`Warning: No default defined for '${key}'`);
+      }
+    }
+    return lines;
+  }
+
+  const jsCode = `
+// Automatically generated by extract-default-properties.mjs
+
+import {
+  type LayoutProperties,
+  type CostWeights
+} from "./layout.js";
+
+export const DEFAULT_PROPERTIES = {
+${generateProps(schema.definitions["LayoutProperties"].properties).join(",\n")}
+} as LayoutProperties;
+
+export const DEFAULT_COST_WEIGHTS = {
+${generateProps(schema.definitions["CostWeights"].properties).join(",\n")}
+} as CostWeights;
+`;
+  return jsCode;
+}
+
+writeFileSync("src/defaultProperties.ts", generateDefaults(schema));

src/bellplot.ts

@@ -10,40 +10,41 @@ import { drawArrowAndLabel } from "./utilityElements.js";
 export interface BellPlotProperties {
   /**
    * The shape of the bell tip. 0 is a sharp tip, 1 is a blunt tip.
+   *
    * @minimum 0
    * @maximum 1
+   * @default 0.1
    */
   bellTipShape: number;
 
   /**
    * How much to spread nested bell tips. 0 is no spread, 1 is full spread.
+   *
    * @minimum 0
    * @maximum 1
+   * @default 0.5
    */
   bellTipSpread: number;
 
   /**
    * The width of strokes in the bell.
+   *
    * @minimum 0
    * @maximum 10
+   * @default 1
    */
   bellStrokeWidth: number;
 
   /**
    * Where the bell has fully appeared and the plateau starts.
+   *
    * @minimum 0
    * @maximum 1
+   * @default 0.75
    */
-  plateauPos: number;
+  bellPlateauPos: number;
 }
 
-export const DEFAULT_BELL_PLOT_PROPERTIES: BellPlotProperties = {
-  bellTipShape: 0.1,
-  bellTipSpread: 0.5,
-  bellStrokeWidth: 1,
-  plateauPos: 0.75,
-};
-
 /**
  * Adds the nested subclones into an SVG group.
  */
@@ -190,7 +191,7 @@ export function drawBellPlot(
 
   if (sampleTakenGuide != "none") {
     const sw = bellPlotProperties.bellStrokeWidth ?? 1;
-    const x = Math.round(width * bellPlotProperties.plateauPos);
+    const x = Math.round(width * bellPlotProperties.bellPlateauPos);
     g.line(x, sw, x, height - sw)
       .stroke({
         color: "black",
@@ -293,7 +294,7 @@ export function treeToShapers(
       const a = fractionalStep / 2;
       // Create a plateau at the end so that the right edge looks like
       // a stacked bar chart.
-      const b = 1 / props.plateauPos;
+      const b = 1 / props.bellPlateauPos;
       transformX = (x) => x * (b - a) + a;
     }
 

src/defaultProperties.ts

@@ -0,0 +1,37 @@
+
+// Automatically generated by extract-default-properties.mjs
+
+import {
+  type LayoutProperties,
+  type CostWeights
+} from "./layout.js";
+
+export const DEFAULT_PROPERTIES = {
+  bellTipShape: 0.1,
+  bellTipSpread: 0.5,
+  bellStrokeWidth: 1,
+  bellPlateauPos: 0.75,
+  sampleHeight: 110,
+  sampleWidth: 90,
+  inferredSampleHeight: 120,
+  gapHeight: 60,
+  sampleSpacing: 60,
+  columnSpacing: 90,
+  tentacleWidth: 2,
+  tentacleSpacing: 5,
+  inOutCPDistance: 0.3,
+  bundleCPDistance: 0.6,
+  sampleFontSize: 12,
+  showLegend: true,
+  phylogenyColorScheme: true,
+  phylogenyHueOffset: 0,
+  sampleTakenGuide: "text"
+} as LayoutProperties;
+
+export const DEFAULT_COST_WEIGHTS = {
+  crossing: 10,
+  pathLength: 2,
+  orderMismatch: 2,
+  bundleMismatch: 3,
+  divergence: 4
+} as CostWeights;

src/gui/gui.ts

@@ -1,15 +1,14 @@
 import GUI, { Controller } from "lil-gui";
 import { DataTables, filterDataTablesByPatient } from "../data.js";
 import { tablesToJellyfish } from "../jellyfish.js";
-import {
-  CostWeights,
-  DEFAULT_COST_WEIGHTS,
-  LayoutProperties,
-} from "../layout.js";
+import { CostWeights, LayoutProperties } from "../layout.js";
 import { addInteractions } from "../interactions.js";
 import { downloadSvg, downloadPng } from "./download.js";
-import { DEFAULT_BELL_PLOT_PROPERTIES } from "../bellplot.js";
 import { escapeHtml } from "../utils.js";
+import {
+  DEFAULT_COST_WEIGHTS,
+  DEFAULT_PROPERTIES,
+} from "../defaultProperties.js";
 
 interface GeneralProperties {
   patient: string | null;
@@ -21,25 +20,6 @@ const DEFAULT_GENERAL_PROPERTIES = {
   zoom: 1,
 } as GeneralProperties;
 
-const DEFAULT_LAYOUT_PROPERTIES = {
-  sampleHeight: 110,
-  sampleWidth: 90,
-  inferredSampleHeight: 120,
-  gapHeight: 60,
-  sampleSpacing: 60,
-  columnSpacing: 90,
-  tentacleWidth: 2,
-  tentacleSpacing: 5,
-  inOutCPDistance: 0.3,
-  bundleCPDistance: 0.6,
-  sampleFontSize: 12,
-  showLegend: true,
-  phylogenyColorScheme: true,
-  phylogenyHueOffset: 0,
-  sampleTakenGuide: "text",
-  ...DEFAULT_BELL_PLOT_PROPERTIES,
-} as LayoutProperties;
-
 export function setupGui(container: HTMLElement, tables: DataTables) {
   container.innerHTML = HTML_TEMPLATE;
   const jellyfishGui = container.querySelector(".jellyfish-gui") as HTMLElement;
@@ -93,7 +73,7 @@ export function setupGui(container: HTMLElement, tables: DataTables) {
   layoutFolder.add(layoutProps, "bellTipShape", 0, 1);
   layoutFolder.add(layoutProps, "bellTipSpread", 0, 1);
   layoutFolder.add(layoutProps, "bellStrokeWidth", 0, 3);
-  layoutFolder.add(layoutProps, "plateauPos", 0.2, 1);
+  layoutFolder.add(layoutProps, "bellPlateauPos", 0.2, 1);
   layoutFolder.add(layoutProps, "sampleFontSize", 8, 16);
   layoutFolder.add(layoutProps, "showLegend");
   layoutFolder.add(layoutProps, "phylogenyColorScheme");
@@ -188,7 +168,7 @@ function getSavedOrDefaultSettings() {
       ...(settings.generalProps ?? {}),
     } as GeneralProperties,
     layoutProps: {
-      ...DEFAULT_LAYOUT_PROPERTIES,
+      ...DEFAULT_PROPERTIES,
       ...(settings.layoutProps ?? {}),
     } as LayoutProperties,
     costWeights: {

src/jellyfish.ts

@@ -18,7 +18,6 @@ import { treeIterator, treeToNodeArray } from "./tree.js";
 import * as d3 from "d3";
 import {
   CostWeights,
-  DEFAULT_COST_WEIGHTS,
   findLegendPlacement,
   getNodePlacement,
   LayoutProperties,
@@ -41,6 +40,7 @@ import {
   SubcloneMetricsMap,
 } from "./composition.js";
 import { createDistanceMatrix, jsDivergence } from "./statistics.js";
+import { DEFAULT_COST_WEIGHTS } from "./defaultProperties.js";
 
 /**
  * This is the main function that glues everything together.