From ece20c8c9b6e153f39102eefc5130ec27231c3b2 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Fri, 15 Oct 2021 09:32:17 +0200 Subject: [PATCH 01/10] [#671] implemented hovering effects + @media screen: hide map title --- .../app/src/Components/Landscape/Map/Map.css | 46 ++++++++++++++++--- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/src/main/app/src/Components/Landscape/Map/Map.css b/src/main/app/src/Components/Landscape/Map/Map.css index d87e1f3e6..c12607b16 100644 --- a/src/main/app/src/Components/Landscape/Map/Map.css +++ b/src/main/app/src/Components/Landscape/Map/Map.css @@ -1,12 +1,19 @@ - .landscapeMapContainer .map .title { fill: rgba(255, 255, 255, 0.75); } + +@media screen { + .title { + display: none; + } +} + .landscapeMapContainer .map .details { border: 1px solid #3f51b5; border-radius: 10px; background-color: white; } + .landscapeMapContainer .map .item { cursor: pointer; } @@ -20,21 +27,26 @@ fill: rgba(255, 255, 255, 0.75); cursor: pointer; } + .landscapeMapContainer .map g .label rect { fill-opacity: 1; stroke-width: 0.1em; } + .landscapeMapContainer .map g .item_shortName { fill: #000; } + .landscapeMapContainer .map path { stroke-opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; } + .landscapeMapContainer .ReactSVGPanZoom svg g rect { fill: transparent; } + @-o-keyframes highlightLabel { 0% { stroke-width: 5px; @@ -47,6 +59,7 @@ stroke-width: 5px; } } + @-webkit-keyframes highlightLabel { 0% { stroke-width: 5px; @@ -59,6 +72,7 @@ stroke-width: 5px; } } + @keyframes highlightLabel { 0% { stroke-width: 5px; @@ -71,13 +85,14 @@ stroke-width: 5px; } } + @-o-keyframes highlightRelation { 0% { stroke-width: 5px; stroke: #000; } 50% { - stroke-width: 40px; + stroke-width: 13; stroke: white; } to { @@ -85,13 +100,14 @@ stroke-width: 5px; } } + @-webkit-keyframes highlightRelation { 0% { stroke-width: 5px; stroke: #000; } 50% { - stroke-width: 40px; + stroke-width: 13; stroke: white; } to { @@ -99,13 +115,14 @@ stroke-width: 5px; } } + @keyframes highlightRelation { 0% { stroke-width: 5px; stroke: #000; } 50% { - stroke-width: 40px; + stroke-width: 13; stroke: white; } to { @@ -113,6 +130,7 @@ stroke-width: 5px; } } + .landscapeMapContainer .highlightLabel { /* box-shadow: 0 0 0 2px #FF4081; */ @@ -123,22 +141,36 @@ -o-animation-iteration-count: 2; animation-iteration-count: 2; } + .landscapeMapContainer .highlightRelation { /* box-shadow: 0 0 0 2px #FF4081; */ -webkit-animation: highlightRelation 1s linear; -o-animation: highlightRelation 1s linear; animation: highlightRelation 1s linear; - -webkit-animation-iteration-count: 2; - -o-animation-iteration-count: 2; - animation-iteration-count: 2; + -webkit-animation-iteration-count: 1.5; + -o-animation-iteration-count: 1.5; + animation-iteration-count: 1.5; } + .landscapeMapContainer .with-transition { z-index: 2; } + .landscapeMapContainer .with-transition svg > g { transition: transform 1s ease-out; } + .landscapeMapContainer .showHighlight { z-index: 2; } + +.landscapeMapContainer .map g.groupArea.unselected:hover polygon { + fill-opacity: 0.2 +} + +.map g.relation.unselected path:hover { + stroke: #C0C0C0; + stroke-width: 13; + stroke-opacity: 1; +} \ No newline at end of file From 99daa3ecd45c1812b32bb815602d3d7e2da292d0 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Fri, 15 Oct 2021 10:51:57 +0200 Subject: [PATCH 02/10] [#671] @media screen: hide map logo --- src/main/app/src/Components/Landscape/Map/Map.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/main/app/src/Components/Landscape/Map/Map.css b/src/main/app/src/Components/Landscape/Map/Map.css index c12607b16..e4d9eaf5b 100644 --- a/src/main/app/src/Components/Landscape/Map/Map.css +++ b/src/main/app/src/Components/Landscape/Map/Map.css @@ -6,6 +6,9 @@ .title { display: none; } + .logo { + display: none; + } } .landscapeMapContainer .map .details { From 29ae64caec54c3b4fd08b5f966cc047cb518cda6 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Fri, 15 Oct 2021 13:11:07 +0200 Subject: [PATCH 03/10] [#671] add attribute class "logo" --- .../app/src/Components/Landscape/Map/Map.css | 16 ++++++++-------- .../nivio/output/map/svg/SVGDocument.java | 3 ++- .../nivio/output/map/svg/SVGDocumentTest.java | 5 +++++ 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/main/app/src/Components/Landscape/Map/Map.css b/src/main/app/src/Components/Landscape/Map/Map.css index e4d9eaf5b..941cd9607 100644 --- a/src/main/app/src/Components/Landscape/Map/Map.css +++ b/src/main/app/src/Components/Landscape/Map/Map.css @@ -2,14 +2,14 @@ fill: rgba(255, 255, 255, 0.75); } -@media screen { - .title { - display: none; - } - .logo { - display: none; - } -} +/*@media screen {*/ +/* .title {*/ +/* display: none;*/ +/* }*/ +/* !*.logo {*!*/ +/* !* display: none;*!*/ +/* !*}*!*/ +/*}*/ .landscapeMapContainer .map .details { border: 1px solid #3f51b5; diff --git a/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java b/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java index 24b6d7c22..c08fb97b6 100644 --- a/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java +++ b/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java @@ -148,7 +148,8 @@ private DomContent getLogo(SVGDimension dimension) { .attr("x", dimension.cartesian.horMin - dimension.cartesian.padding) .attr("y", dimension.cartesian.vertMin - dimension.cartesian.padding + 80) .attr("width", LABEL_WIDTH) - .attr("height", LABEL_WIDTH); + .attr("height", LABEL_WIDTH) + .attr("class", "logo"); } return logo; } diff --git a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java index 8e8e28d03..072a15524 100644 --- a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java +++ b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java @@ -28,12 +28,14 @@ void renderInout() throws IOException { String path = "/src/test/resources/example/inout"; Landscape landscape = getLandscape(path + ".yml"); String svg = renderLandscape(path, landscape); + System.out.println(svg); assertTrue(svg.contains("svg version=\"1.1\"")); assertTrue(svg.contains("class=\"title\">Input and Output")); assertThat(svg).contains("Docker Compose files")); } + @Test void renderCustomFill() throws IOException { @@ -71,4 +73,7 @@ void embedsExternalImages() throws IOException, URISyntaxException { .contains("fill=\"url(#Wm05dg==)\""); //pattern for "foo" response } + + + } \ No newline at end of file From 0ada273f31994e8f632667f8eec9b55d5de38c99 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Fri, 15 Oct 2021 13:11:52 +0200 Subject: [PATCH 04/10] [#671] add attribute class "logo" --- .../java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java | 1 - 1 file changed, 1 deletion(-) diff --git a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java index 072a15524..cf790d45f 100644 --- a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java +++ b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java @@ -28,7 +28,6 @@ void renderInout() throws IOException { String path = "/src/test/resources/example/inout"; Landscape landscape = getLandscape(path + ".yml"); String svg = renderLandscape(path, landscape); - System.out.println(svg); assertTrue(svg.contains("svg version=\"1.1\"")); assertTrue(svg.contains("class=\"title\">Input and Output")); assertThat(svg).contains(" Date: Fri, 15 Oct 2021 13:12:25 +0200 Subject: [PATCH 05/10] [#671] add attribute class "logo" --- .../java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java index cf790d45f..faebadbbb 100644 --- a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java +++ b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java @@ -34,7 +34,6 @@ void renderInout() throws IOException { assertTrue(svg.contains(">Docker Compose files")); } - @Test void renderCustomFill() throws IOException { @@ -74,5 +73,4 @@ void embedsExternalImages() throws IOException, URISyntaxException { } - } \ No newline at end of file From 20bc096501a4feda48bfd339793641c3096944c8 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Fri, 15 Oct 2021 13:14:40 +0200 Subject: [PATCH 06/10] [#671] undo comment out --- .../app/src/Components/Landscape/Map/Map.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/main/app/src/Components/Landscape/Map/Map.css b/src/main/app/src/Components/Landscape/Map/Map.css index 941cd9607..e4d9eaf5b 100644 --- a/src/main/app/src/Components/Landscape/Map/Map.css +++ b/src/main/app/src/Components/Landscape/Map/Map.css @@ -2,14 +2,14 @@ fill: rgba(255, 255, 255, 0.75); } -/*@media screen {*/ -/* .title {*/ -/* display: none;*/ -/* }*/ -/* !*.logo {*!*/ -/* !* display: none;*!*/ -/* !*}*!*/ -/*}*/ +@media screen { + .title { + display: none; + } + .logo { + display: none; + } +} .landscapeMapContainer .map .details { border: 1px solid #3f51b5; From 12d4acaad09702ae33c579363e0e599c6d551cf0 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Mon, 18 Oct 2021 13:29:09 +0200 Subject: [PATCH 07/10] [#671] test for attribute class="logo" --- .../nivio/output/map/svg/SVGDocumentTest.java | 16 +++++++++++++--- src/test/resources/example/inout.yml | 3 ++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java index faebadbbb..03742c7e9 100644 --- a/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java +++ b/src/test/java/de/bonndan/nivio/output/map/svg/SVGDocumentTest.java @@ -1,15 +1,25 @@ package de.bonndan.nivio.output.map.svg; +import de.bonndan.nivio.assessment.Assessment; import de.bonndan.nivio.input.http.CachedResponse; import de.bonndan.nivio.model.Landscape; import de.bonndan.nivio.output.RenderingTest; +import de.bonndan.nivio.output.layout.LayoutedComponent; +import j2html.tags.DomContent; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; +import org.mockito.stubbing.OngoingStubbing; +import org.springframework.lang.NonNull; +import org.springframework.lang.Nullable; +import org.springframework.util.StringUtils; import java.io.IOException; import java.net.URISyntaxException; import java.net.URL; +import java.util.ArrayList; +import java.util.List; +import static org.assertj.core.api.Assertions.as; import static org.assertj.core.api.Assertions.assertThat; import static org.junit.jupiter.api.Assertions.assertTrue; import static org.mockito.ArgumentMatchers.any; @@ -18,10 +28,10 @@ class SVGDocumentTest extends RenderingTest { - @BeforeEach + @BeforeEach public void setup() throws URISyntaxException { super.setup(); - } + } @Test void renderInout() throws IOException { @@ -30,6 +40,7 @@ void renderInout() throws IOException { String svg = renderLandscape(path, landscape); assertTrue(svg.contains("svg version=\"1.1\"")); assertTrue(svg.contains("class=\"title\">Input and Output")); + assertTrue(svg.contains("class=\"logo\"")); assertThat(svg).contains("Docker Compose files")); } @@ -72,5 +83,4 @@ void embedsExternalImages() throws IOException, URISyntaxException { } - } \ No newline at end of file diff --git a/src/test/resources/example/inout.yml b/src/test/resources/example/inout.yml index 31e3aac7e..a8f830698 100644 --- a/src/test/resources/example/inout.yml +++ b/src/test/resources/example/inout.yml @@ -1,7 +1,8 @@ identifier: inout name: Input and Output description: Misuses the landscape graph to show the input and output possibilities of nivio. -icon: https://dedica.team/images/logo_orange_weiss.png +labels: + icon: https://dedica.team/images/logo_orange_weiss.png config: branding: From ee4b2a854b2103e71f323091653ce36d4c1ccf36 Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Mon, 18 Oct 2021 15:24:10 +0200 Subject: [PATCH 08/10] [#671] remove duplicated string literals (literals having less than 5 characters are excluded - code smell rule) --- .../nivio/output/map/svg/SVGDocument.java | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java b/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java index c08fb97b6..a8c5eee6c 100644 --- a/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java +++ b/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java @@ -41,6 +41,11 @@ public class SVGDocument extends Component { private boolean debug = false; private HexMap hexMap; + private final String class_ = "class"; + private final String width = "width"; + private final String height = "height"; + + public SVGDocument(@NonNull final LayoutedComponent layouted, @Nullable final Assessment assessment, @Nullable final String cssStyles) { this.layouted = Objects.requireNonNull(layouted); this.landscape = (Landscape) layouted.getComponent(); @@ -123,10 +128,10 @@ public DomContent render() { .attr("version", "1.1") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("xmlns:xlink", "http://www.w3.org/1999/xlink") - .attr("width", dimension.cartesian.horMax) - .attr("height", dimension.cartesian.vertMax) + .attr(width, dimension.cartesian.horMax) + .attr(height, dimension.cartesian.vertMax) .attr("viewBox", dimension.cartesian.asViewBox()) - .attr("class", "map") + .attr(class_, "map") .with(background) .with(logo, title) @@ -147,9 +152,9 @@ private DomContent getLogo(SVGDimension dimension) { .attr("xlink:href", logoUrl) .attr("x", dimension.cartesian.horMin - dimension.cartesian.padding) .attr("y", dimension.cartesian.vertMin - dimension.cartesian.padding + 80) - .attr("width", LABEL_WIDTH) - .attr("height", LABEL_WIDTH) - .attr("class", "logo"); + .attr(width, LABEL_WIDTH) + .attr(height, LABEL_WIDTH) + .attr(class_, "logo"); } return logo; } @@ -158,7 +163,7 @@ private ContainerTag getTitle(SVGDimension dimension) { return SvgTagCreator.text(landscape.getName()) .attr("x", dimension.cartesian.horMin - dimension.cartesian.padding) .attr("y", dimension.cartesian.vertMin - dimension.cartesian.padding + 60) - .attr("class", "title"); + .attr(class_, "title"); } /** @@ -195,5 +200,4 @@ private SVGRelation getSvgRelation(LayoutedComponent layoutedItem, Item source, public String getXML() { return render().render(); } -} - +} \ No newline at end of file From 9c63268112b06cd61c493e1308813f2717d4416f Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Mon, 18 Oct 2021 16:03:41 +0200 Subject: [PATCH 09/10] [#671] removed some code smells --- .../bonndan/nivio/model/LandscapeFactory.java | 2 +- .../nivio/output/map/svg/SVGDocument.java | 40 +++++++++---------- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/main/java/de/bonndan/nivio/model/LandscapeFactory.java b/src/main/java/de/bonndan/nivio/model/LandscapeFactory.java index e260f158f..e39d3932b 100644 --- a/src/main/java/de/bonndan/nivio/model/LandscapeFactory.java +++ b/src/main/java/de/bonndan/nivio/model/LandscapeFactory.java @@ -83,7 +83,7 @@ public static Landscape recreate(Landscape existing, LandscapeDescription input) //overwrite some data which is not handled by resolvers builder.withContact(input.getContact()); - if (!StringUtils.isEmpty(input.getName())) { + if (StringUtils.hasLength(input.getName())) { builder.withName(input.getName()); } builder.withConfig(input.getConfig()); diff --git a/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java b/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java index a8c5eee6c..5d2eb272e 100644 --- a/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java +++ b/src/main/java/de/bonndan/nivio/output/map/svg/SVGDocument.java @@ -41,9 +41,9 @@ public class SVGDocument extends Component { private boolean debug = false; private HexMap hexMap; - private final String class_ = "class"; - private final String width = "width"; - private final String height = "height"; + private static final String CLASS = "class"; + private static final String WIDTH = "width"; + private static final String HEIGHT = "height"; public SVGDocument(@NonNull final LayoutedComponent layouted, @Nullable final Assessment assessment, @Nullable final String cssStyles) { @@ -128,10 +128,10 @@ public DomContent render() { .attr("version", "1.1") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("xmlns:xlink", "http://www.w3.org/1999/xlink") - .attr(width, dimension.cartesian.horMax) - .attr(height, dimension.cartesian.vertMax) + .attr(WIDTH, dimension.cartesian.horMax) + .attr(HEIGHT, dimension.cartesian.vertMax) .attr("viewBox", dimension.cartesian.asViewBox()) - .attr(class_, "map") + .attr(CLASS, "map") .with(background) .with(logo, title) @@ -152,9 +152,9 @@ private DomContent getLogo(SVGDimension dimension) { .attr("xlink:href", logoUrl) .attr("x", dimension.cartesian.horMin - dimension.cartesian.padding) .attr("y", dimension.cartesian.vertMin - dimension.cartesian.padding + 80) - .attr(width, LABEL_WIDTH) - .attr(height, LABEL_WIDTH) - .attr(class_, "logo"); + .attr(WIDTH, LABEL_WIDTH) + .attr(HEIGHT, LABEL_WIDTH) + .attr(CLASS, "logo"); } return logo; } @@ -163,7 +163,7 @@ private ContainerTag getTitle(SVGDimension dimension) { return SvgTagCreator.text(landscape.getName()) .attr("x", dimension.cartesian.horMin - dimension.cartesian.padding) .attr("y", dimension.cartesian.vertMin - dimension.cartesian.padding + 60) - .attr(class_, "title"); + .attr(CLASS, "title"); } /** @@ -171,17 +171,15 @@ private ContainerTag getTitle(SVGDimension dimension) { */ private List getRelations(LayoutedComponent layouted) { List relations = new ArrayList<>(); - layouted.getChildren().forEach(layoutedGroup -> { - layoutedGroup.getChildren().forEach(layoutedItem -> { - Item item = (Item) layoutedItem.getComponent(); - LOGGER.debug("Adding {} relations for {}", item.getRelations().size(), item.getFullyQualifiedIdentifier()); - item.getRelations().stream() - .filter(rel -> rel.getSource().equals(item)) //do not paint twice / incoming (inverse) relations - .map(rel -> getSvgRelation(layoutedItem, item, rel)) - .filter(Objects::nonNull) - .forEach(relations::add); - }); - }); + layouted.getChildren().forEach(layoutedGroup -> layoutedGroup.getChildren().forEach(layoutedItem -> { + Item item = (Item) layoutedItem.getComponent(); + LOGGER.debug("Adding {} relations for {}", item.getRelations().size(), item.getFullyQualifiedIdentifier()); + item.getRelations().stream() + .filter(rel -> rel.getSource().equals(item)) //do not paint twice / incoming (inverse) relations + .map(rel -> getSvgRelation(layoutedItem, item, rel)) + .filter(Objects::nonNull) + .forEach(relations::add); + })); return relations; } From 47a332760f46bba34e89a166948453c87651ae7b Mon Sep 17 00:00:00 2001 From: Jennifer Arps Date: Tue, 19 Oct 2021 12:14:49 +0200 Subject: [PATCH 10/10] [#671] highlight item when hovering it --- src/main/app/src/Components/Landscape/Map/Map.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/main/app/src/Components/Landscape/Map/Map.css b/src/main/app/src/Components/Landscape/Map/Map.css index e4d9eaf5b..b0d695740 100644 --- a/src/main/app/src/Components/Landscape/Map/Map.css +++ b/src/main/app/src/Components/Landscape/Map/Map.css @@ -17,10 +17,14 @@ background-color: white; } -.landscapeMapContainer .map .item { +.landscapeMapContainer .map .item:hover { cursor: pointer; } +.map g.item.unselected:hover circle { + stroke: #C0C0C0; +} + .landscapeMapContainer .map g .group { fill-opacity: 0.4; stroke: #3f51b5;