From c9a70329818ffb0016d9ee2e487bd4d6c632f0aa Mon Sep 17 00:00:00 2001
From: Jim Bethancourt <jimbethancourt@gmail.com>
Date: Tue, 2 Jun 2026 21:53:36 -0500
Subject: [PATCH] #167 #168 Using new HTML styling

- Using header, nav, and main to creat & group menu & content
- Using mvp.css to make it look halfway decent
---
 .../hjug/refactorfirst/report/HtmlReport.java | 26 ++++++++++++-
 .../report/SimpleHtmlReport.java              | 38 ++++++++++++-------
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/report/src/main/java/org/hjug/refactorfirst/report/HtmlReport.java b/report/src/main/java/org/hjug/refactorfirst/report/HtmlReport.java
index 874e4f2..54c25f9 100644
--- a/report/src/main/java/org/hjug/refactorfirst/report/HtmlReport.java
+++ b/report/src/main/java/org/hjug/refactorfirst/report/HtmlReport.java
@@ -280,6 +280,27 @@ public class HtmlReport extends SimpleHtmlReport {
 
     // Created by generative AI and modified
     public static final String POPUP_STYLE = "<style>\n" + "        /* Popup container */\n"
+            + "    main {\n" + "        max-width: 100vw;/*3840px;*/\n"
+            + "        width: 100vw;   /* or 100vw for viewport width */\n"
+            + "        /*background-color: lightblue; *//* just for visibility */\n"
+            + "        padding: 0px 0px; /* 0px top & bottom, 40px left & right */\n"
+            + "    }\n"
+            + "\n"
+            + "    nav {\n"
+            + "        justify-content: center; /* Center horizontally */\n"
+            + "        padding: 0px 40px; /* 0px top & bottom, 40px left & right */\n"
+            + "        margin: 0px auto;\n"
+            + "    }\n"
+            + "\n"
+            + "    header {\n"
+            + "        padding: 0px 40px; /* 0px top & bottom, 40px left & right */\n"
+            + "    }\n"
+            + "\n"
+            + "    /* Scale the SVG to fill the screen */\n"
+            + "    .fullscreen-svg {\n"
+            + "        width: 100%;\n"
+            + "        height: 100%;\n"
+            + "    }"
             + "        .popup {\n"
             + "            position: fixed;\n"
             + "            display: none;\n"
@@ -395,7 +416,8 @@ public String printHead() {
                 // may only need graphlib-dot
                 + "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/graphlib/2.1.8/graphlib.min.js\"></script>\n"
                 + "<script src=\"https://cdn.jsdelivr.net/npm/graphlib-dot@0.6.4/dist/graphlib-dot.min.js\"></script>\n"
-                + "<script src=\"https://cdn.jsdelivr.net/npm/3d-force-graph\"></script>\n";
+                + "<script src=\"https://cdn.jsdelivr.net/npm/3d-force-graph\"></script>\n"
+                + "<link rel=\"stylesheet\" href=\"https://unpkg.com/mvp.css\">\n";
     }
 
     String printScripts() {
@@ -540,7 +562,7 @@ private static String generateDotImage(String graphName) {
                 + "        // Set desired width and height\n"
                 + "\n"
                 + "        // Modify the SVG string to include width and height attributes\n"
-                + "        svg = svg.replace('<svg ', `<svg width=\"screen.width\" height=\"screen.height\"`);\n"
+                + "        svg = svg.replace('<svg ', `<svg class=\"fullscreen-svg\"`);\n"
                 + "\n"
                 + "        document.getElementById(\""
                 + graphName + "\").innerHTML = svg;\n" + "\n"
diff --git a/report/src/main/java/org/hjug/refactorfirst/report/SimpleHtmlReport.java b/report/src/main/java/org/hjug/refactorfirst/report/SimpleHtmlReport.java
index 8e7ccb2..06ce9de 100644
--- a/report/src/main/java/org/hjug/refactorfirst/report/SimpleHtmlReport.java
+++ b/report/src/main/java/org/hjug/refactorfirst/report/SimpleHtmlReport.java
@@ -292,32 +292,40 @@ public StringBuilder generateReport(
             return stringBuilder;
         }
 
+        stringBuilder.append("<header>\n" + "<nav>\n" + " <ul>\n");
+
         if (!edgesToRemove.isEmpty()) {
-            stringBuilder.append("<a href=\"#EDGES\">Edges To Remove</a>\n");
-            stringBuilder.append("<br/>\n");
+            stringBuilder.append("<li><a href=\"#EDGES\">Edges To Remove</a></li>\n");
         }
 
         if (!rankedCBODisharmonies.isEmpty()) {
             stringBuilder.append("<a href=\"#CBO\">Highly Coupled Classes</a>\n");
-            stringBuilder.append("<br/>\n");
+        }
+
+        if (!disharmonySpecs.isEmpty()) {
+            stringBuilder.append("<li><a href=\"#\">Disharmonies</a>\n" + "                <ul>");
         }
 
         for (DisharmonySpec spec : disharmonySpecs) {
             if (rankedDisharmoniesByAnchor.containsKey(spec.anchorId())) {
                 stringBuilder
-                        .append("<a href=\"#")
+                        .append("<li><a href=\"#")
                         .append(spec.anchorId())
                         .append("\">")
                         .append(spec.title())
-                        .append("</a>\n");
-                stringBuilder.append("<br/>\n");
+                        .append("</a></li>\n");
             }
         }
 
+        if (!disharmonySpecs.isEmpty()) {
+            stringBuilder.append("</ul>\n" + "            </li>");
+        }
+
         if (!rankedCycles.isEmpty()) {
-            stringBuilder.append("<a href=\"#CYCLES\">Class Cycles</a>\n");
+            stringBuilder.append("<li><a href=\"#CYCLES\">Class Cycles</a></li>\n");
         }
 
+        stringBuilder.append("</ul>\n" + "</nav>\n" + "</header>\n");
         log.info("Generating HTML Report");
 
         stringBuilder.append(renderClassGraphVisuals());
@@ -348,8 +356,6 @@ public StringBuilder generateReport(
             stringBuilder.append(renderCycles(rankedCycles));
         }
 
-        stringBuilder.append("</section>\n");
-
         log.debug(stringBuilder.toString());
         return stringBuilder;
     }
@@ -380,6 +386,7 @@ private String renderEdgeDisharmonies(List<RankedDisharmony> edgeDisharmonies) {
         stringBuilder.append("</div>\n");
 
         // Content
+        stringBuilder.append("<div align=\"center\">");
         stringBuilder.append("<table align=\"center\" border=\"5px\">\n");
         stringBuilder.append("<thead>\n<tr>\n");
         for (String heading : getEdgeDisharmonyTableHeadings()) {
@@ -401,6 +408,7 @@ private String renderEdgeDisharmonies(List<RankedDisharmony> edgeDisharmonies) {
 
         stringBuilder.append("</tbody>\n");
         stringBuilder.append("</table>\n");
+        stringBuilder.append("</div>\n");
 
         return stringBuilder.toString();
     }
@@ -437,6 +445,7 @@ private String renderClassCycleSummary(List<RankedCycle> rankedCycles) {
         }*/
 
         stringBuilder.append("<h2 align=\"center\">Class Cycles by the numbers:</h2>\n");
+        stringBuilder.append("<div align=\"center\">");
         stringBuilder.append("<table align=\"center\" border=\"5px\">\n");
 
         // Content
@@ -472,7 +481,7 @@ private String renderClassCycleSummary(List<RankedCycle> rankedCycles) {
 
         stringBuilder.append("</tbody>\n");
         stringBuilder.append("</table>\n");
-
+        stringBuilder.append("<div>");
         return stringBuilder.toString();
     }
 
@@ -541,6 +550,7 @@ private String renderSingleCycle(RankedCycle cycle) {
                 + relationshipCount + "<br></div>");
         stringBuilder.append("</div>\n");
 
+        stringBuilder.append("<div align=\"center\">");
         stringBuilder.append("<table align=\"center\" border=\"5px\">\n");
 
         // Content
@@ -585,7 +595,7 @@ private String renderSingleCycle(RankedCycle cycle) {
         stringBuilder.append("</tbody>\n");
 
         stringBuilder.append("</table>\n");
-
+        stringBuilder.append("</div>");
         return stringBuilder.toString();
     }
 
@@ -695,8 +705,8 @@ public String printProjectHeader(String projectName, String projectVersion) {
         return "</div>\n" + "      <div class=\"xright\">      </div>\n"
                 + "    </div>\n"
                 + "    <div id=\"bodyColumn\">\n"
-                + "      <div id=\"contentBox\">\n" + "<section>\n"
-                + "<h2><a href=\"https://github.com/refactorfirst/refactorfirst\" target=\"_blank\" "
+                + "      <div id=\"contentBox\">\n"
+                + "<h2 align=\"center\"><a href=\"https://github.com/refactorfirst/refactorfirst\" target=\"_blank\" "
                 + "title=\"Learn about RefactorFirst\" aria-label=\"RefactorFirst\">RefactorFirst</a> Report for "
                 + projectName
                 + " "
@@ -754,6 +764,7 @@ public String renderDisharmonyInfo(
         sb.append("<h2 align=\"center\">")
                 .append(title)
                 .append(" by the numbers: (Refactor Starting with Priority 1)</h2>\n");
+        sb.append("<div align=\"center\">");
         sb.append("<table align=\"center\" border=\"5px\">\n");
 
         // Build headers from the first item's ranked metrics
@@ -835,6 +846,7 @@ public String renderDisharmonyInfo(
         }
         sb.append("</tbody>\n");
         sb.append("</table>\n");
+        sb.append("</div");
         return sb.toString();
     }