@diagrammo/dgmo 0.5.1 → 0.5.3

package/dist/index.d.cts

@@ -546,7 +546,7 @@ declare function computeTimeTicks(domainMin: number, domainMax: number, scale: d
  * Renders a timeline chart into the given container using D3.
  * Supports horizontal (default) and vertical orientation.
  */
-declare function renderTimeline(container: HTMLDivElement, parsed: ParsedD3, palette: PaletteColors, isDark: boolean, onClickItem?: (lineNumber: number) => void, exportDims?: D3ExportDimensions, activeTagGroup?: string | null, swimlaneTagGroup?: string | null, onTagStateChange?: (activeTagGroup: string | null, swimlaneTagGroup: string | null) => void): void;
+declare function renderTimeline(container: HTMLDivElement, parsed: ParsedD3, palette: PaletteColors, isDark: boolean, onClickItem?: (lineNumber: number) => void, exportDims?: D3ExportDimensions, activeTagGroup?: string | null, swimlaneTagGroup?: string | null, onTagStateChange?: (activeTagGroup: string | null, swimlaneTagGroup: string | null) => void, viewMode?: boolean): void;
 /**
  * Renders a word cloud into the given container using d3-cloud.
  */

package/dist/index.d.ts

@@ -546,7 +546,7 @@ declare function computeTimeTicks(domainMin: number, domainMax: number, scale: d
  * Renders a timeline chart into the given container using D3.
  * Supports horizontal (default) and vertical orientation.
  */
-declare function renderTimeline(container: HTMLDivElement, parsed: ParsedD3, palette: PaletteColors, isDark: boolean, onClickItem?: (lineNumber: number) => void, exportDims?: D3ExportDimensions, activeTagGroup?: string | null, swimlaneTagGroup?: string | null, onTagStateChange?: (activeTagGroup: string | null, swimlaneTagGroup: string | null) => void): void;
+declare function renderTimeline(container: HTMLDivElement, parsed: ParsedD3, palette: PaletteColors, isDark: boolean, onClickItem?: (lineNumber: number) => void, exportDims?: D3ExportDimensions, activeTagGroup?: string | null, swimlaneTagGroup?: string | null, onTagStateChange?: (activeTagGroup: string | null, swimlaneTagGroup: string | null) => void, viewMode?: boolean): void;
 /**
  * Renders a word cloud into the given container using d3-cloud.
  */

package/dist/index.js

@@ -19416,7 +19416,7 @@ function buildEventTooltipHtml(ev) {
 function buildEraTooltipHtml(era) {
   return `<strong>${era.label}</strong><br>${formatDateLabel(era.startDate)} \u2192 ${formatDateLabel(era.endDate)}`;
 }
-function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange) {
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
   d3Selection12.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
@@ -20181,27 +20181,36 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           exportDims,
           currentActiveGroup,
           currentSwimlaneGroup,
-          onTagStateChange
+          onTagStateChange,
+          viewMode
         );
       }, drawLegend2 = function() {
         mainSvg.selectAll(".tl-tag-legend-group").remove();
-        const totalW = legendGroups.reduce((s, lg) => {
-          const isActive = currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase();
+        const effectiveColorKey = (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
+        const visibleGroups = viewMode ? legendGroups.filter(
+          (lg) => effectiveColorKey != null && lg.group.name.toLowerCase() === effectiveColorKey
+        ) : legendGroups;
+        if (visibleGroups.length === 0) return;
+        const totalW = visibleGroups.reduce((s, lg) => {
+          const isActive = viewMode || currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase();
           return s + (isActive ? lg.expandedWidth : lg.minifiedWidth);
-        }, 0) + (legendGroups.length - 1) * LG_GROUP_GAP;
+        }, 0) + (visibleGroups.length - 1) * LG_GROUP_GAP;
         let cx = (width - totalW) / 2;
-        for (const lg of legendGroups) {
+        for (const lg of visibleGroups) {
           const groupKey = lg.group.name.toLowerCase();
-          const isActive = currentActiveGroup != null && currentActiveGroup.toLowerCase() === groupKey;
+          const isActive = viewMode || currentActiveGroup != null && currentActiveGroup.toLowerCase() === groupKey;
           const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
           const pillLabel = lg.group.name;
           const pillWidth = pillLabel.length * LG_PILL_FONT_W + LG_PILL_PAD;
-          const gEl = mainSvg.append("g").attr("transform", `translate(${cx}, ${legendY})`).attr("class", "tl-tag-legend-group tl-tag-legend-entry").attr("data-legend-group", groupKey).attr("data-tag-group", groupKey).attr("data-legend-entry", "__group__").style("cursor", "pointer").on("click", () => {
-            currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
-            drawLegend2();
-            recolorEvents2();
-            onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-          });
+          const gEl = mainSvg.append("g").attr("transform", `translate(${cx}, ${legendY})`).attr("class", "tl-tag-legend-group tl-tag-legend-entry").attr("data-legend-group", groupKey).attr("data-tag-group", groupKey).attr("data-legend-entry", "__group__");
+          if (!viewMode) {
+            gEl.style("cursor", "pointer").on("click", () => {
+              currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
+              drawLegend2();
+              recolorEvents2();
+              onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+            });
+          }
           if (isActive) {
             gEl.append("rect").attr("width", lg.expandedWidth).attr("height", LG_HEIGHT).attr("rx", LG_HEIGHT / 2).attr("fill", groupBg);
           }
@@ -20214,36 +20223,44 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           }
           gEl.append("text").attr("x", pillXOff + pillWidth / 2).attr("y", LG_HEIGHT / 2 + LG_PILL_FONT_SIZE / 2 - 2).attr("font-size", LG_PILL_FONT_SIZE).attr("font-weight", "500").attr("font-family", FONT_FAMILY).attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
           if (isActive) {
-            const iconX = pillXOff + pillWidth + 5;
-            const iconY = (LG_HEIGHT - 10) / 2;
-            const iconEl = drawSwimlaneIcon2(gEl, iconX, iconY, isSwimActive);
-            iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
-              event.stopPropagation();
-              currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
-              onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-              relayout2();
-            });
-            let entryX = pillXOff + pillWidth + LG_ICON_W + 4;
+            let entryX;
+            if (!viewMode) {
+              const iconX = pillXOff + pillWidth + 5;
+              const iconY = (LG_HEIGHT - 10) / 2;
+              const iconEl = drawSwimlaneIcon2(gEl, iconX, iconY, isSwimActive);
+              iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
+                event.stopPropagation();
+                currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
+                onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+                relayout2();
+              });
+              entryX = pillXOff + pillWidth + LG_ICON_W + 4;
+            } else {
+              entryX = pillXOff + pillWidth + 8;
+            }
             for (const entry of lg.group.entries) {
               const tagKey = lg.group.name.toLowerCase();
               const tagVal = entry.value.toLowerCase();
-              const entryG = gEl.append("g").attr("class", "tl-tag-legend-entry").attr("data-tag-group", tagKey).attr("data-legend-entry", tagVal).style("cursor", "pointer").on("mouseenter", (event) => {
-                event.stopPropagation();
-                fadeToTagValue(mainG, tagKey, tagVal);
-                mainSvg.selectAll(".tl-tag-legend-entry").each(function() {
-                  const el = d3Selection12.select(this);
-                  const ev = el.attr("data-legend-entry");
-                  if (ev === "__group__") return;
-                  const eg = el.attr("data-tag-group");
-                  el.attr("opacity", eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY);
+              const entryG = gEl.append("g").attr("class", "tl-tag-legend-entry").attr("data-tag-group", tagKey).attr("data-legend-entry", tagVal);
+              if (!viewMode) {
+                entryG.style("cursor", "pointer").on("mouseenter", (event) => {
+                  event.stopPropagation();
+                  fadeToTagValue(mainG, tagKey, tagVal);
+                  mainSvg.selectAll(".tl-tag-legend-entry").each(function() {
+                    const el = d3Selection12.select(this);
+                    const ev = el.attr("data-legend-entry");
+                    if (ev === "__group__") return;
+                    const eg = el.attr("data-tag-group");
+                    el.attr("opacity", eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY);
+                  });
+                }).on("mouseleave", (event) => {
+                  event.stopPropagation();
+                  fadeReset(mainG);
+                  mainSvg.selectAll(".tl-tag-legend-entry").attr("opacity", 1);
+                }).on("click", (event) => {
+                  event.stopPropagation();
                 });
-              }).on("mouseleave", (event) => {
-                event.stopPropagation();
-                fadeReset(mainG);
-                mainSvg.selectAll(".tl-tag-legend-entry").attr("opacity", 1);
-              }).on("click", (event) => {
-                event.stopPropagation();
-              });
+              }
               entryG.append("circle").attr("cx", entryX + LG_DOT_R).attr("cy", LG_HEIGHT / 2).attr("r", LG_DOT_R).attr("fill", entry.color);
               const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
               entryG.append("text").attr("x", textX).attr("y", LG_HEIGHT / 2 + LG_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LG_ENTRY_FONT_SIZE).attr("font-family", FONT_FAMILY).attr("fill", palette.textMuted).text(entry.value);
@@ -20279,7 +20296,8 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
       const legendGroups = parsed.timelineTagGroups.map((g) => {
         const pillW = g.name.length * LG_PILL_FONT_W + LG_PILL_PAD;
-        let entryX = LG_CAPSULE_PAD + pillW + LG_ICON_W + 4;
+        const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
+        let entryX = LG_CAPSULE_PAD + pillW + iconSpace;
         for (const entry of g.entries) {
           const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
           entryX = textX + entry.value.length * LG_ENTRY_FONT_W + LG_ENTRY_TRAIL;