Display description of selected statement

Author: mrkvon

package.json

@@ -33,8 +33,11 @@
     "rdf-namespaces": "^1.9.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^6.0.2",
     "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
+    "rehype-katex": "^5.0.0",
+    "remark-math": "^4.0.0",
     "source-map-explorer": "^2.5.2",
     "styled-components": "^5.3.0",
     "swr": "^0.5.6",

src/components/Math.tsx

@@ -0,0 +1,30 @@
+/*
+ * based on the following example
+ * https://github.com/rexxars/react-markdown/issues/10#issuecomment-347763068
+ */
+
+import React from 'react'
+import 'katex/dist/katex.min.css'
+import ReactMarkdown from 'react-markdown'
+import remarkMath from 'remark-math'
+import styled from 'styled-components'
+import rehypeKatex from 'rehype-katex'
+
+const Styler = styled.div`
+  img {
+    max-width: 100%;
+  }
+`
+
+export default function Math({ children }: { children: string }) {
+  const props = {
+    children,
+    remarkPlugins: [remarkMath],
+    rehypePlugins: [rehypeKatex],
+  }
+  return (
+    <Styler>
+      <ReactMarkdown {...props} />
+    </Styler>
+  )
+}

src/components/Statement.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { GraphNode } from '../hooks/graph'
+import Math from './Math'
+
+interface Props {
+  node: GraphNode
+  onSelectNode: (uri: string) => void
+}
+
+const Statement = ({ node, onSelectNode }: Props) => {
+  const dependencies: GraphNode[] = Object.values(node.dependsOn)
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        width: '100%',
+        top: '0',
+        bottom: 0,
+        pointerEvents: 'none',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+      }}
+    >
+      <div className="columns mr-1 mt-6">
+        <div className="column is-one-quarter is-offset-three-quarters">
+          <div
+            className="card"
+            style={{ pointerEvents: 'all', overflowX: 'auto', width: '100%' }}
+          >
+            <header className="card-header">
+              <p className="card-header-title">{node.label}</p>
+            </header>
+            <section className="card-content">
+              <Math>{node.description}</Math>
+            </section>
+            <header className="card-header">
+              <p className="card-header-title">
+                dependencies: {dependencies.length}
+              </p>
+            </header>
+            <section className="card-content">
+              <ul className="buttons are-small">
+                {dependencies.map(dependency => (
+                  <li
+                    onClick={() => onSelectNode(dependency.uri)}
+                    key={dependency.uri}
+                    className="button is-link is-inverted"
+                  >
+                    {dependency.label}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Statement

src/components/Visualization.tsx

@@ -120,15 +120,15 @@ const Visualization: React.FC<Props> = ({
       select(canvasEl.current).call(
         drag<HTMLCanvasElement, unknown>()
           .clickDistance(2)
-          .on('start', console.log)
+          //.on('start', console.log)
           .on('drag', e => {
             onTransform([
               [1, 0, e.dx],
               [0, 1, e.dy],
               [0, 0, 1],
             ])
-          })
-          .on('end', console.log),
+          }),
+        //.on('end', console.log),
       )
 
       select(canvasEl.current).call(

src/components/VisualizationContainer.tsx

@@ -8,6 +8,7 @@ import { SessionContext } from '../contexts/session'
 import { Grid } from '../helpers/draw'
 import { prune as pruneGraph } from '../algorithms'
 import numeric from 'numeric'
+import Statement from './Statement'
 // import useSimulation from '../hooks/simulation'
 
 const transform = (matrix: number[][], vector: Vector): Vector => {
@@ -222,14 +223,23 @@ const VisualizationContainer: React.FC = props => {
   const grid = transformGrid(matrix, basicGrid)
 
   return (
-    <Visualization
-      graph={transformedLayout}
-      grid={grid}
-      onTransform={handleTransform}
-      onHover={handleHover}
-      onSelectNode={handleSelect}
-      {...props}
-    />
+    <>
+      <Visualization
+        graph={transformedLayout}
+        grid={grid}
+        onTransform={handleTransform}
+        onHover={handleHover}
+        onSelectNode={handleSelect}
+        {...props}
+      />
+
+      {selectedNode && (
+        <Statement
+          node={graph[selectedNode]}
+          onSelectNode={uri => setSelectedNode(uri)}
+        />
+      )}
+    </>
   )
 }
 

src/index.scss

@@ -3,6 +3,7 @@
 @import '~bulma/sass/utilities/_all';
 @import '~bulma/sass/elements/button.sass';
 @import '~bulma/sass/grid/columns.sass';
+@import '~bulma/sass/components/card.sass';
 
 // You can use Bulma variables from here on
 
@@ -11,3 +12,7 @@
 @import '~bulma/sass/layout/hero';
 
 // You can use derived variables from here on
+
+html {
+  overflow-y: hidden;
+}