From a319ffaaa5cd444bd3ef33c37a9d1e95d952a18e Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Sun, 30 Jun 2024 16:36:13 -0700
Subject: [PATCH] [compiler][playground] Formatting changes to pass tabs

Summary: Compiler pass tabs are bolded when their contents have changed from previous passes; but currently the HIR and JS tabs are unbolded. Conceptually they should be, if HIR is "changed" from the source code and JS is "changed" from the last IR phase.

In addition, the "show diff" option doesn't make a ton of sense for tabs that either aren't part of the pipeline (EnvironmentConfig) or (maybe more controversially, but imo) passes where the IR representation has changed since the last pass (BuildReactiveFunctions). This diff drops the button from those tabs.

[ghstack-poisoned]
---
 compiler/apps/playground/components/Editor/Output.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 3b2b26c8804e7..c8c37bd29a518 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -99,13 +99,14 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
     }
   }
   let lastPassOutput: string | null = null;
+  let nonDiffPasses = ["HIR", "BuildReactiveFunction", "EnvironmentConfig"];
   for (const [passName, text] of concattedResults) {
     tabs.set(
       passName,
       <TextTabContent
         output={text}
-        diff={passName !== "HIR" ? lastPassOutput : null}
-        showInfoPanel={true}
+        diff={lastPassOutput}
+        showInfoPanel={!nonDiffPasses.includes(passName)}
       ></TextTabContent>
     );
     lastPassOutput = text;
@@ -187,7 +188,7 @@ function Output({ store, compilerOutput }: Props) {
     });
   }, [store.source, compilerOutput]);
 
-  const changedPasses: Set<string> = new Set();
+  const changedPasses: Set<string> = new Set(["JS", "HIR"]); // Initial and final passes should always be bold
   let lastResult: string = "";
   for (const [passName, results] of compilerOutput.results) {
     for (const result of results) {
@@ -195,7 +196,7 @@ function Output({ store, compilerOutput }: Props) {
       if (result.kind === "hir" || result.kind === "reactive") {
         currResult += `function ${result.fnName}\n\n${result.value}`;
       }
-      if (passName !== "HIR" && currResult !== lastResult) {
+      if (currResult !== lastResult) {
         changedPasses.add(passName);
       }
       lastResult = currResult;