[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-source-id: 1d67e2f371a8c75792f7f6450f52ecbf79720c00
Pull Request resolved: facebook#30151

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,15 +188,15 @@ 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) {
       let currResult = "";
       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;