diff --git a/README.md b/README.md index a1b5eb6..c0ae251 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -### GraphXR Iframe example(V2.8.0) +### GraphXR Iframe example(V2.9.0 beta) Your can try with at first -> Please refer the graphXR.injection.js in tag at first +> Please refer the in tag at first ``` @@ -30,7 +30,7 @@ then add graphXR share link as iframe embedGraphURL. You can change defaultEmbedGraphURL in index.html line 116 ``` -http://localhost:3000?embedGraphURL=https://graphxr.kineviz.com/share/5c633dfe197b00001e855294/VC%20investment%202004-2013/5c65e7be851f2c0036ef27c9 +http://localhost:3000?embedGraphURL=https://graphxrdev.kineviz.com/p/602d2b0787329b003351adee/blank/6033b824378ffc0034884a58/IP-TEST ``` ### 1. ApiCommand @@ -49,7 +49,7 @@ graphXR.injectionApiCommand(':getGraph', iframeElem) ``` graphXR.injectionApiCommand(':getGraphStat', iframeElem) .then((resData) => { - console.warn("Receive getGraphStat:", resData.content) + console.warn("Receive graphStat:", resData.content) }) ``` @@ -67,11 +67,20 @@ graphXR.injectionApiCommand(':clearGraph', iframeElem) ``` graphXR.injectionApiCommand(':selected', iframeElem) .then((resData) => { - console.warn("Receive query data:", resData.content) + console.warn("Receive selected data:", resData.content) +}) +``` + +#### 1.5 get top 200 nodes nearby camera {nodes} + +``` +graphXR.injectionApiCommand(':nearby', iframeElem) +.then((resData) => { + console.warn("Receive nearby data:", resData.content) }) ``` -#### 1.5 query resData.content {nodes:number,edges:number} +#### 1.6 query resData.content {nodes:number,edges:number} ``` graphXR.injectionApiCommand('MATCH (n)-[r]-(m) RETURN * LIMIT 100', iframeElem) @@ -83,23 +92,60 @@ graphXR.injectionApiCommand('MATCH (n)-[r]-(m) RETURN * LIMIT 100', iframeElem) ### 2. Injection codes -#### 2.1 select all +#### 2.1 select all (injectionCode is beta function, so do not recommand use it.) ``` graphXR.injectionApiCommand(':getGraph', iframeElem) .then((resData) => { console.warn("Receive all data:", resData.content) - const {nodes, edges} = resData.content; - - //select all + const {nodes} = resData.content; graphXR.injectionCode(` _GXR.NodesSelectManager.selectWithNodeIds(${JSON.stringify(nodes.map(n => n._GXRID))},'new') ` , iframeElem).then(resData => { - console.warn("Injection success:", resData) + console.warn("Injection select all nodes success:", resData) }) }) ``` +#### 2.2 update twinkled + +``` +graphXR.injectionApiCommand(':getGraph', iframeElem) +.then((resData) => { + console.warn("Receive all data:", resData.content) + const {nodes, edges} = resData.content; + + //update twinkled + let colors =['red','yellow','green',null] + let topNode10 = (nodes ||[]).slice(0,10).map((n,i) =>{ + //will can auto update the props to the node + let otherProps ={_index:i} + return{ + id: n._GXRID, + rate: i%4+1, + color: colors[i%4],//color is null, mean rest to bak + ...otherProps + } + }) + let ignoreTwinkled = true; // skip clear old twinkled + graphXR.injectionApiFunc( + "updateTwinkled", + { nodes: topNode10, ignoreTwinkled }, + iframeElem + ); +}) + +``` + +``` +//clear twinkled + let ignoreTwinkled = false; + graphXR.injectionApiFunc( + "updateTwinkled", + { nodes: [], ignoreTwinkled }, + iframeElem + ); +``` ### 3. event, only support ['change','select'] diff --git a/index.html b/index.html index 577bd3a..d3561ad 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Real Data Notice + Iframe Example @@ -12,7 +12,83 @@ - + + + @@ -21,6 +97,36 @@ +
+
+ +
+
+
RUN
+ ? +
+
+ + + + \ No newline at end of file diff --git a/package.json b/package.json index e030d00..4d1668c 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,15 @@ { - "name": "graphxr-injection", + "name": "@kineviz/graphxr-injection", "version": "0.0.1", "license": "MIT", "preferGlobal": true, + "main": "graphXR.injection.js", + "module": "graphXR.injection.js", + "files": [ + "graphXR.injection.js", + "package.json", + "README.md" + ], "scripts": { "start": "browser-sync start --server --serveStatic --watch" }, diff --git a/types.d.ts b/types.d.ts new file mode 100644 index 0000000..4b8d802 --- /dev/null +++ b/types.d.ts @@ -0,0 +1,38 @@ +/** + * callback type + */ +type callbackType = ( + err: Error | null, + content: any, + message?: string | null | undefined +) => void; + +/** + * Extentd Global Type + */ +type graphXR = { + version: string; + injectionApiFunc: ( + funcName: "updateGraph" | "flyTo" | "updateTwinkled", + params: any, + iframeElement: HTMLElement + ) => Promise; + injectionApiCommand: ( + command: + | ":clearGraph" + | ":getGraphStat" + | ":getGraph" + | ":selected" + | ":nearby" + | "or neo4j query" + | string, + iframeElement: HTMLElement, + params: any + ) => Promise; + injectionOn: ( + eventName: "change" | "select" | "nearby", + callback: callbackType, + iframeElement: HTMLElement, + uniqueName: string + ) => void; +};