Merge branch 'loading-openalex-snapshot' of github.com:gwu-libraries/…

…bookworm into loading-openalex-snapshot

react/package.json

@@ -12,7 +12,10 @@
   },
   "dependencies": {
     "@apollo/client": "^3.10.8",
+    "@graphiql/react": "^0.28.2",
     "axios": "^1.6.8",
+    "d3-hierarchy": "^3.1.2",
+    "elkjs": "^0.9.3",
     "graphql": "^16.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

react/src/components/graph/AuthorshipGraph.tsx

@@ -0,0 +1,104 @@
+import { useMemo, } from "react";
+import ReactFlow, { useNodesState, useEdgesState, MarkerType, useReactFlow } from "reactflow";
+import "reactflow/dist/style.css";
+import WorkNode from "./nodes/WorkNode.tsx";
+import AuthorNode from "./nodes/AuthorNode.tsx";
+import AuthorshipEdge from "./edges/AuthorshipEdge.tsx";
+import { stratify, tree, hierarchy } from 'd3-hierarchy';
+
+
+interface Props {
+  authorshipData: JSON;
+}
+
+const getLayoutedElements = (nodes, edges) => {  
+  const { width, height } = document
+      .querySelector(`[data-id="${nodes[0].id}"]`)
+      ?.getBoundingClientRect() || { width: 100, height: 100 };
+
+  const radius = Math.min(width, height) / 2;
+
+  const g = tree()
+            .size([2 * Math.PI, radius])
+            .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
+
+  const hierarchy = stratify()
+                    .id((node) => node.id)
+                    .parentId((node) => edges.find((edge) => edge.target === node.id)?.source);
+
+  const root = g(hierarchy(nodes));
+  const layout = g.nodeSize([width * 2, height * 2])(root);
+
+  return {
+    nodes: layout
+      .descendants()
+      .map((node) => ({ ...node.data, position: { x: node.x, y: node.y } })),
+    edges,
+  };
+};
+
+function AuthorshipGraph({
+  authorshipData
+}: Props) { 
+
+  const nodeTypes = useMemo(
+    () => ({
+      work: WorkNode,
+      author: AuthorNode,
+    }),
+    []
+  );
+
+  const initialNodes = [];
+  const initialEdges = [];
+
+  for (let i = 0; i <= authorshipData.works.length - 1; i++) {
+    initialNodes.push({
+      id: `work-${authorshipData.works[i].id}`,
+      data: {
+        workData: authorshipData.works[i],
+      },
+      type: "work",
+    });
+
+    initialEdges.push({
+      source: `author-${authorshipData.id}`,
+      target: `work-${authorshipData.works[i].id}`,
+      id: `authorshipedge-${authorshipData.id}-${authorshipData.works[i].id}`,
+      label: "authored",
+      style: {
+        strokeWidth: 4,
+        stroke: "#008000",
+      },
+    });
+  }
+
+  initialNodes.push({
+    id: `author-${authorshipData.id}`,
+    data: {
+      authorData: authorshipData,
+    },
+    type: "author"
+  })
+
+  const layoutedElements = getLayoutedElements(initialNodes, initialEdges);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(layoutedElements.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedElements.edges);
+
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+        nodesDraggable={true}
+        fitView
+      />
+    </div>
+  ); 
+}
+
+export default AuthorshipGraph;

react/src/components/graph/WorkGraph.tsx

@@ -0,0 +1,28 @@
+import { useMemo, } from "react";
+import ReactFlow, { useNodesState, useEdgesState, MarkerType, useReactFlow } from "reactflow";
+import "reactflow/dist/style.css";
+import WorkNode from "./nodes/WorkNode.tsx";
+import AuthorNode from "./nodes/AuthorNode.tsx";
+import AuthorshipEdge from "./edges/AuthorshipEdge.tsx";
+import { stratify, tree, hierarchy } from 'd3-hierarchy';
+
+interface Props {
+  workData: JSON;
+}
+
+function WorkGraph({
+  workData
+}: Props) {
+  const nodeTypes = useMemo(
+    () => ({
+      work: WorkNode,
+      author: AuthorNode,
+    }),
+    []
+  );
+
+  return (<>
+  </>)
+}
+
+export default WorkGraph;

react/src/components/graph/nodes/AuthorDetails.tsx

@@ -1,20 +1,19 @@
 interface Props {
-  name: string;
+  displayName: string;
   orcid: string;
-  openalexId: string;
-  hIndex: number;
-  i10Index: number;
-  citedByCount: number;
+  authorOpenalexId: string;
   worksCount: number;
+  citedByCount: number;
+  lastKnownInstitution: string;
 }
 
 function AuthorDetails({
+  displayName,
   orcid,
-  openalexId,
-  hIndex,
-  i10Index,
-  citedByCount,
+  authorOpenalexId,
   worksCount,
+  citedByCount,
+  lastKnownInstitution,
 }: Props) {
   return (
     <>
@@ -28,15 +27,7 @@ function AuthorDetails({
         </tr>
         <tr className="border border-slate-700">
           <td>OpenAlexId</td>
-          <td>{openalexId}</td>
-        </tr>
-        <tr className="border border-slate-700">
-          <td>h-Index</td>
-          <td>{hIndex}</td>
-        </tr>
-        <tr className="border border-slate-700">
-          <td>i10 Index</td>
-          <td>{i10Index}</td>
+          <td>{authorOpenalexId}</td>
         </tr>
         <tr className="border border-slate-700">
           <td>Cited By Count</td>
@@ -46,6 +37,11 @@ function AuthorDetails({
           <td>Works Count</td>
           <td>{worksCount}</td>
         </tr>
+        <tr className="border border-slate-700">
+          <td>Last Known Institution</td>
+          <td>{lastKnownInstitution}</td>
+        </tr>
+
       </table>
     </>
   );