Analysepipeline: Snake-Layout (3x3) statt linearer Reihe
Pipeline laeuft jetzt zickzack: Reihe 1 von links nach rechts, U-Turn nach unten, Reihe 2 von rechts nach links, U-Turn nach unten, Reihe 3 wieder von links nach rechts. Karte waechst auf benoetigte Hoehe statt horizontalem Scrollen. - pipeline.js: Bloecke werden in Dreier-Gruppen aufgeteilt, Direction ltr/rtl wechselt pro Reihe. Zwischen Reihen rendert ein SVG-U-Turn-Pfeil (Bogen mit Pfeilkopf) die Verbindung. Daten-Fluss-Animation (is-flowing) funktioniert sowohl auf Inner-Pfeilen als auch auf U-Turns. - CSS: .pipeline-row mit flex-direction abhaengig von data-direction. rtl-Reihen kippen Pfeilkopf und Animation in entgegengesetzte Richtung. U-Turn-Pfad als SVG mit stroke-dasharray-Animation bei aktivem Fluss. - Mobile (<900px): Snake aufgeloest, alle Reihen werden vertikal gestapelt, U-Turns ausgeblendet — bestehende Vertikal-Stilistik bleibt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -165,20 +165,15 @@ const Pipeline = {
|
||||
}, 600);
|
||||
},
|
||||
|
||||
/** Vollbild-Pipeline (Tab "Analysepipeline") rendern. */
|
||||
/** Vollbild-Pipeline (Tab "Analysepipeline") als 3x3-Snake rendern. */
|
||||
_render() {
|
||||
const stage = document.getElementById('pipeline-stage');
|
||||
const meta = document.getElementById('pipeline-header-meta');
|
||||
const sidenote = document.getElementById('pipeline-sidenote');
|
||||
if (!stage) return;
|
||||
|
||||
// Header: letzter Refresh
|
||||
if (meta) {
|
||||
meta.textContent = this._formatHeader();
|
||||
}
|
||||
if (sidenote) {
|
||||
sidenote.hidden = !this._isResearch;
|
||||
}
|
||||
if (meta) meta.textContent = this._formatHeader();
|
||||
if (sidenote) sidenote.hidden = !this._isResearch;
|
||||
|
||||
// Brandneue Lage ohne Refresh
|
||||
if (!this._lastRefreshHeader) {
|
||||
@@ -186,26 +181,55 @@ const Pipeline = {
|
||||
return;
|
||||
}
|
||||
|
||||
// Steps + Pfeile
|
||||
// Sichtbare Blöcke (skipped komplett ausgeblendet — Anforderung 4b)
|
||||
const visible = (this._definition || []).filter(s => {
|
||||
const st = this._stateByKey[s.key];
|
||||
// Übersprungene komplett ausblenden (laut Anforderung 4b)
|
||||
return !st || st.status !== 'skipped';
|
||||
});
|
||||
|
||||
const blocksHtml = visible.map((s, i) => this._renderBlock(s, i, visible.length)).join('');
|
||||
stage.innerHTML = `<div class="pipeline-track">${blocksHtml}</div>`;
|
||||
// In Dreier-Reihen aufteilen, Snake-Direction abwechselnd
|
||||
const ROW_SIZE = 3;
|
||||
const rows = [];
|
||||
for (let i = 0; i < visible.length; i += ROW_SIZE) {
|
||||
rows.push({
|
||||
steps: visible.slice(i, i + ROW_SIZE),
|
||||
direction: (rows.length % 2 === 0) ? 'ltr' : 'rtl',
|
||||
});
|
||||
}
|
||||
|
||||
let trackHtml = '';
|
||||
rows.forEach((row, rowIdx) => {
|
||||
const isLastRow = rowIdx === rows.length - 1;
|
||||
let rowHtml = `<div class="pipeline-row" data-direction="${row.direction}">`;
|
||||
row.steps.forEach((s, i) => {
|
||||
const isLastBlockOverall = isLastRow && i === row.steps.length - 1;
|
||||
rowHtml += this._renderBlock(s, isLastBlockOverall);
|
||||
// Inner-Pfeil zwischen Blöcken einer Reihe (nicht hinter dem letzten)
|
||||
if (i < row.steps.length - 1) {
|
||||
rowHtml += `<div class="pipeline-arrow" data-from="${s.key}" data-arrow-type="inner"></div>`;
|
||||
}
|
||||
});
|
||||
rowHtml += '</div>';
|
||||
trackHtml += rowHtml;
|
||||
|
||||
// U-Turn-Pfeil zwischen dieser und der nächsten Reihe
|
||||
if (!isLastRow) {
|
||||
const lastInRow = row.steps[row.steps.length - 1];
|
||||
const side = row.direction === 'ltr' ? 'right' : 'left';
|
||||
trackHtml += this._renderUturn(side, lastInRow.key);
|
||||
}
|
||||
});
|
||||
|
||||
stage.innerHTML = `<div class="pipeline-track">${trackHtml}</div>`;
|
||||
this._bindBlockEvents(stage);
|
||||
},
|
||||
|
||||
_renderBlock(stepDef, index, total) {
|
||||
_renderBlock(stepDef, isLastOverall) {
|
||||
const st = this._stateByKey[stepDef.key];
|
||||
const status = (st && st.status) || 'pending';
|
||||
const cv = st ? st.count_value : null;
|
||||
const cs = st ? st.count_secondary : null;
|
||||
const isLast = (index === total - 1);
|
||||
const arrow = isLast ? '' : `<div class="pipeline-arrow" data-from="${stepDef.key}"></div>`;
|
||||
const loopMark = isLast && this._isResearch
|
||||
const loopMark = isLastOverall && this._isResearch
|
||||
? `<div class="pipeline-loop" title="Mehrfach-Durchlauf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg></div>`
|
||||
: '';
|
||||
const icon = this._icons[stepDef.icon] || this._icons.search;
|
||||
@@ -219,7 +243,26 @@ const Pipeline = {
|
||||
</div>
|
||||
${loopMark}
|
||||
</div>
|
||||
${arrow}
|
||||
`;
|
||||
},
|
||||
|
||||
/** U-Turn-Pfeil zwischen zwei Reihen (Snake-Übergang). */
|
||||
_renderUturn(side, fromKey) {
|
||||
// SVG-Bogen + Pfeilkopf, side="right" startet rechts oben, "left" startet links oben.
|
||||
// viewBox: 100 wide, 44 high
|
||||
const path = side === 'right'
|
||||
? 'M 92 0 L 92 18 A 14 14 0 0 1 78 32 L 8 32'
|
||||
: 'M 8 0 L 8 18 A 14 14 0 0 0 22 32 L 92 32';
|
||||
const head = side === 'right'
|
||||
? '<polyline points="14,26 8,32 14,38"/>'
|
||||
: '<polyline points="86,26 92,32 86,38"/>';
|
||||
return `
|
||||
<div class="pipeline-uturn" data-side="${side}" data-from="${fromKey}" data-arrow-type="uturn" aria-hidden="true">
|
||||
<svg viewBox="0 0 100 44" preserveAspectRatio="none">
|
||||
<path d="${path}" class="pipeline-uturn-path"/>
|
||||
<g class="pipeline-uturn-head">${head}</g>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
|
||||
@@ -251,12 +294,12 @@ const Pipeline = {
|
||||
const cEl = block.querySelector('.pipeline-block-count');
|
||||
if (cEl) cEl.innerHTML = this._formatCount(stepKey, cv, cs, status);
|
||||
|
||||
// Aktiven Pfeil zum nächsten Block markieren
|
||||
const arrows = stage.querySelectorAll('.pipeline-arrow');
|
||||
arrows.forEach(a => a.classList.remove('is-flowing'));
|
||||
// Aktiven Pfeil/U-Turn zum nächsten Block markieren (alles mit data-from)
|
||||
stage.querySelectorAll('.pipeline-arrow, .pipeline-uturn')
|
||||
.forEach(a => a.classList.remove('is-flowing'));
|
||||
if (status === 'done') {
|
||||
const arrow = stage.querySelector(`.pipeline-arrow[data-from="${stepKey}"]`);
|
||||
if (arrow) arrow.classList.add('is-flowing');
|
||||
const next = stage.querySelector(`[data-from="${stepKey}"]`);
|
||||
if (next) next.classList.add('is-flowing');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren