Add support for variable links

crates/compiler/checkmate/www/src/components/Common/Variable.tsx

@@ -4,6 +4,7 @@ import { QuerySubs, TypeDescriptor } from "../../engine/subs";
 import { Variable } from "../../schema";
 import DrawHeadConstructor from "../Content/HeadConstructor";
 import { contentStyles } from "./../Content";
+import { VariableName } from "./VariableName";
 
 interface VariableElProps {
   variable: Variable;
@@ -51,23 +52,6 @@ function Helper({
     desc: TypeDescriptor | undefined;
   }): JSX.Element {
   const { bg } = contentStyles(desc);
-  const varHeader =
-    !nested || raw ? (
-      <span
-        className={clsx(
-          "ring-1 ring-inset ring-black-100 px-1 bg-white rounded-md cursor",
-          nested ? "text-md" : "p-0.5"
-        )}
-        onClick={(e) => {
-          e.stopPropagation();
-          onClick?.(variable);
-        }}
-      >
-        {variable}
-      </span>
-    ) : (
-      <></>
-    );
   return (
     <span
       className={clsx(
@@ -76,7 +60,13 @@ function Helper({
         nested ? "text-sm" : "p-0.5 pl-0 text-base"
       )}
     >
-      {varHeader}
+      {(!nested || raw) && (
+        <VariableName
+          variable={variable}
+          onClick={onClick}
+          className={nested ? "text-md" : "p-0.5"}
+        />
+      )}
       {children ? <span className="px-1">{children}</span> : <></>}
     </span>
   );

crates/compiler/checkmate/www/src/components/Common/VariableLink.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { QuerySubs } from "../../engine/subs";
+import { Variable } from "../../schema";
+import { VariableName } from "./VariableName";
+
+export interface VariableLinkProps {
+  variable: Variable;
+  subs: QuerySubs;
+  onClick?: (variable: Variable) => void;
+}
+
+export function VariableLink({
+  variable,
+  subs,
+  onClick,
+}: VariableLinkProps): JSX.Element {
+  const root = subs.get_root_key(variable);
+
+  if (variable === root) {
+    throw new Error("VariableLink: variable is root");
+  }
+
+  return (
+    <div className={clsx("rounded-md whitespace-nowrap space-x-1")}>
+      <VariableName className="inline-block" variable={variable} />
+      <span>→</span>
+      <VariableName
+        className="inline-block"
+        variable={root}
+        onClick={onClick}
+      />
+    </div>
+  );
+}

crates/compiler/checkmate/www/src/components/Common/VariableName.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import { Variable } from "../../schema";
+
+export interface VariableNameProps {
+  variable: Variable;
+  onClick?: (variable: Variable) => void;
+  className?: string;
+}
+
+export function VariableName({
+  variable,
+  onClick,
+  className,
+}: VariableNameProps): JSX.Element {
+  return (
+    <span
+      className={clsx(
+        "ring-1 ring-inset ring-black-100 px-1 bg-white rounded-md",
+        onClick && "cursor-pointer",
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick?.(variable);
+      }}
+    >
+      {variable}
+    </span>
+  );
+}