feat: Add option to hide non-syntax labels in expert mode

For now, this would be "configured" by removing the `&& false` condition in `const hideLabels = p.level == "Expert" && false`. We will be able to hook this up to a UI element in due course. Signed-off-by: George Thomas <[email protected]>
hackworthltd · Aug 14, 2023 · 1abcb8b · 1abcb8b
1 parent b8daae7
commit 1abcb8b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/src/components/TreeReactFlow/Flavor.ts b/src/components/TreeReactFlow/Flavor.ts
@@ -492,6 +492,31 @@ export const flavorLabel = (flavor: NodeFlavor): string => {
   }
 };
 
+/** This is a slightly shaky concept, but essentially it comes down to whether labels can be omitted
+ * without destroying the readability of the program.
+ * In other words, would we show this flavor's label in text mode?
+ */
+export const flavorIsSyntax = (flavor: NodeFlavorTextBody): boolean => {
+  switch (flavor) {
+    case "Lam":
+    case "LAM":
+    case "Let":
+    case "LetType":
+    case "Letrec":
+    case "TForall":
+    case "TLet":
+      return true;
+    case "Con":
+    case "GlobalVar":
+    case "LocalVar":
+    case "TCon":
+    case "TVar":
+    case "PatternCon":
+    case "PatternBind":
+      return false;
+  }
+};
+
 export const noBodyFlavorContents = (flavor: NodeFlavorNoBody): string => {
   switch (flavor) {
     case "Ann":

diff --git a/src/components/TreeReactFlow/Types.ts b/src/components/TreeReactFlow/Types.ts
@@ -161,6 +161,7 @@ export type PrimerNodeProps = {
   centerLabel: boolean;
   flavor: NodeFlavorTextBody | NodeFlavorPrimBody | NodeFlavorNoBody;
   contents: string;
+  hideLabel: boolean;
 };
 
 /** Properties for a simple node. */

diff --git a/src/components/TreeReactFlow/index.tsx b/src/components/TreeReactFlow/index.tsx
@@ -58,6 +58,7 @@ import {
   flavorClasses,
   flavorContentClasses,
   flavorEdgeClasses,
+  flavorIsSyntax,
   flavorLabel,
   flavorLabelClasses,
   flavorSort,
@@ -200,7 +201,9 @@ const nodeTypes = {
               "overflow-hidden grow flex self-center justify-center px-1 font-code text-sm xl:text-base",
               flavorContentClasses(data.flavor),
               // This makes the content look more centered, given the rounded ends (see `sortClasses`).
-              flavorSort(data.flavor) == "term" ? "relative right-1" : ""
+              flavorSort(data.flavor) == "term" && !data.hideLabel
+                ? "relative right-1"
+                : ""
             ),
           };
       }
@@ -217,9 +220,13 @@ const nodeTypes = {
           }}
           className={classes.root}
         >
-          <div className={classes.label} style={{ width: data.height }}>
-            {flavorLabel(data.flavor)}
-          </div>
+          {data.hideLabel ? (
+            <></>
+          ) : (
+            <div className={classes.label} style={{ width: data.height }}>
+              {flavorLabel(data.flavor)}
+            </div>
+          )}
           <div className={classes.contents}>
             <div className="truncate">{data.contents}</div>
           </div>
@@ -555,6 +562,7 @@ const makePrimerNode = async (
       p.selection
     );
   const id = node.nodeId;
+  const hideLabels = p.level == "Expert" && false;
   const common = {
     width: p.nodeWidth,
     height: p.nodeHeight,
@@ -592,6 +600,7 @@ const makePrimerNode = async (
             flavor,
             contents,
             centerLabel: false,
+            hideLabel: hideLabels,
             ...common,
           },
           zIndex,
@@ -607,6 +616,7 @@ const makePrimerNode = async (
     }
     case "TextBody": {
       const { fst: flavor, snd: name } = node.body.contents;
+      const hideLabel = hideLabels && !flavorIsSyntax(flavor);
       return [
         {
           id,
@@ -615,9 +625,12 @@ const makePrimerNode = async (
             flavor,
             contents: name.baseName,
             centerLabel: false,
+            hideLabel,
             ...common,
             width:
-              p.style == "inline" ? common.width + common.height : common.width,
+              p.style == "inline" && !hideLabel
+                ? common.width + common.height
+                : common.width,
           },
           zIndex,
         },
@@ -646,6 +659,7 @@ const makePrimerNode = async (
               flavor,
               contents: noBodyFlavorContents(node.body.contents),
               centerLabel: node.children >= 2,
+              hideLabel: hideLabels,
               ...common,
               // TODO This is necessary to ensure that all syntax labels fit.
               // It can be removed when we have dynamic node sizes.