Fix re-sharing via URL

src/components/Chart.svelte

@@ -751,7 +751,7 @@
     let labelOffset = 0;
     for (const ds of datasets) {
       ctx.fillStyle = ds.color;
-      const label = `— ${ds.title}`;
+      const label = `— ${ds.displayTitle()}`;
       drawText(ctx, label, width - 10, height - 10 - labelOffset, 0, Align.right, Align.bottom);
       labelOffset += 12;
     }

src/components/LeftMenu.svelte

@@ -13,7 +13,7 @@
 <side class="left" {style} data-tour="browser">
   <ImportDataSetsMenu />
   <div class="tree">
-    {#each $datasetTree.datasets as child (child.title)}
+    {#each $datasetTree.datasets as child (child.displayTitle())}
       {#if child instanceof DataSet}
         <TreeLeafNode {chart} node={child} />
       {:else}

src/components/tree/TreeInnerNode.svelte

@@ -24,11 +24,11 @@
   <span on:click={toggleExpanded}>
     <Fa icon={expanded ? faChevronDown : faChevronRight} style="width: 0.9em; margin-right: 0.5em" />
     <span>
-      {node.title}
+      {node.displayTitle()}
     </span>
   </span>
   {#if expanded}
-    {#each node.datasets as child (child.title)}
+    {#each node.datasets as child (child.displayTitle())}
       {#if child instanceof DataSet}
         <TreeLeafNode {chart} node={child} />
       {:else}

src/components/tree/TreeLeafNode.svelte

@@ -35,7 +35,7 @@
 >
   <Fa icon={selected ? faEye : faEyeSlash} {color} style="width: 1em; margin-right: 0.5em" />
   <span>
-    {node.title}
+    {node.displayTitle()}
   </span>
 </div>
 

src/data/DataSet.ts

@@ -34,6 +34,11 @@ export default class DataSet {
     this.gap = computeGap(data);
   }
 
+  displayTitle(): string {
+    // for display to user; use custom title if available, otherwise default to title
+    return this.customTitle || this.title;
+  }
+
   randomize(): void {
     this.color = getRandomColor();
   }
@@ -108,6 +113,11 @@ export class DataGroup {
 
   constructor(public readonly title: string, public readonly datasets: (DataSet | DataGroup)[]) {}
 
+  displayTitle(): string {
+    // for interface compatibility with `DataSet.displayTitle()`
+    return this.title;
+  }
+
   flat(arr: DataSet[]): void {
     for (const child of this.datasets) {
       if (child instanceof DataSet) {

src/deriveLinkDefaults.ts

@@ -181,12 +181,7 @@ export function initialLoader(datasets: ILinkConfig['datasets']) {
 
     return Promise.all(resolvedDataSets).then((data) => {
       const cleaned = data.filter((d): d is DataSet => d != null);
-      cleaned.forEach((d) => {
-        if (d.customTitle) {
-          d.title = d.customTitle;
-        }
-        add(d);
-      });
+      cleaned.forEach((d) => add(d));
       return cleaned;
     });
   };
@@ -228,11 +223,15 @@ export function getDirectLinkImpl(state: SharedState): { url: URL; anySkipped: b
   let anySkipped = false;
   state.active.forEach((data) => {
     if (data.params) {
-      config.datasets.push({
+      const ds = {
         color: data.color,
         title: data.title,
         params: data.params as unknown as Record<string, unknown>,
-      });
+      };
+      if (data.customTitle) {
+        ds.params.custom_title = data.customTitle;
+      }
+      config.datasets.push(ds);
     } else {
       console.log('unable to get direct link to dataset:', data.title);
       anySkipped = true;