From fbac4c61bb64c290b98e531fdd34b4d65e95a2b6 Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Wed, 5 Feb 2025 19:27:32 -0500 Subject: [PATCH 1/7] diagram adjusts with legend width changes Co-authored-by: Pranav Mishra --- .../src/diagrams/user-journey/journeyRenderer.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 13eb31a024..0860c47533 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -13,10 +13,12 @@ export const setConf = function (cnf) { }; const actors = {}; +let maxWidth = 0; /** @param diagram - The diagram to draw to. */ function drawActorLegend(diagram) { const conf = getConfig().journey; + maxWidth = 0; // Draw the actors let yPos = 60; Object.keys(actors).forEach((person) => { @@ -39,14 +41,19 @@ function drawActorLegend(diagram) { text: person, textMargin: conf.boxTextMargin | 5, }; - svgDraw.drawText(diagram, labelData); + const textElement = svgDraw.drawText(diagram, labelData); + const bbox = textElement.node().getBBox(); + const textLength = bbox.width; + if (textLength > maxWidth) { + maxWidth = textLength; + } yPos += 20; }); } // TODO: Cleanup? const conf = getConfig().journey; -const LEFT_MARGIN = conf.leftMargin; +let LEFT_MARGIN = 0; export const draw = function (text, id, version, diagObj) { const conf = getConfig().journey; @@ -84,6 +91,7 @@ export const draw = function (text, id, version, diagObj) { }); drawActorLegend(diagram); + LEFT_MARGIN = conf.leftMargin + maxWidth - 80; bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50); drawTasks(diagram, tasks, 0); From 5366e8b69251493d107dda743bb330536a738929 Mon Sep 17 00:00:00 2001 From: pranavm2109 Date: Wed, 12 Feb 2025 15:19:37 -0500 Subject: [PATCH 2/7] added first draft of cypress visual tests Co-authored-by: Shahir Ahmed --- cypress/integration/rendering/journey.spec.js | 80 ++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index d8bef6d1b9..8e37c86694 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -47,7 +47,7 @@ section Checkout from website const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); - expect(maxWidthValue).to.eq(700); + //expect(maxWidthValue).to.eq(700); }); }); @@ -63,4 +63,82 @@ section Checkout from website { journey: { useMaxWidth: false } } ); }); + + it('should maintain consistent distance between widest legend label and diagram', () => { + renderGraph( + `journey + title Web hook life cycle + section Darkoob + Make preBuilt:5: Darkoob user + register slug : 5: Darkoob userf + Map slug to a Prebuilt Job:5: Darkoob user + section External Service + set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty + listen to the events : 5 : External Service + call darkoob endpoint : 5 : External Service + section Darkoob + check for inputs : 5 : DarkoobAPI + run the prebuilt job : 5 : DarkoobAPI + `, + { journey: { useMaxWidth: true } } + ); + + let rightEdgeXInitial, leftEdgeXInitial, rightEdgeXFinal, leftEdgeXFinal, initialDifference, finalDifference; + + cy.contains('tspan', 'admin Exjjjnjjjj qwerty') + .invoke('getBBox') + .then((bbox) => { + rightEdgeXInitial = bbox.x + bbox.width; + cy.log(`Right edge x-coordinate: ${rightEdgeXInitial}`); + }); + + cy.contains('div.label', 'Make preBuilt') + .invoke('getBoundingClientRect') + .then((rect) => { + leftEdgeXInitial = rect.left; + cy.log(`Left edge x-coordinate: ${leftEdgeXInitial}`); + initialDifference = leftEdgeXInitial - rightEdgeXInitial; + cy.log(`Initial Difference: ${initialDifference}`); + }); + + // renderGraph( + // `journey + // title Web hook life cycle + // section Darkoob + // Make preBuilt:5: Darkoob user + // register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained + // Map slug to a Prebuilt Job:5: Darkoob user + // section External Service + // set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty + // listen to the events : 5 : External Service + // call darkoob endpoint : 5 : External Service + // section Darkoob + // check for inputs : 5 : DarkoobAPI + // run the prebuilt job : 5 : DarkoobAPI + // `, + // { journey: { useMaxWidth: true } } + // ); + + // cy.contains('tspan', 'Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained') + // .invoke('getBBox') + // .then((bbox) => { + // rightEdgeXFinal = bbox.x + bbox.width; + // cy.log(`Right edge x-coordinate final: ${rightEdgeXFinal}`); + // }); + + // cy.contains('div.label', 'Make preBuilt') + // .invoke('getBoundingClientRect') + // .then((rect) => { + // leftEdgeXFinal = rect.left; + // cy.log(`Left edge x-coordinate final: ${leftEdgeXFinal}`); + // finalDifference = leftEdgeXFinal - rightEdgeXFinal; + // cy.log(`Final Difference: ${finalDifference}`); + // }); + + // expect(initialDifference).toEqual(finalDifference); + + + }); + + }); From db4ea020ba7e9e57493b00b2236189f7fb7e36d9 Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Wed, 12 Feb 2025 18:39:03 -0500 Subject: [PATCH 3/7] testing Co-authored-by: Pranav Mishra --- cypress/integration/rendering/journey.spec.js | 55 +++++++++---------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 8e37c86694..a89e613e13 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -83,50 +83,53 @@ section Checkout from website { journey: { useMaxWidth: true } } ); - let rightEdgeXInitial, leftEdgeXInitial, rightEdgeXFinal, leftEdgeXFinal, initialDifference, finalDifference; - - cy.contains('tspan', 'admin Exjjjnjjjj qwerty') - .invoke('getBBox') - .then((bbox) => { - rightEdgeXInitial = bbox.x + bbox.width; - cy.log(`Right edge x-coordinate: ${rightEdgeXInitial}`); - }); + let rightEdgeXInitial, + leftEdgeXInitial, + rightEdgeXFinal, + leftEdgeXFinal, + initialDifference, + finalDifference; + + cy.contains('tspan', 'admin Exjjjnjjjj qwerty').then((textBox) => { + const bbox = textBox[0].getBBox(); + const rightEdge = bbox.x + bbox.width; + console.warn(rightEdge); + }); - cy.contains('div.label', 'Make preBuilt') - .invoke('getBoundingClientRect') - .then((rect) => { - leftEdgeXInitial = rect.left; - cy.log(`Left edge x-coordinate: ${leftEdgeXInitial}`); - initialDifference = leftEdgeXInitial - rightEdgeXInitial; - cy.log(`Initial Difference: ${initialDifference}`); - }); + cy.get(':nth-child(14) > switch > foreignobject').then((rect) => { + console.warn(rect); + //const leftEdgeXInitial = rect.left; + // cy.log(`Left edge x-coordinate: ${leftEdgeXInitial}`); + // initialDifference = leftEdgeXInitial - rightEdgeXInitial; + // cy.log(`Initial Difference: ${initialDifference}`); + }); // renderGraph( // `journey // title Web hook life cycle - // section Darkoob - // Make preBuilt:5: Darkoob user + // section Darkoob + // Make preBuilt:5: Darkoob user // register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained // Map slug to a Prebuilt Job:5: Darkoob user // section External Service // set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty - // listen to the events : 5 : External Service - // call darkoob endpoint : 5 : External Service - // section Darkoob + // listen to the events : 5 : External Service + // call darkoob endpoint : 5 : External Service + // section Darkoob // check for inputs : 5 : DarkoobAPI - // run the prebuilt job : 5 : DarkoobAPI + // run the prebuilt job : 5 : DarkoobAPI // `, // { journey: { useMaxWidth: true } } // ); - // cy.contains('tspan', 'Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained') + // cy.contains('tspan', 'Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained') // .invoke('getBBox') // .then((bbox) => { // rightEdgeXFinal = bbox.x + bbox.width; // cy.log(`Right edge x-coordinate final: ${rightEdgeXFinal}`); // }); - // cy.contains('div.label', 'Make preBuilt') + // cy.contains('div.label', 'Make preBuilt') // .invoke('getBoundingClientRect') // .then((rect) => { // leftEdgeXFinal = rect.left; @@ -136,9 +139,5 @@ section Checkout from website // }); // expect(initialDifference).toEqual(finalDifference); - - }); - - }); From d618b8398ee857ab848c6c2f38924b902f2cc884 Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Wed, 12 Feb 2025 19:54:56 -0500 Subject: [PATCH 4/7] adds test for journey Co-authored-by: Pranav Mishra --- cypress/integration/rendering/journey.spec.js | 97 ++++++++++--------- 1 file changed, 50 insertions(+), 47 deletions(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index a89e613e13..0cbacc594f 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -64,7 +64,7 @@ section Checkout from website ); }); - it('should maintain consistent distance between widest legend label and diagram', () => { + it('should maintain sufficient space between legend labels and diagram elements', () => { renderGraph( `journey title Web hook life cycle @@ -83,61 +83,64 @@ section Checkout from website { journey: { useMaxWidth: true } } ); - let rightEdgeXInitial, - leftEdgeXInitial, - rightEdgeXFinal, - leftEdgeXFinal, - initialDifference, - finalDifference; + let LabelEndX, diagramStartX; + // Get right edge of the legend cy.contains('tspan', 'admin Exjjjnjjjj qwerty').then((textBox) => { const bbox = textBox[0].getBBox(); - const rightEdge = bbox.x + bbox.width; - console.warn(rightEdge); + LabelEndX = bbox.x + bbox.width; }); - cy.get(':nth-child(14) > switch > foreignobject').then((rect) => { - console.warn(rect); - //const leftEdgeXInitial = rect.left; - // cy.log(`Left edge x-coordinate: ${leftEdgeXInitial}`); - // initialDifference = leftEdgeXInitial - rightEdgeXInitial; - // cy.log(`Initial Difference: ${initialDifference}`); + // Get left edge of the diagram + cy.contains('foreignobject', 'Make preBuilt').then((rect) => { + diagramStartX = parseFloat(rect.attr('x')); }); - // renderGraph( - // `journey - // title Web hook life cycle - // section Darkoob - // Make preBuilt:5: Darkoob user - // register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained - // Map slug to a Prebuilt Job:5: Darkoob user - // section External Service - // set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty - // listen to the events : 5 : External Service - // call darkoob endpoint : 5 : External Service - // section Darkoob - // check for inputs : 5 : DarkoobAPI - // run the prebuilt job : 5 : DarkoobAPI - // `, - // { journey: { useMaxWidth: true } } - // ); + // Assert right edge of the diagram is greater than or equal to the right edge of the label + cy.then(() => { + expect(diagramStartX).to.be.gte(LabelEndX); + }); + }); - // cy.contains('tspan', 'Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained') - // .invoke('getBBox') - // .then((bbox) => { - // rightEdgeXFinal = bbox.x + bbox.width; - // cy.log(`Right edge x-coordinate final: ${rightEdgeXFinal}`); - // }); + it('should maintain sufficient space between legend and diagram when legend labels are longer', () => { + cy.then(() => { + renderGraph( + `journey + title Web hook life cycle + section Darkoob + Make preBuilt:5: Darkoob user + register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained + Map slug to a Prebuilt Job:5: Darkoob user + section External Service + set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty + listen to the events : 5 : External Service + call darkoob endpoint : 5 : External Service + section Darkoob + check for inputs : 5 : DarkoobAPI + run the prebuilt job : 5 : DarkoobAPI + `, + { journey: { useMaxWidth: true } } + ); + }); - // cy.contains('div.label', 'Make preBuilt') - // .invoke('getBoundingClientRect') - // .then((rect) => { - // leftEdgeXFinal = rect.left; - // cy.log(`Left edge x-coordinate final: ${leftEdgeXFinal}`); - // finalDifference = leftEdgeXFinal - rightEdgeXFinal; - // cy.log(`Final Difference: ${finalDifference}`); - // }); + let LabelEndX, diagramStartX; - // expect(initialDifference).toEqual(finalDifference); + // Get right edge of the legend + cy.contains('tspan', 'Darkoob userf deliberately increasing the size of this label').then( + (textBox) => { + const bbox = textBox[0].getBBox(); + LabelEndX = bbox.x + bbox.width; + } + ); + + // Get left edge of the diagram + cy.contains('foreignobject', 'Make preBuilt').then((rect) => { + diagramStartX = parseFloat(rect.attr('x')); + }); + + // Assert right edge of the diagram is greater than or equal to the right edge of the label + cy.then(() => { + expect(diagramStartX).to.be.gte(LabelEndX); + }); }); }); From 5f7c68def7eb8dc9c5e706d9d810c273dcb66584 Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Thu, 13 Feb 2025 01:46:27 -0500 Subject: [PATCH 5/7] refactor: standardize variable naming and improve legend width calculations Co-authored-by: pranavm2109 --- cypress/integration/rendering/journey.spec.js | 2 +- .../diagrams/user-journey/journeyRenderer.ts | 21 +++++++++---------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 0cbacc594f..a30b65b849 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -47,7 +47,7 @@ section Checkout from website const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); - //expect(maxWidthValue).to.eq(700); + expect(maxWidthValue).to.eq(700); }); }); diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 0860c47533..a9dee05466 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -43,8 +43,7 @@ function drawActorLegend(diagram) { }; const textElement = svgDraw.drawText(diagram, labelData); - const bbox = textElement.node().getBBox(); - const textLength = bbox.width; + const textLength = textElement.node().getBBox().width; if (textLength > maxWidth) { maxWidth = textLength; } @@ -53,7 +52,7 @@ function drawActorLegend(diagram) { } // TODO: Cleanup? const conf = getConfig().journey; -let LEFT_MARGIN = 0; +let leftMargin = 0; export const draw = function (text, id, version, diagObj) { const conf = getConfig().journey; @@ -91,8 +90,8 @@ export const draw = function (text, id, version, diagObj) { }); drawActorLegend(diagram); - LEFT_MARGIN = conf.leftMargin + maxWidth - 80; - bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50); + leftMargin = conf.leftMargin + maxWidth - 22.328125; + bounds.insert(0, 0, leftMargin, Object.keys(actors).length * 50); drawTasks(diagram, tasks, 0); const box = bounds.getBounds(); @@ -100,23 +99,23 @@ export const draw = function (text, id, version, diagObj) { diagram .append('text') .text(title) - .attr('x', LEFT_MARGIN) + .attr('x', leftMargin) .attr('font-size', '4ex') .attr('font-weight', 'bold') .attr('y', 25); } const height = box.stopy - box.starty + 2 * conf.diagramMarginY; - const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX; + const width = leftMargin + box.stopx + 2 * conf.diagramMarginX; configureSvgSize(diagram, height, width, conf.useMaxWidth); // Draw activity line diagram .append('line') - .attr('x1', LEFT_MARGIN) + .attr('x1', leftMargin) .attr('y1', conf.height * 4) // One section head + one task + margins - .attr('x2', width - LEFT_MARGIN - 4) // Subtract stroke width so arrow point is retained + .attr('x2', width - leftMargin - 4) // Subtract stroke width so arrow point is retained .attr('y2', conf.height * 4) .attr('stroke-width', 4) .attr('stroke', 'black') @@ -242,7 +241,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) { } const section = { - x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN, + x: i * conf.taskMargin + i * conf.width + leftMargin, y: 50, text: task.section, fill, @@ -266,7 +265,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) { }, {}); // Add some rendering data to the object - task.x = i * conf.taskMargin + i * conf.width + LEFT_MARGIN; + task.x = i * conf.taskMargin + i * conf.width + leftMargin; task.y = taskPos; task.width = conf.diagramMarginX; task.height = conf.diagramMarginY; From a318ea3692f19dba3aa5b20aa2fed2d57bbc75b2 Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Fri, 21 Feb 2025 16:15:24 -0500 Subject: [PATCH 6/7] removes cy.then and magic value Co-authored-by: Pranav Mishra --- cypress/integration/rendering/journey.spec.js | 10 ++++------ .../src/diagrams/user-journey/journeyRenderer.ts | 4 ++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index a30b65b849..a7e280ab24 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -103,9 +103,8 @@ section Checkout from website }); it('should maintain sufficient space between legend and diagram when legend labels are longer', () => { - cy.then(() => { - renderGraph( - `journey + renderGraph( + `journey title Web hook life cycle section Darkoob Make preBuilt:5: Darkoob user @@ -119,9 +118,8 @@ section Checkout from website check for inputs : 5 : DarkoobAPI run the prebuilt job : 5 : DarkoobAPI `, - { journey: { useMaxWidth: true } } - ); - }); + { journey: { useMaxWidth: true } } + ); let LabelEndX, diagramStartX; diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index a9dee05466..06c6cdeeac 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -44,7 +44,7 @@ function drawActorLegend(diagram) { const textElement = svgDraw.drawText(diagram, labelData); const textLength = textElement.node().getBBox().width; - if (textLength > maxWidth) { + if (textLength > maxWidth && textLength > conf?.leftMargin) { maxWidth = textLength; } yPos += 20; @@ -90,7 +90,7 @@ export const draw = function (text, id, version, diagObj) { }); drawActorLegend(diagram); - leftMargin = conf.leftMargin + maxWidth - 22.328125; + leftMargin = conf.leftMargin + maxWidth; bounds.insert(0, 0, leftMargin, Object.keys(actors).length * 50); drawTasks(diagram, tasks, 0); From 50816a7f98a86a4d6ebf03abd35809a09a624b9d Mon Sep 17 00:00:00 2001 From: Shahir Ahmed Date: Fri, 21 Feb 2025 17:35:32 -0500 Subject: [PATCH 7/7] remove magic value Co-authored-by: Pranav Mishra --- packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 06c6cdeeac..2e27cc8b5a 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts @@ -44,7 +44,7 @@ function drawActorLegend(diagram) { const textElement = svgDraw.drawText(diagram, labelData); const textLength = textElement.node().getBBox().width; - if (textLength > maxWidth && textLength > conf?.leftMargin) { + if (textLength > maxWidth && textLength > conf?.leftMargin - textLength) { maxWidth = textLength; } yPos += 20;