feat: add diagram index

Only show the index if there is more than one diagram/image. Co-authored-by: Kamil Gałuszka <kamil@flyr.com>
avisi-cloud · Nov 26, 2024 · 421b465 · 421b465
1 parent cdbb84c
commit 421b465
Show file tree

Hide file tree

Showing 27 changed files with 166 additions and 16 deletions.
diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/DiagramIndexViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/DiagramIndexViewModel.kt
@@ -0,0 +1,7 @@
+package nl.avisi.structurizr.site.generatr.site.model
+
+data class DiagramIndexViewModel(
+    val diagrams: List<DiagramViewModel> = emptyList(),
+    val images: List<ImageViewViewModel> = emptyList()) {
+    val visible: Boolean = (diagrams.count() + images.count()) > 1
+}
diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/DiagramViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/DiagramViewModel.kt
@@ -5,6 +5,7 @@ import com.structurizr.view.View
 data class DiagramViewModel(
     val key: String,
     val name: String,
+    val title: String?,
     val description: String?,
     val svg: String?,
     val diagramWidthInPixels: Int?,
@@ -14,19 +15,21 @@ data class DiagramViewModel(
 ) {
     companion object {
         fun forView(pageViewModel: PageViewModel, view: View, svgFactory: (key: String, url: String) -> String?) =
-            forView(pageViewModel, view.key, view.name, view.description.ifBlank { null }, svgFactory)
+            forView(pageViewModel, view.key, view.name, view.title, view.description.ifBlank { null }, svgFactory)
 
         fun forView(
             pageViewModel: PageViewModel,
             key: String,
             name: String,
+            title: String?,
             description: String?,
             svgFactory: (key: String, url: String) -> String?
         ): DiagramViewModel {
             val svg = svgFactory(key, pageViewModel.url)
             return DiagramViewModel(
                 key,
                 name,
+                title,
                 description,
                 svg,
                 extractDiagramWidthInPixels(svg),

diff --git a/...structurizr/site/generatr/site/model/SoftwareSystemContainerComponentCodePageViewModel.kt b/...structurizr/site/generatr/site/model/SoftwareSystemContainerComponentCodePageViewModel.kt
@@ -16,6 +16,7 @@ class SoftwareSystemContainerComponentCodePageViewModel(generatorContext: Genera
     val visible = images.isNotEmpty()
     val containerTabs = createContainersCodeTabViewModel(generatorContext, container.softwareSystem)
     val componentTabs = createComponentsTabViewModel(generatorContext, container)
+    val diagramIndex = DiagramIndexViewModel(images = images)
 
     companion object {
         fun url(container: Container, component: Component?) = "${url(container.softwareSystem, Tab.CODE)}/${container.name.normalize()}/${component?.name?.normalize()}"

diff --git a/...si/structurizr/site/generatr/site/model/SoftwareSystemContainerComponentsPageViewModel.kt b/...si/structurizr/site/generatr/site/model/SoftwareSystemContainerComponentsPageViewModel.kt
@@ -21,6 +21,8 @@ class SoftwareSystemContainerComponentsPageViewModel(generatorContext: Generator
     val propertiesTable = createPropertiesTableViewModel(container.includedProperties)
     val visible = diagrams.isNotEmpty() or images.isNotEmpty() or hasProperties
     val containerTabs = createContainersComponentTabViewModel(generatorContext, container.softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams, images)
+
     companion object {
         fun url(container: Container) = "${url(container.softwareSystem, Tab.COMPONENT)}/${container.name.normalize()}"
     }

diff --git a/...lin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerPageViewModel.kt b/...lin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerPageViewModel.kt
@@ -15,4 +15,5 @@ class SoftwareSystemContainerPageViewModel(generatorContext: GeneratorContext, s
         .sortedBy { it.key }
         .map { ImageViewViewModel(it) }
     val visible = generatorContext.workspace.views.hasContainerViews(generatorContext.workspace, softwareSystem) || images.isNotEmpty()
+    val diagramIndex = DiagramIndexViewModel(diagrams, images)
 }
diff --git a/...otlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContextPageViewModel.kt b/...otlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContextPageViewModel.kt
@@ -11,4 +11,5 @@ class SoftwareSystemContextPageViewModel(generatorContext: GeneratorContext, sof
         .sortedBy { it.key }
         .map { DiagramViewModel.forView(this, it, generatorContext.svgFactory) }
     val visible = generatorContext.workspace.views.hasSystemContextViews(softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams)
 }
diff --git a/...in/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDeploymentPageViewModel.kt b/...in/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDeploymentPageViewModel.kt
@@ -11,4 +11,5 @@ class SoftwareSystemDeploymentPageViewModel(generatorContext: GeneratorContext,
         .sortedBy { it.key }
         .map { DiagramViewModel.forView(this, it, generatorContext.svgFactory) }
     val visible = generatorContext.workspace.views.hasDeploymentViews(softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams)
 }
diff --git a/...otlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDynamicPageViewModel.kt b/...otlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDynamicPageViewModel.kt
@@ -11,4 +11,5 @@ class SoftwareSystemDynamicPageViewModel(generatorContext: GeneratorContext, sof
         .sortedBy { it.key }
         .map { DiagramViewModel.forView(this, it, generatorContext.svgFactory) }
     val visible = generatorContext.workspace.views.hasDynamicViews(softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams)
 }
diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/ToHtml.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/ToHtml.kt
@@ -168,7 +168,7 @@ fun Element.transformEmbeddedDiagramElements(
         val key = it.attr("src").substring(embedPrefix.length)
         val name = it.attr("alt").ifBlank { key }
         val html = createHTML().div {
-            diagram(DiagramViewModel.forView(pageViewModel, key, name, null, svgFactory))
+            diagram(DiagramViewModel.forView(pageViewModel, key, name, null, null, svgFactory))
         }
 
         it.parent()?.append(html)

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Diagram.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Diagram.kt
@@ -10,7 +10,7 @@ fun FlowContent.diagram(viewModel: DiagramViewModel) {
 
         figure {
             style = "width: min(100%, ${viewModel.diagramWidthInPixels}px);"
-
+            attributes["id"] = viewModel.key
             rawHtml(viewModel.svg)
             figcaption {
                 a {

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/DiagramIndex.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/DiagramIndex.kt
@@ -0,0 +1,28 @@
+package nl.avisi.structurizr.site.generatr.site.views
+
+import kotlinx.html.*
+import nl.avisi.structurizr.site.generatr.site.model.DiagramIndexViewModel
+
+fun FlowContent.diagramIndex(viewModel: DiagramIndexViewModel) {
+    if(viewModel.visible) {
+        p(classes = "subtitle is-6") {
+            +"Index:"
+        }
+        ul {
+            viewModel.diagrams.forEach {
+                li {
+                    a(href = "#${it.key}") {
+                        +(it.title ?: it.name)
+                    }
+                }
+            }
+            viewModel.images.forEach {
+                li {
+                    a(href = "#${it.key}") {
+                        +it.title
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Image.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Image.kt
@@ -8,7 +8,8 @@ fun FlowContent.image(viewModel: ImageViewViewModel) {
 
     figure {
         style = "width: fit-content;"
-
+        attributes["id"] = viewModel.key
+
         p(classes = "has-text-weight-bold") { +viewModel.title }
         img { src = viewModel.content }
         figcaption {

diff --git a/...nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContainerComponentCodePage.kt b/...nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContainerComponentCodePage.kt
@@ -29,6 +29,7 @@ fun HTML.softwareSystemContainerComponentCodePage(viewModel: SoftwareSystemConta
                         }
                 }
             }
+            diagramIndex(viewModel.diagramIndex)
             viewModel.images.forEach { image(it) }
         }
     } else

diff --git a/...in/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContainerComponentsPage.kt b/...in/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContainerComponentsPage.kt
@@ -16,6 +16,7 @@ fun HTML.softwareSystemContainerComponentsPage(viewModel: SoftwareSystemContaine
                         }
                 }
             }
+            diagramIndex(viewModel.diagramIndex)
             viewModel.diagrams.forEach { diagram(it) }
             viewModel.images.forEach { image(it) }
 

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContainerPage.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContainerPage.kt
@@ -6,6 +6,7 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemContainerPage
 fun HTML.softwareSystemContainerPage(viewModel: SoftwareSystemContainerPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
+            diagramIndex(viewModel.diagramIndex)
             viewModel.diagrams.forEach { diagram(it) }
             viewModel.images.forEach { image(it) }
         }

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContextPage.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemContextPage.kt
@@ -6,9 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemContextPageVi
 fun HTML.softwareSystemContextPage(viewModel: SoftwareSystemContextPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
-            viewModel.diagrams.forEach {
-                diagram(it)
-            }
+            diagramIndex(viewModel.diagramIndex)
+            viewModel.diagrams.forEach { diagram(it) }
         }
     else
         redirectUpPage()

diff --git a/...main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemDeploymentPage.kt b/...main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemDeploymentPage.kt
@@ -6,9 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemDeploymentPag
 fun HTML.softwareSystemDeploymentPage(viewModel: SoftwareSystemDeploymentPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
-            viewModel.diagrams.forEach {
-                diagram(it)
-            }
+            diagramIndex(viewModel.diagramIndex)
+            viewModel.diagrams.forEach { diagram(it) }
         }
     else
         redirectUpPage()

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemDynamicPage.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SoftwareSystemDynamicPage.kt
@@ -6,9 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemDynamicPageVi
 fun HTML.softwareSystemDynamicPage(viewModel: SoftwareSystemDynamicPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
-            viewModel.diagrams.forEach {
-                diagram(it)
-            }
+            diagramIndex(viewModel.diagramIndex)
+            viewModel.diagrams.forEach { diagram(it) }
         }
     else
         redirectUpPage()

diff --git a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/AsciidocToHtmlTest.kt b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/AsciidocToHtmlTest.kt
@@ -206,7 +206,7 @@ class AsciidocToHtmlTest : ViewModelTest() {
             <div class="imageblock content">
              <div class="content">
               <div>
-               <figure style="width: min(100%, 800px);">
+               <figure style="width: min(100%, 800px);" id="SystemLandscape">
                 <div>
                  <svg viewBox="0 0 800 900"></svg>
                 </div>

diff --git a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/MarkdownToHtmlTest.kt b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/MarkdownToHtmlTest.kt
@@ -288,7 +288,7 @@ class MarkdownToHtmlTest : ViewModelTest() {
             """
                 <p>
                  <div>
-                  <figure style="width: min(100%, 800px);">
+                  <figure style="width: min(100%, 800px);" id="SystemLandscape">
                    <div>
                     <svg viewBox="0 0 800 900"></svg>
                    </div>

diff --git a/...cturizr/site/generatr/site/model/SoftwareSystemContainerComponentCodePageViewModelTest.kt b/...cturizr/site/generatr/site/model/SoftwareSystemContainerComponentCodePageViewModelTest.kt
@@ -107,4 +107,18 @@ class SoftwareSystemContainerComponentCodePageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `no index`() {
+        val viewModel = SoftwareSystemContainerComponentCodePageViewModel(generatorContext, backendContainer, backendComponent)
+        assertThat(viewModel.diagramIndex.visible).isFalse()
+    }
+
+    @Test
+    fun `index visible`() {
+        createImageView(generatorContext.workspace, backendComponent, "other-imageview")
+        val viewModel = SoftwareSystemContainerComponentCodePageViewModel(generatorContext, backendContainer, backendComponent)
+
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }
diff --git a/...tructurizr/site/generatr/site/model/SoftwareSystemContainerComponentsPageViewModelTest.kt b/...tructurizr/site/generatr/site/model/SoftwareSystemContainerComponentsPageViewModelTest.kt
@@ -72,6 +72,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-1-backend",
                 "Software system - Backend - Components",
+                null,
                 "Component view 1 - Backend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -82,6 +83,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-2-backend",
                 "Software system - Backend - Components",
+                null,
                 "Component view 2 - Backend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -97,6 +99,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-1-frontend",
                 "Software system - Frontend - Components",
+                null,
                 "Component view 1 - Frontend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -107,6 +110,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-2-frontend",
                 "Software system - Frontend - Components",
+                null,
                 "Component view 2 - Frontend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -144,4 +148,16 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
         val viewModel = SoftwareSystemContainerComponentsPageViewModel(generatorContext, softwareSystem.addContainer("Container"))
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `no index`() {
+        val viewModel = SoftwareSystemContainerComponentsPageViewModel(generatorContext, apiContainer)
+        assertThat(viewModel.diagramIndex.visible).isFalse()
+    }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemContainerComponentsPageViewModel(generatorContext, backendContainer)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }
diff --git a/...nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerPageViewModelTest.kt b/...nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerPageViewModelTest.kt
@@ -35,6 +35,7 @@ class SoftwareSystemContainerPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "container-1",
                 "Software system - Containers",
+                null,
                 "Container view 1",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -45,6 +46,7 @@ class SoftwareSystemContainerPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "container-2",
                 "Software system - Containers",
+                null,
                 "Container view 2",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -73,4 +75,21 @@ class SoftwareSystemContainerPageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `no index`() {
+        val viewModel = SoftwareSystemContainerPageViewModel(
+            generatorContext,
+            generatorContext.workspace.model.addSoftwareSystem("Software system 2").also {
+                generatorContext.workspace.views.createContainerView(it, "container-3", "Container view 3")
+            }
+        )
+        assertThat(viewModel.diagramIndex.visible).isFalse()
+    }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemContainerPageViewModel(generatorContext, softwareSystem)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }
diff --git a/...n/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContextPageViewModelTest.kt b/...n/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContextPageViewModelTest.kt
@@ -3,6 +3,7 @@ package nl.avisi.structurizr.site.generatr.site.model
 import assertk.assertThat
 import assertk.assertions.containsExactly
 import assertk.assertions.isFalse
+import assertk.assertions.isTrue
 import com.structurizr.model.SoftwareSystem
 import kotlin.test.Test
 
@@ -22,6 +23,7 @@ class SoftwareSystemContextPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "context-1",
                 "Software system - System Context",
+                null,
                 "System context view 1",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -32,6 +34,7 @@ class SoftwareSystemContextPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "context-2",
                 "Software system - System Context",
+                null,
                 "System context view 2",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -51,4 +54,19 @@ class SoftwareSystemContextPageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `no index`() {
+        val viewModel = SoftwareSystemContextPageViewModel(generatorContext, generatorContext.workspace.model
+            .addSoftwareSystem("Software system 2").also {
+                generatorContext.workspace.views.createSystemContextView(it, "context-3", "System context view 3")
+            })
+        assertThat(viewModel.diagramIndex.visible).isFalse()
+    }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemContextPageViewModel(generatorContext, softwareSystem)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                             }
                     }
                 }
+                diagramIndex(viewModel.diagramIndex)
                 viewModel.images.forEach { image(it) }
             }
         } else
@@ Expand Down @@