Improve styling of hierarchical and graph views of trees

ide/packages/panoptes/src/File.css

@@ -1,8 +1,3 @@
-.ObligationCard {
-    display: block;
-    width: 100%;
-}
-
 span.ErrorCount {
     color: var(--vscode-errorForeground);
 }

ide/packages/panoptes/src/File.tsx

@@ -99,7 +99,7 @@ const ObligationCard = observer(
   ({ range, obligation }: { range: CharRange; obligation: Obligation }) => {
     const file = useContext(FileContext)!;
     const id = obligationCardId(file, obligation.hash);
-    const ref = useRef<HTMLSpanElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
 
     const [addHighlight, removeHighlight] = makeHighlightPosters(
       obligation.range,
@@ -119,7 +119,7 @@ const ObligationCard = observer(
     }, []);
 
     const header = (
-      <span
+      <div
         id={id}
         className={className}
         ref={ref}
@@ -128,7 +128,7 @@ const ObligationCard = observer(
       >
         <ResultRaw result={obligation.result} />
         <PrintObligation obligation={obligation} />
-      </span>
+      </div>
     );
 
     return (

ide/packages/panoptes/src/Icons.css

@@ -4,4 +4,16 @@
 
   padding-right: 0.2em;
   padding-left: 0.2em;
+}
+
+.codicon-error {
+  color: var(--vscode-errorForeground);
+}
+
+.codicon-question {
+  color: var(--vscode-inputValidation-warningBorder);
+}
+
+.codicon-check {
+  color: var(--vscode-inputValidation-infoBorder);
 }

ide/packages/panoptes/src/Icons.tsx

@@ -42,6 +42,6 @@ export const IcoNote = () => <i className="codicon codicon-note" />;
 
 export const IcoMegaphone = () => <i className="codicon codicon-megaphone" />;
 
-export const IcoTreeDown = () => (
-  <i className="codicon codicon-type-hierarchy-sub" />
-);
+export const IcoTreeDown: React.FC<
+  React.HTMLAttributes<HTMLElement>
+> = props => <i className="codicon codicon-type-hierarchy-sub" {...props} />;

ide/packages/panoptes/src/TreeView/BottomUp.tsx

@@ -150,11 +150,7 @@ const BottomUp = () => {
   });
 
   const LeafElement = ({ leaf }: { leaf: TreeViewWithRoot }) => (
-    <DirRecursive
-      level={[leaf.root]}
-      getNext={mkGetChildren(leaf)}
-      styleEdges={false}
-    />
+    <DirRecursive level={[leaf.root]} getNext={mkGetChildren(leaf)} />
   );
 
   const recommendedSortedViews = tree.sortByRecommendedOrder(
@@ -169,13 +165,9 @@ const BottomUp = () => {
     others.length === 0 ? null : (
       <CollapsibleElement
         info={<span>Other failures ...</span>}
-        Children={() => (
-          <>
-            {_.map(others, (leaf, i) => (
-              <LeafElement key={i} leaf={leaf} />
-            ))}
-          </>
-        )}
+        Children={() =>
+          _.map(others, (leaf, i) => <LeafElement key={i} leaf={leaf} />)
+        }
       />
     );
 

ide/packages/panoptes/src/TreeView/Directory.css

@@ -1,7 +1,3 @@
-.DirRecursive {
-    line-height: 2;
-}
-
 .DirRecursive.is-candidate {
     border-left: 1px dotted var(--vscode-dropdown-border);
 }
@@ -14,44 +10,51 @@
     border-left: 1px solid var(--vscode-widget-border);
 }
 
-.Collapsible {
+.DirNodeChildren {
     height: auto;
 }
 
-.Collapsible.indent {
-    padding-left: 0.5em;
+.DirNodeChildren.indent {
+    padding-left: 15px;
 }
 
-.Collapsible.collapsed {
+.DirNodeChildren.collapsed {
     height: 0;
     overflow: hidden;
 }
 
 .DirNode {
     font-family: Menlo, Monaco, "Courier New", monospace;
     display: flex;
-    flex-direction: row;
-    gap: 1.00em;
+    flex-direction: column;    
+    gap: 10px;
 }
 
 .DirNode.WhereConstraintArea {
-    flex-direction: column;
-    gap: 0;
+    flex-direction: column;    
+}
+
+.DirNodeLabel {
+    display: flex;    
 }
 
-.DirNode > .toggle {
-    display: inline-block;
-    width: 10px;
+.DirNodeLabel > .toggle {
+    cursor: pointer;
 }
 
-.DirNode > .toggle > .codicon {
+.DirNodeLabel > .toggle .codicon {
     font-size: 10px;
 }
 
-.information > pre {
+.DirNodeLabel > .label .codicon {
+    font-size: 14px;
+    margin-right: 3px;
+}
+
+.DirNodeLabel > .label > pre {
     margin-top: 0;
 }
 
-.information::before {
+.DirNodeLabel > .label::before {
     content: ' ';
 }

ide/packages/panoptes/src/TreeView/Directory.tsx

@@ -51,45 +51,54 @@ export const CollapsibleElement = ({
 
   const toggleCollapse = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
+    e.stopPropagation();
     setIsOpen(!isOpen);
   };
 
-  const collapseCN = classNames("Collapsible", {
+  const collapseCN = classNames("DirNodeChildren", {
     indent: indentChildren,
     collapsed: !isOpen,
   });
 
   return (
-    <>
-      <div className="DirNode" onClick={toggleCollapse}>
+    <div className="DirNode">
+      <div className="DirNodeLabel" onClick={toggleCollapse}>
         <div className="toggle">
           {Children !== null ? (isOpen ? openIco : closedIco) : null}
         </div>
-        <span className="information">{info}</span>
+        <div className="label">{info}</div>
       </div>
-      <div className={collapseCN}>{children ?? null}</div>
-    </>
+      <div className={collapseCN}>{children}</div>
+    </div>
   );
 };
 
-type InfoWrapper = React.FC<{ n: ProofNodeIdx; Child: React.FC }>;
+export type InfoWrapper = React.FC<{
+  n: ProofNodeIdx;
+  Child: React.ReactElement;
+}>;
+export interface TreeRenderParams {
+  Wrapper?: InfoWrapper;
+  styleEdges?: boolean;
+}
+export let TreeRenderContext = React.createContext<TreeRenderParams>({});
 
 export const DirNode = ({
   idx,
   Children,
-  Wrapper = ({ n: _, Child }) => <Child />,
 }: {
   idx: number;
   Children: React.FC | null;
-  Wrapper: InfoWrapper;
 }) => {
   const tree = useContext(TreeContext)!;
+  const { Wrapper } = useContext(TreeRenderContext);
   const node = tree.node(idx);
 
   const arrows: ElementPair = [<IcoTriangleDown />, <IcoTriangleRight />];
   const dots: ElementPair = [<IcoDot />, <IcoDot />];
   const icons = "Result" in node ? dots : arrows;
-  const info = <Wrapper n={idx} Child={() => <Node node={node} />} />;
+  const infoChild = <Node node={node} />;
+  const info = Wrapper ? <Wrapper n={idx} Child={infoChild} /> : infoChild;
 
   return (
     <CollapsibleElement
@@ -104,15 +113,12 @@ export const DirNode = ({
 export const DirRecursive = ({
   level,
   getNext,
-  styleEdges,
-  Wrapper = ({ n: _, Child }) => <Child />,
 }: {
   level: ProofNodeIdx[];
   getNext: (idx: ProofNodeIdx) => ProofNodeIdx[];
-  styleEdges: boolean;
-  Wrapper?: InfoWrapper;
 }) => {
   const tree = useContext(TreeContext)!;
+  const { styleEdges } = useContext(TreeRenderContext);
   const node = tree.node(level[0]);
   const className = classNames("DirRecursive", {
     "is-candidate": styleEdges && "Candidate" in node,
@@ -124,25 +130,11 @@ export const DirRecursive = ({
     <div className={className}>
       {_.map(level, (current, i) => {
         const next = getNext(current);
-        return (
-          <DirNode
-            key={i}
-            idx={current}
-            Wrapper={Wrapper}
-            Children={
-              next.length > 0
-                ? () => (
-                    <DirRecursive
-                      level={next}
-                      getNext={getNext}
-                      styleEdges={styleEdges}
-                      Wrapper={Wrapper}
-                    />
-                  )
-                : null
-            }
-          />
-        );
+        const Children =
+          next.length > 0
+            ? () => <DirRecursive level={next} getNext={getNext} />
+            : null;
+        return <DirNode key={i} idx={current} Children={Children} />;
       })}
     </div>
   );

ide/packages/panoptes/src/TreeView/Graph.tsx

@@ -13,7 +13,7 @@ import Tree, { Orientation, TreeLinkDatum, TreeNodeDatum } from "react-d3-tree";
 
 import { TreeContext } from "./Context";
 import "./Graph.css";
-import { Node } from "./Node";
+import { Node, Result } from "./Node";
 import { TreeInfo } from "./TreeInfo";
 
 const useCenteredTree = (
@@ -97,7 +97,11 @@ const TreeNode = ({
         height="100%"
       >
         <span ref={ref} className="foreign-wrapper">
-          <Node node={node} />
+          {"Result" in node ? (
+            <Result idx={node.Result} />
+          ) : (
+            <Node node={node} />
+          )}
         </span>
       </foreignObject>
     </g>
@@ -131,21 +135,20 @@ const Graph = ({ root }: { root: ProofNodeIdx }) => {
   const topology = treeInfo.topology;
   const data = topologyToTreeData(topology, root);
 
-  const customRender = (rd3tProps: any) => {
-    return <TreeNode {...rd3tProps} />;
-  };
+  const customRender = (rd3tProps: any) => <TreeNode {...rd3tProps} />;
 
   const nodeSize = { x: 250, y: 100 };
 
   return (
     <div className="TreeArea" ref={containerRef}>
       <Tree
         data={data}
-        orientation="vertical"
+        orientation="horizontal"
         translate={translate}
         nodeSize={nodeSize}
         renderCustomNodeElement={customRender}
         pathClassFunc={getEdgeClass(treeInfo)}
+        separation={{ siblings: 1, nonSiblings: 1 }}
       />
     </div>
   );

ide/packages/panoptes/src/TreeView/Node.tsx

@@ -62,7 +62,11 @@ export const Candidate = ({ idx }: { idx: CandidateIdx }) => {
 export const Node = ({ node }: { node: NodeTy }) => {
   const treeInfo = useContext(TreeContext)!;
   if ("Result" in node) {
-    return <Result idx={node.Result} />;
+    return (
+      <>
+        <Result idx={node.Result} /> (end of tree)
+      </>
+    );
   } else if ("Goal" in node) {
     const goal = treeInfo.goal(node.Goal);
     return (