improved dpid canvas splay

desci-nodes/getDpid.ts

@@ -7,6 +7,9 @@ import {
     getNodeText
  } from '../utils/canvas-util'
 
+
+
+
 export const getDpid = async function () {
     console.log('this', this)
 		if (this.unloaded) return
@@ -45,18 +48,105 @@ export const getDpid = async function () {
 				}
 			)
 			try {
-				const json = await requestUrl(`http://beta.dpid.org/${nodeText}?jsonld`)
+				const res = await requestUrl(`http://beta.dpid.org/${nodeText}?jsonld`)
-				console.log('json: ', json)
+				console.log(res.json)
-				const ipfsFetchNode = createNode(canvas, created,
+				const metadata = res.json['@graph'].filter((leaf:any) => {
+					if (leaf['@id'] === './') {
+						return true
+					}
+					if (leaf['@id'] === 'ro-crate-metadata.json') {
+						return true
+					}
+					if (leaf['@type'] === 'person') {
+						return true
+					}
+				})
+				const metadataNode =createNode(canvas, created,
 					{
-						text: `${JSON.stringify(json)}`,
+						text: `${JSON.stringify(
+							res.json['@graph'].find((leaf:any)=> {
+								return leaf['@id'] === 'ro-crate-metadata.json'
+							})
+						)}`,
 						size: { height: placeholderNoteHeight }
 					},
 					{
 						color: assistantColor,
 						chat_role: 'assistant'
-					}
+					},	
+					{x: -400, y:0}
 				)
+				const homeNode =createNode(canvas, created,
+					{
+						text: `${JSON.stringify(
+							res.json['@graph'].find((leaf:any)=> {
+								return leaf['@id'] === './'
+							})
+						)}`,
+						size: { height: placeholderNoteHeight }
+					},
+					{
+						color: assistantColor,
+						chat_role: 'assistant'
+					},	
+				)
+				const rootNode =createNode(canvas, created,
+					{
+						text: `${JSON.stringify(
+							res.json['@graph'].find((leaf:any)=> {
+								return leaf['@id'] === './root'
+							})
+						)}`,
+						size: { height: placeholderNoteHeight }
+					},
+					{
+						color: assistantColor,
+						chat_role: 'assistant'
+					},	
+					{x: 400, y:0}
+				)
+
+				res.json['@graph'].filter((leaf:any) => {
+					return leaf['@type'] === 'Person'
+				}).forEach((leaf:any, i) => {
+					const ipfsFetchNode = createNode(canvas, homeNode,
+						{
+							text: `${JSON.stringify(leaf)}`,
+							size: { height: placeholderNoteHeight }
+						},
+						{
+							color: assistantColor,
+							chat_role: 'assistant'
+						},
+						{x: 0, y:-100}
+					)
+				})
+				res.json['@graph'].filter((leaf:any) => {
+					if (leaf['@id'] === './root') return false
+					switch (leaf['@type']) {
+						case 'CreativeWork':
+							return true
+						case 'Dataset':
+							return true
+						case 'WebSite':
+							return true
+						default:
+							return false
+					}
+				}).forEach((leaf:any, i) => {
+					const ipfsFetchNode = createNode(canvas, rootNode,
+						{
+							text: `${JSON.stringify(leaf)}`,
+							size: { height: placeholderNoteHeight }
+						},
+						{
+							color: assistantColor,
+							chat_role: 'assistant'
+						},
+						{x: 0, y:-100}
+					)
+				})
+					
 
 			} catch (e) {
 				created.setText(`error :( ${e}`)

utils/canvas-util.ts

@@ -109,8 +109,11 @@ export const createNode = (
 	canvas: Canvas,
 	parentNode: CanvasNode,
 	nodeOptions: CreateNodeOptions,
-	nodeData?: Partial<AllCanvasNodeData>
+	nodeData?: Partial<AllCanvasNodeData>,
+	offset?: {x: number, y: number}
 ) => {
+
+	offset = offset ? offset : {x:0, y:0}
 	if (!canvas) {
 		throw new Error('Invalid arguments')
 	}
@@ -127,14 +130,14 @@ export const createNode = (
 	const priorSibling = siblings[siblings.length - 1]
 
 	// Position left at right of prior sibling, otherwise aligned with parent
-	const x = siblingsRight ? siblingsRight + newNoteMargin : parentNode.x
+	const x = siblingsRight ? siblingsRight + newNoteMargin : parentNode.x + offset.x
 
 	// Position top at prior sibling top, otherwise offset below parent
 	const y = (priorSibling
 		? priorSibling.y
 		: (parentNode.y + parentNode.height + newNoteMargin))
 		// Using position=left, y value is treated as vertical center
-		+ height * 0.5
+		+ height * 0.5 - offset.y
 
 	const newNode = canvas.createTextNode(
 		{