@diagrammo/dgmo 0.5.0 → 0.5.2

package/dist/index.d.cts

@@ -397,7 +397,7 @@ interface ArcNodeGroup {
     color: string | null;
     lineNumber: number;
 }
-type TimelineSort = 'time' | 'group';
+type TimelineSort = 'time' | 'group' | 'tag';
 interface TimelineEvent {
     date: string;
     endDate: string | null;
@@ -477,6 +477,7 @@ interface ParsedD3 {
     timelineMarkers: TimelineMarker[];
     timelineTagGroups: TagGroup[];
     timelineSort: TimelineSort;
+    timelineDefaultSwimlaneTG?: string;
     timelineScale: boolean;
     timelineSwimlanes: boolean;
     vennSets: VennSet[];
@@ -545,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): 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.
  */
@@ -564,6 +565,7 @@ declare function renderD3ForExport(content: string, theme: 'light' | 'dark' | 't
     collapsedNodes?: Set<string>;
     activeTagGroup?: string | null;
     hiddenAttributes?: Set<string>;
+    swimlaneTagGroup?: string | null;
 }, options?: {
     branding?: boolean;
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
@@ -1974,6 +1976,7 @@ declare const seriesColors: string[];
 interface DiagramViewState {
     activeTagGroup?: string;
     collapsedGroups?: string[];
+    swimlaneTagGroup?: string;
 }
 interface DecodedDiagramUrl {
     dsl: string;

package/dist/index.d.ts

@@ -397,7 +397,7 @@ interface ArcNodeGroup {
     color: string | null;
     lineNumber: number;
 }
-type TimelineSort = 'time' | 'group';
+type TimelineSort = 'time' | 'group' | 'tag';
 interface TimelineEvent {
     date: string;
     endDate: string | null;
@@ -477,6 +477,7 @@ interface ParsedD3 {
     timelineMarkers: TimelineMarker[];
     timelineTagGroups: TagGroup[];
     timelineSort: TimelineSort;
+    timelineDefaultSwimlaneTG?: string;
     timelineScale: boolean;
     timelineSwimlanes: boolean;
     vennSets: VennSet[];
@@ -545,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): 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.
  */
@@ -564,6 +565,7 @@ declare function renderD3ForExport(content: string, theme: 'light' | 'dark' | 't
     collapsedNodes?: Set<string>;
     activeTagGroup?: string | null;
     hiddenAttributes?: Set<string>;
+    swimlaneTagGroup?: string | null;
 }, options?: {
     branding?: boolean;
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
@@ -1974,6 +1976,7 @@ declare const seriesColors: string[];
 interface DiagramViewState {
     activeTagGroup?: string;
     collapsedGroups?: string[];
+    swimlaneTagGroup?: string;
 }
 interface DecodedDiagramUrl {
     dsl: string;

package/dist/index.js

@@ -18478,9 +18478,18 @@ function parseD3(content, palette) {
         continue;
       }
       if (key === "sort") {
-        const v = line10.substring(colonIndex + 1).trim().toLowerCase();
-        if (v === "time" || v === "group") {
-          result.timelineSort = v;
+        const v = line10.substring(colonIndex + 1).trim();
+        const vLower = v.toLowerCase();
+        if (vLower === "time" || vLower === "group") {
+          result.timelineSort = vLower;
+        } else if (vLower === "tag" || vLower.startsWith("tag:")) {
+          result.timelineSort = "tag";
+          if (vLower.startsWith("tag:")) {
+            const groupRef = v.substring(4).trim();
+            if (groupRef) {
+              result.timelineDefaultSwimlaneTG = groupRef;
+            }
+          }
         }
         continue;
       }
@@ -18630,6 +18639,25 @@ function parseD3(content, palette) {
         }
       }
     }
+    if (result.timelineSort === "tag") {
+      if (result.timelineTagGroups.length === 0) {
+        warn(1, '"sort: tag" requires at least one tag group definition');
+        result.timelineSort = "time";
+      } else if (result.timelineDefaultSwimlaneTG) {
+        const ref = result.timelineDefaultSwimlaneTG.toLowerCase();
+        const match = result.timelineTagGroups.find(
+          (g) => g.name.toLowerCase() === ref || g.alias?.toLowerCase() === ref
+        );
+        if (match) {
+          result.timelineDefaultSwimlaneTG = match.name;
+        } else {
+          warn(1, `"sort: tag:${result.timelineDefaultSwimlaneTG}" \u2014 no tag group matches "${result.timelineDefaultSwimlaneTG}"`);
+          result.timelineDefaultSwimlaneTG = result.timelineTagGroups[0].name;
+        }
+      } else {
+        result.timelineDefaultSwimlaneTG = result.timelineTagGroups[0].name;
+      }
+    }
     return result;
   }
   if (result.type === "venn") {
@@ -19388,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) {
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
   d3Selection12.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
@@ -19402,6 +19430,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     orientation
   } = parsed;
   if (timelineEvents.length === 0) return;
+  if (swimlaneTagGroup == null && timelineSort === "tag" && parsed.timelineDefaultSwimlaneTG) {
+    swimlaneTagGroup = parsed.timelineDefaultSwimlaneTG;
+  }
   const tooltip = createTooltip(container, palette, isDark);
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -19415,9 +19446,47 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   timelineGroups.forEach((grp, i) => {
     groupColorMap.set(grp.name, grp.color ?? colors[i % colors.length]);
   });
+  let tagLanes = null;
+  if (swimlaneTagGroup) {
+    const tagKey = swimlaneTagGroup.toLowerCase();
+    const tagGroup = parsed.timelineTagGroups.find(
+      (g) => g.name.toLowerCase() === tagKey
+    );
+    if (tagGroup) {
+      const buckets = /* @__PURE__ */ new Map();
+      const otherEvents = [];
+      for (const ev of timelineEvents) {
+        const val = ev.metadata[tagKey];
+        if (val) {
+          const list = buckets.get(val) ?? [];
+          list.push(ev);
+          buckets.set(val, list);
+        } else {
+          otherEvents.push(ev);
+        }
+      }
+      const laneEntries = [...buckets.entries()].sort((a, b) => {
+        const aMin = Math.min(
+          ...a[1].map((e) => parseTimelineDate(e.date))
+        );
+        const bMin = Math.min(
+          ...b[1].map((e) => parseTimelineDate(e.date))
+        );
+        return aMin - bMin;
+      });
+      tagLanes = laneEntries.map(([name, events]) => ({ name, events }));
+      if (otherEvents.length > 0) {
+        tagLanes.push({ name: "(Other)", events: otherEvents });
+      }
+      for (const entry of tagGroup.entries) {
+        groupColorMap.set(entry.value, entry.color);
+      }
+    }
+  }
+  const effectiveColorTG = activeTagGroup ?? swimlaneTagGroup ?? null;
   function eventColor(ev) {
-    if (activeTagGroup) {
-      const tagColor = resolveTagColor(ev.metadata, parsed.timelineTagGroups, activeTagGroup);
+    if (effectiveColorTG) {
+      const tagColor = resolveTagColor(ev.metadata, parsed.timelineTagGroups, effectiveColorTG);
       if (tagColor) return tagColor;
     }
     if (ev.group && groupColorMap.has(ev.group)) {
@@ -19521,12 +19590,28 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
   if (isVertical) {
-    if (timelineSort === "group" && timelineGroups.length > 0) {
-      const groupNames = timelineGroups.map((gr) => gr.name);
-      const ungroupedEvents = timelineEvents.filter(
-        (ev) => ev.group === null || !groupNames.includes(ev.group)
-      );
-      const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+    const useGroupedVertical = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
+    if (useGroupedVertical) {
+      let laneNames;
+      let laneEventsByName;
+      if (tagLanes) {
+        laneNames = tagLanes.map((l) => l.name);
+        laneEventsByName = new Map(tagLanes.map((l) => [l.name, l.events]));
+      } else {
+        const groupNames = timelineGroups.map((gr) => gr.name);
+        const ungroupedEvents = timelineEvents.filter(
+          (ev) => ev.group === null || !groupNames.includes(ev.group)
+        );
+        laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+        laneEventsByName = new Map(
+          laneNames.map((name) => [
+            name,
+            timelineEvents.filter(
+              (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+            )
+          ])
+        );
+      }
       const laneCount = laneNames.length;
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
@@ -19581,6 +19666,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           formatDateLabel(latestEndDateStr)
         );
       }
+      if (timelineSwimlanes || tagLanes) {
+        laneNames.forEach((laneName, laneIdx) => {
+          const laneX = laneIdx * laneWidth;
+          const fillColor = laneIdx % 2 === 0 ? textColor : "transparent";
+          g.append("rect").attr("class", "tl-swimlane").attr("data-group", laneName).attr("x", laneX).attr("y", 0).attr("width", laneWidth).attr("height", innerHeight).attr("fill", fillColor).attr("opacity", 0.06);
+        });
+      }
       laneNames.forEach((laneName, laneIdx) => {
         const laneX = laneIdx * laneWidth;
         const laneColor = groupColorMap.get(laneName) ?? textColor;
@@ -19588,9 +19680,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", laneName).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, laneName)).on("mouseleave", () => fadeReset(g));
         headerG.append("text").attr("x", laneCenter).attr("y", -15).attr("text-anchor", "middle").attr("fill", laneColor).attr("font-size", "12px").attr("font-weight", "600").text(laneName);
         g.append("line").attr("x1", laneCenter).attr("y1", 0).attr("x2", laneCenter).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
-        const laneEvents = timelineEvents.filter(
-          (ev) => laneName === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === laneName
-        );
+        const laneEvents = laneEventsByName.get(laneName) ?? [];
         for (const ev of laneEvents) {
           const y = yScale(parseTimelineDate(ev.date));
           const evG = g.append("g").attr("class", "tl-event").attr("data-group", laneName).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
@@ -19608,10 +19698,11 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
           });
           setTagAttrs(evG, ev);
+          const evColor = eventColor(ev);
           if (ev.endDate) {
             const y2 = yScale(parseTimelineDate(ev.endDate));
             const rectH = Math.max(y2 - y, 4);
-            let fill2 = laneColor;
+            let fill2 = evColor;
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
               const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -19625,7 +19716,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             evG.append("rect").attr("x", laneCenter - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2);
             evG.append("text").attr("x", laneCenter + 14).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
           } else {
-            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", laneColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
+            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", evColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
             evG.append("text").attr("x", laneCenter + 10).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
           }
         }
@@ -19748,18 +19839,24 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   const BAR_H = 22;
   const GROUP_GAP = 12;
-  if (timelineSort === "group" && timelineGroups.length > 0) {
-    const groupNames = timelineGroups.map((gr) => gr.name);
-    const ungroupedEvents = timelineEvents.filter(
-      (ev) => ev.group === null || !groupNames.includes(ev.group)
-    );
-    const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
-    const lanes = laneNames.map((name) => ({
-      name,
-      events: timelineEvents.filter(
-        (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
-      )
-    }));
+  const useGroupedHorizontal = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
+  if (useGroupedHorizontal) {
+    let lanes;
+    if (tagLanes) {
+      lanes = tagLanes;
+    } else {
+      const groupNames = timelineGroups.map((gr) => gr.name);
+      const ungroupedEvents = timelineEvents.filter(
+        (ev) => ev.group === null || !groupNames.includes(ev.group)
+      );
+      const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+      lanes = laneNames.map((name) => ({
+        name,
+        events: timelineEvents.filter(
+          (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+        )
+      }));
+    }
     const totalEventRows = lanes.reduce((s, l) => s + l.events.length, 0);
     const scaleMargin = timelineScale ? 24 : 0;
     const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
@@ -19819,7 +19916,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       );
     }
     let curY = markerMargin;
-    if (timelineSwimlanes) {
+    if (timelineSwimlanes || tagLanes) {
       let swimY = markerMargin;
       lanes.forEach((lane, idx) => {
         const laneSpan = lane.events.length * rowH;
@@ -19871,12 +19968,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
         });
         setTagAttrs(evG, ev);
+        const evColor = eventColor(ev);
         if (ev.endDate) {
           const x2 = xScale(parseTimelineDate(ev.endDate));
           const rectW = Math.max(x2 - x, 4);
           const estLabelWidth = ev.label.length * 7 + 16;
           const labelFitsInside = rectW >= estLabelWidth;
-          let fill2 = laneColor;
+          let fill2 = evColor;
           if (ev.uncertain) {
             const gradientId = `uncertain-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -19884,7 +19982,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
-            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", laneColor).attr("stop-opacity", (d) => d.opacity);
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", evColor).attr("stop-opacity", (d) => d.opacity);
             fill2 = `url(#${gradientId})`;
           }
           evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2);
@@ -19901,7 +19999,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           const wouldFlipLeft = x > innerWidth * 0.6;
           const labelFitsLeft = x - 10 - estLabelWidth > 0;
           const flipLeft = wouldFlipLeft && labelFitsLeft;
-          evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", laneColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
+          evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", evColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
           evG.append("text").attr("x", flipLeft ? x - 10 : x + 10).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "12px").text(ev.label);
         }
       });
@@ -20056,26 +20154,62 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const LG_ENTRY_DOT_GAP = 4;
     const LG_ENTRY_TRAIL = 8;
     const LG_GROUP_GAP = 12;
+    const LG_ICON_W = 20;
     const mainSvg = d3Selection12.select(container).select("svg");
     const mainG = mainSvg.select("g");
     if (!mainSvg.empty() && !mainG.empty()) {
-      let drawLegend2 = function() {
+      let drawSwimlaneIcon2 = function(parent, x, y, isSwimActive) {
+        const iconG = parent.append("g").attr("class", "tl-swimlane-icon").attr("transform", `translate(${x}, ${y})`).style("cursor", "pointer");
+        const barColor = isSwimActive ? palette.primary : palette.textMuted;
+        const barOpacity = isSwimActive ? 1 : 0.35;
+        const bars = [
+          { y: 0, w: 8 },
+          { y: 4, w: 12 },
+          { y: 8, w: 6 }
+        ];
+        for (const bar of bars) {
+          iconG.append("rect").attr("x", 0).attr("y", bar.y).attr("width", bar.w).attr("height", 2).attr("rx", 1).attr("fill", barColor).attr("opacity", barOpacity);
+        }
+        return iconG;
+      }, relayout2 = function() {
+        renderTimeline(
+          container,
+          parsed,
+          palette,
+          isDark,
+          onClickItem,
+          exportDims,
+          currentActiveGroup,
+          currentSwimlaneGroup,
+          onTagStateChange,
+          viewMode
+        );
+      }, drawLegend2 = function() {
         mainSvg.selectAll(".tl-tag-legend-group").remove();
-        const totalW = legendGroups.reduce((s, lg) => {
+        const visibleGroups = viewMode ? legendGroups.filter(
+          (lg) => currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase()
+        ) : legendGroups;
+        if (visibleGroups.length === 0) return;
+        const totalW = visibleGroups.reduce((s, lg) => {
           const isActive = 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) {
-          const isActive = currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase();
+        for (const lg of visibleGroups) {
+          const groupKey = lg.group.name.toLowerCase();
+          const isActive = 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", lg.group.name.toLowerCase()).attr("data-tag-group", lg.group.name.toLowerCase()).attr("data-legend-entry", "__group__").style("cursor", "pointer").on("click", () => {
-            const groupKey = lg.group.name.toLowerCase();
-            currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
-            drawLegend2();
-            recolorEvents2();
-          });
+          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);
           }
@@ -20088,27 +20222,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) {
-            let entryX = pillXOff + pillWidth + 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);
@@ -20118,17 +20269,18 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           cx += (isActive ? lg.expandedWidth : lg.minifiedWidth) + LG_GROUP_GAP;
         }
       }, recolorEvents2 = function() {
+        const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
         mainG.selectAll(".tl-event").each(function() {
           const el = d3Selection12.select(this);
           const lineNum = el.attr("data-line-number");
           const ev = lineNum ? eventByLine.get(lineNum) : void 0;
           if (!ev) return;
           let color;
-          if (currentActiveGroup) {
+          if (colorTG) {
             const tagColor = resolveTagColor(
               ev.metadata,
               parsed.timelineTagGroups,
-              currentActiveGroup
+              colorTG
             );
             color = tagColor ?? (ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor);
           } else {
@@ -20138,12 +20290,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", color);
         });
       };
-      var drawLegend = drawLegend2, recolorEvents = recolorEvents2;
+      var drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
       const legendY = title ? 50 : 10;
       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 + 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;
@@ -20155,6 +20308,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         };
       });
       let currentActiveGroup = activeTagGroup ?? null;
+      let currentSwimlaneGroup = swimlaneTagGroup ?? null;
       const eventByLine = /* @__PURE__ */ new Map();
       for (const ev of timelineEvents) {
         eventByLine.set(String(ev.lineNumber), ev);
@@ -21129,7 +21283,16 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
   } else if (parsed.type === "arc") {
     renderArcDiagram(container, parsed, effectivePalette, isDark, void 0, dims);
   } else if (parsed.type === "timeline") {
-    renderTimeline(container, parsed, effectivePalette, isDark, void 0, dims);
+    renderTimeline(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      void 0,
+      dims,
+      orgExportState?.activeTagGroup,
+      orgExportState?.swimlaneTagGroup
+    );
   } else if (parsed.type === "venn") {
     renderVenn(container, parsed, effectivePalette, isDark, void 0, dims);
   } else if (parsed.type === "quadrant") {
@@ -22012,6 +22175,9 @@ function encodeDiagramUrl(dsl, options) {
   if (options?.viewState?.collapsedGroups?.length) {
     hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(","))}`;
   }
+  if (options?.viewState?.swimlaneTagGroup) {
+    hash += `&swim=${encodeURIComponent(options.viewState.swimlaneTagGroup)}`;
+  }
   return { url: `${baseUrl}?${hash}#${hash}` };
 }
 function decodeDiagramUrl(hash) {
@@ -22035,6 +22201,9 @@ function decodeDiagramUrl(hash) {
     if (key === "cg" && val) {
       viewState.collapsedGroups = val.split(",").filter(Boolean);
     }
+    if (key === "swim" && val) {
+      viewState.swimlaneTagGroup = val;
+    }
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);