Add contextdata tabs to HTML report

include-build/roborazzi-core/src/commonJvmMain/kotlin/com/github/takahirom/roborazzi/CaptureResult.kt

@@ -15,6 +15,14 @@ sealed interface CaptureResult {
   val goldenFile: File?
   val contextData: Map<String, Any>
 
+  val reportFile: File
+    get() = when (val result = this) {
+      is Added -> result.actualFile
+      is Changed -> result.compareFile
+      is Recorded -> result.goldenFile
+      is Unchanged -> result.goldenFile
+    }
+
   data class Recorded(
     @SerializedName("golden_file_path")
     override val goldenFile: File,

include-build/roborazzi-core/src/commonJvmMain/kotlin/com/github/takahirom/roborazzi/CaptureResults.kt

@@ -1,6 +1,17 @@
 package com.github.takahirom.roborazzi
 
-import com.google.gson.*
+import com.google.gson.Gson
+import com.google.gson.GsonBuilder
+import com.google.gson.JsonDeserializationContext
+import com.google.gson.JsonDeserializer
+import com.google.gson.JsonElement
+import com.google.gson.JsonNull
+import com.google.gson.JsonObject
+import com.google.gson.JsonParseException
+import com.google.gson.JsonParser
+import com.google.gson.JsonPrimitive
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
 import com.google.gson.annotations.SerializedName
 import java.io.File
 import java.io.FileReader
@@ -17,82 +28,143 @@ data class CaptureResults(
     return gson.toJson(this)
   }
 
+  class Tab(
+    val title: String,
+    val id: String,
+    val contents: String
+  )
+
   fun toHtml(reportDirectoryPath: String): String {
+    val resultTab = Tab(
+      title = "Results",
+      id = "results",
+      contents = buildString {
+        val recordedImages = captureResults.filterIsInstance<CaptureResult.Recorded>()
+        val addedImages = captureResults.filterIsInstance<CaptureResult.Added>()
+        val changedImages = captureResults.filterIsInstance<CaptureResult.Changed>()
+        val unchangedImages = captureResults.filterIsInstance<CaptureResult.Unchanged>()
+        append(resultSummary.toHtml())
+        append(buildTable("Recorded images", "recorded", recordedImages, reportDirectoryPath))
+        append(buildTable("Added images", "added", addedImages, reportDirectoryPath))
+        append(buildTable("Changed images", "changed", changedImages, reportDirectoryPath))
+        append(buildTable("Unchanged images", "unchanged", unchangedImages, reportDirectoryPath))
+      }
+    )
+    val contextTabs = captureResults
+      .flatMap { it.contextData.keys }
+      .distinct()
+      .map { key ->
+        Tab(
+          title = RoborazziReportConst.DefaultContextData.keyToTitle(key),
+          id = key,
+          contents = buildString {
+            captureResults.groupBy { it.contextData[key]?.toString() ?: "undefined" }
+              .toSortedMap(Comparator<String> { value1, value2 ->
+                // show "undefined" and "null" at the end
+                if (value1 == "undefined" || value2 == "null") {
+                  1
+                } else if (value1 == "null" || value2 == "undefined") {
+                  -1
+                } else {
+                  value1.compareTo(value2)
+                }
+              })
+              .forEach { (value, results) ->
+                append(buildTable(value, value, results, reportDirectoryPath))
+              }
+          }
+        )
+      }
+    val tabs = listOf(resultTab) + contextTabs
+    return buildString {
+      append(
+        "<div class=\"row\">\n" +
+          "<div class=\"col s12\">\n" +
+          "<ul class=\"tabs\">"
+      )
+      tabs.forEach { tab ->
+        // <li class="tab col s3"><a href="#test1">Test 1</a></li>
+        append("""<li class="tab col s3"><a href="#${tab.id}">${tab.title}</a></li>""")
+      }
+      append("</ul>\n</div>")
+      tabs.forEach { tab ->
+        append("""<div id="${tab.id}" class="col s12" style="display: none;">${tab.contents}</div>""")
+      }
+      append("</div>")
+    }
+  }
+
+  private fun buildTable(
+    title: String,
+    anchor: String,
+    images: List<CaptureResult>,
+    reportDirectoryPath: String
+  ): String {
     fun File.pathFrom(reportDirectoryPath: String): String {
       val reportDirectory = File(reportDirectoryPath)
       val relativePath = relativeTo(reportDirectory)
       return relativePath.path
     }
-
-    val recordedImages = captureResults.filterIsInstance<CaptureResult.Recorded>()
-    val addedImages = captureResults.filterIsInstance<CaptureResult.Added>()
-    val changedImages = captureResults.filterIsInstance<CaptureResult.Changed>()
-    val unchangedImages = captureResults.filterIsInstance<CaptureResult.Unchanged>()
-    fun buildTable(title: String, anchor: String, images: List<CaptureResult>): String {
-      if (images.isEmpty()) return ""
-      return buildString {
-        append("<h3>$title (${images.size})</h3>")
-        val fileNameClass = "flow-text col s3"
-        val fileNameStyle = "word-wrap: break-word; word-break: break-all;"
-        val imgClass = "col s7"
-        val imgAttributes = "style=\"max-width: 100%; height: 100%; object-fit: cover;\" class=\"modal-trigger\""
-        append("<table class=\"highlight\" id=\"$anchor\">")
-        append("<thead>")
+    if (images.isEmpty()) return ""
+    return buildString {
+      append("<h3>$title (${images.size})</h3>")
+      val fileNameClass = "flow-text col s3"
+      val fileNameStyle = "word-wrap: break-word; word-break: break-all;"
+      val imgClass = "col s7"
+      val imgAttributes =
+        "style=\"max-width: 100%; height: 100%; object-fit: cover;\" class=\"modal-trigger\""
+      append("<table class=\"highlight\" id=\"$anchor\">")
+      append("<thead>")
+      append("<tr class=\"row\">")
+      append("<th class=\"$fileNameClass\" style=\"$fileNameStyle\">File Name</th>")
+      append("<th class=\"$imgClass flow-text \">Image</th>")
+      append("</tr>")
+      append("</thead>")
+      append("<tbody>")
+      images.forEach { image ->
         append("<tr class=\"row\">")
-        append("<th class=\"$fileNameClass\" style=\"$fileNameStyle\">File Name</th>")
-        append("<th class=\"$imgClass flow-text \">Image</th>")
-        append("</tr>")
-        append("</thead>")
-        append("<tbody>")
-        images.forEach { image ->
-          append("<tr class=\"row\">")
-
-          when (image) {
-            is CaptureResult.Added -> {
-              append("<td class=\"$fileNameClass\" style=\"$fileNameStyle\">${image.actualFile.name}</td>")
-              append("<td class=\"$imgClass\"><img $imgAttributes src=\"${image.actualFile.pathFrom(reportDirectoryPath)}\" data-alt=\"${image.goldenFile.name}\"/></td>")
-            }
-
-            is CaptureResult.Changed -> {
-              append("<td class=\"$fileNameClass\" style=\"$fileNameStyle\">${image.compareFile.name}</td>")
-              append("<td class=\"$imgClass\"><img $imgAttributes src=\"${image.compareFile.pathFrom(reportDirectoryPath)}\" data-alt=\"${image.goldenFile.name}\"/></td>")
-            }
-
-            is CaptureResult.Recorded -> {
-              append("<td class=\"$fileNameClass\" style=\"$fileNameStyle\">${image.goldenFile.name}</td>")
-              append("<td class=\"$imgClass\"><img $imgAttributes src=\"${image.goldenFile.pathFrom(reportDirectoryPath)}\" data-alt=\"${image.goldenFile.name}\"/></td>")
-            }
 
-            is CaptureResult.Unchanged -> {
-              append("<td class=\"$fileNameClass\" style=\"$fileNameStyle\">${image.goldenFile.name}</td>")
-              append("<td class=\"$imgClass\"><img $imgAttributes src=\"${image.goldenFile.pathFrom(reportDirectoryPath)}\" data-alt=\"${image.goldenFile.name}\" /></td>")
-            }
-          }
-          append("</tr>")
+        val contextData = if (image.contextData.isNotEmpty() && image.contextData.all {
+            it.value.toString() != "null" && it.value.toString().isNotEmpty()
+          }) {
+          "<br>contextData:${image.contextData}"
+        } else {
+          ""
         }
-        append("</tbody>")
-        append("</table>")
+        append("<td class=\"$fileNameClass\" style=\"$fileNameStyle\">${image.reportFile.name}$contextData</td>")
+        append(
+          "<td class=\"$imgClass\"><img $imgAttributes src=\"${
+            image.reportFile.pathFrom(
+              reportDirectoryPath
+            )
+          }\" data-alt=\"${image.reportFile.name}\" /></td>"
+        )
 
+        append("</tr>")
       }
-    }
-    return buildString {
-      append(resultSummary.toHtml())
-      append(buildTable("Recorded images", "recorded", recordedImages))
-      append(buildTable("Added images", "added", addedImages))
-      append(buildTable("Changed images", "changed", changedImages))
-      append(buildTable("Unchanged images", "unchanged", unchangedImages))
+      append("</tbody>")
+      append("</table>")
+
     }
   }
 
   companion object {
     val gson: Gson = GsonBuilder()
       .registerTypeAdapter(File::class.java, object : JsonSerializer<File>, JsonDeserializer<File> {
-        override fun serialize(src: File?, typeOfSrc: Type?, context: JsonSerializationContext?): JsonElement {
+        override fun serialize(
+          src: File?,
+          typeOfSrc: Type?,
+          context: JsonSerializationContext?
+        ): JsonElement {
           val absolutePath = src?.absolutePath ?: return JsonNull.INSTANCE
           return JsonPrimitive(absolutePath)
         }
 
-        override fun deserialize(json: JsonElement?, typeOfT: Type?, context: JsonDeserializationContext?): File {
+        override fun deserialize(
+          json: JsonElement?,
+          typeOfT: Type?,
+          context: JsonDeserializationContext?
+        ): File {
           val path = json?.asString ?: throw JsonParseException("File path is null")
           return File(path)
         }

include-build/roborazzi-core/src/commonJvmMain/kotlin/com/github/takahirom/roborazzi/RoborazziOptions.kt

@@ -14,6 +14,12 @@ fun roborazziSystemPropertyOutputDirectory(): String {
   return System.getProperty("roborazzi.output.dir", DEFAULT_ROBORAZZI_OUTPUT_DIR_PATH)
 }
 
+@ExperimentalRoborazziApi
+// This will be removed when we found if this is safe.
+fun roborazziEnableContextData(): Boolean {
+  return System.getProperty("roborazzi.contextdata", "true").toBoolean()
+}
+
 @Deprecated(
   message = "Use roborazziSystemPropertyTaskType()",
   replaceWith = ReplaceWith("roborazziSystemPropertyTaskType().isEnabled()"),

include-build/roborazzi-core/src/commonJvmMain/kotlin/com/github/takahirom/roborazzi/RoborazziReportConst.kt

@@ -4,6 +4,26 @@ object RoborazziReportConst {
   const val resultsSummaryFilePath = "build/test-results/roborazzi/results-summary.json"
   const val resultDirPath = "build/test-results/roborazzi/results/"
   const val reportFilePath = "build/reports/roborazzi/index.html"
+
+  sealed interface DefaultContextData {
+    val key: String
+    val title: String
+
+    object DescriptionClass : DefaultContextData {
+      override val key = "roborazzi_description_class"
+      override val title = "Class"
+    }
+
+    companion object {
+      fun keyToTitle(key: String): String {
+        return when (key) {
+          DescriptionClass.key -> DescriptionClass.title
+          else -> key
+        }
+      }
+    }
+  }
+
   const val reportHtml = """
 <!DOCTYPE html>
 <html lang="en">
@@ -93,6 +113,7 @@ REPORT_TEMPLATE_BODY
 <script>
     M.AutoInit();
     document.addEventListener('DOMContentLoaded', function() {
+        M.Tabs.getInstance(document.getElementsByClassName("tabs")[0]).select('results');
         var modalInstance = M.Modal.init(document.getElementById('imageBottomSheet'), {});
         var modal = document.getElementById('imageBottomSheet');
         var modalImage = document.getElementById('modalImage');

include-build/roborazzi-core/src/commonJvmMain/kotlin/com/github/takahirom/roborazzi/processOutputImageAndReport.kt

@@ -59,6 +59,18 @@ fun processOutputImageAndReport(
   }
   val recordOptions = roborazziOptions.recordOptions
   val resizeScale = recordOptions.resizeScale
+  val contextData = if (roborazziEnableContextData()) {
+    val className = provideRoborazziContext().description?.className
+    val classNameMap: Map<out String, Any> = className?.let {
+      mapOf(
+        RoborazziReportConst.DefaultContextData.DescriptionClass.key to className.toString()
+      )
+    } ?: mapOf()
+    roborazziOptions.contextData + classNameMap
+  } else {
+    // This will be removed when we found if this is safe.
+    mapOf()
+  }
   if (taskType.isVerifying() || taskType.isComparing()) {
     val width = (newRoboCanvas.croppedWidth * resizeScale).toInt()
     val height = (newRoboCanvas.croppedHeight * resizeScale).toInt()
@@ -102,7 +114,7 @@ fun processOutputImageAndReport(
         .save(
           file = comparisonFile,
           resizeScale = resizeScale,
-          contextData = roborazziOptions.contextData
+          contextData = contextData
         )
       debugLog {
         "processOutputImageAndReport(): compareCanvas is saved " +
@@ -123,7 +135,7 @@ fun processOutputImageAndReport(
         .save(
           file = actualFile,
           resizeScale = resizeScale,
-          contextData = roborazziOptions.contextData
+          contextData = contextData
         )
       debugLog {
         "processOutputImageAndReport(): actualCanvas is saved " +
@@ -135,22 +147,22 @@ fun processOutputImageAndReport(
           actualFile = actualFile,
           goldenFile = goldenFile,
           timestampNs = System.nanoTime(),
-          contextData = roborazziOptions.contextData,
+          contextData = contextData,
         )
       } else {
         CaptureResult.Added(
           compareFile = comparisonFile,
           actualFile = actualFile,
           goldenFile = goldenFile,
           timestampNs = System.nanoTime(),
-          contextData = roborazziOptions.contextData,
+          contextData = contextData,
         )
       }
     } else {
       CaptureResult.Unchanged(
         goldenFile = goldenFile,
         timestampNs = System.nanoTime(),
-        contextData = roborazziOptions.contextData,
+        contextData = contextData,
       )
     }
     debugLog {
@@ -168,7 +180,7 @@ fun processOutputImageAndReport(
     newRoboCanvas.save(
       file = goldenFile,
       resizeScale = resizeScale,
-      contextData = roborazziOptions.contextData
+      contextData = contextData
     )
     debugLog {
       "processOutputImageAndReport: \n" +
@@ -178,7 +190,7 @@ fun processOutputImageAndReport(
       captureResult = CaptureResult.Recorded(
         goldenFile = goldenFile,
         timestampNs = System.nanoTime(),
-        contextData = roborazziOptions.contextData,
+        contextData = contextData,
       ),
       roborazziTaskType = taskType
     )