improve the readme.md

Kineviz · Feb 22, 2021 · 2c059d2 · 2c059d2
1 parent 0bf6e0d
commit 2c059d2
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 15 deletions.
diff --git 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 <https://kineviz.github.io/graphxr-iframe-example/> at first
 
-> Please refer the graphXR.injection.js in <head> tag at first
+> Please refer the <https://kineviz.github.io/graphxr-iframe-example/graphXR.injection.js> in <head> tag at first
 
 ```
  <script src='graphXR.injection.js'></script>
@@ -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
@@ -4,15 +4,91 @@
 <head>
     <meta charset="utf-8">
     <title>
-        Real Data Notice
+        Iframe Example
     </title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
     <meta name="description" content="">
     <meta name="author" content="Kineviz inc.">
 
     <link rel="shortcut icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
+
+    <style>
+        html,
+        body {
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+         }
+
+        iframe {
+            position: fixed;
+            left: 40%;
+            height: 100%;
+            width: 60%;
+            border: none;
+            overflow: hidden;
+        }
+
+        .header {
+            position: fixed;
+            left: 0;
+            height: 100%;
+            width: 40%;
+            border: none;
+            overflow: hidden;
+        }
+
+             .header > div{
+
+            float:left;
+             }
+
+        .header .code {
+            width: 80%;
+            height: 100%;
+        }
+
+        .header textarea {
+            width: 96%;
+            padding:2%;
+            border-radius: 0px;
+            height: 96%;
+            color: #222222;
+            font-size: 18px;
+        }
+
+        .header .actions{
+            width:18%;
+            padding: 1%;
+            height: 100%;
+        }
+
+        .header .btn {
+            width: 100%;
+            cursor: pointer;
+            text-align: center;
+            height: 60px;
+            line-height: 60px;
+            margin:20px 1%;
+            border-radius: 4px;
+            color: white;
+            background-color:green;
+        }
+
+        .header a.help{
+            display: block;
+            text-align: center;
+            font-size: 32px;
+            color: black;
+            border: none;
+            text-decoration: none;
+            background-color: white;
+        }
+    </style>
+
     <!--Please -->
     <script src='./graphXR.injection.js'></script>
 
@@ -21,6 +97,36 @@
 <body>
 
 
+    <div class="header">
+        <div class="code">
+            <textarea id='code-area'>
+/*
+Create a project ,from Project=>Data, create a view enable share 
+from the project window by clicking on the lock icon
+Get the shared view link, for example, here is a link for VC data set:
+https://graphxr.kineviz.com/share/5c633dfe197b00001e855294/VC%20investment%202004-2013/5c65e7be851f2c0036ef27c9
+
+*/
+let iframeElem = document.getElementById("injection-graphXR-iframe-id");
+
+graphXR.injectionApiCommand(':getGraph', iframeElem)
+.then((resData) => {
+    alert(JSON.stringify(resData,null,2));
+    //please open develop tool and goto console, search with "Receive graphData"
+    console.warn("Receive graphData:", resData.content)
+})
+
+       </textarea>
+        </div>
+        <div class="actions">
+            <div class="btn" onclick="handleClick()" title="run the code"> RUN </div>
+            <a class="help" target="_blank"
+            href="https://github.com/Kineviz/graphxr-iframe-example#1-apicommand" 
+            title="api help"> ? </a>
+         </div>
+    </div>
+
+
 <iframe id="injection-graphXR-iframe-id"  origin="*" > </iframe>
 
 <script id="script" type="text/javascript">
@@ -29,11 +135,21 @@
            let r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
-       let defaultEmbedGraphURL = 'https://localhost:9000/share/5ff65fed62423d3ac8cf991b/blank/600ec8ff9d41f11ae88a9332/Notice'
+       let defaultEmbedGraphURL = 'https://graphxr.kineviz.com/share/5fad3be86fd8dd0068f8c833/Russian%20Troll%20Tweets%20/5fad3cc86fd8dd0068f8c8d4/Russian-troll-tweets'
        let iframe = document.getElementById('injection-graphXR-iframe-id');
        iframe.setAttribute('src', getQueryString('embedGraphURL') || getQueryString('url') || iframe.getAttribute('src') ||  defaultEmbedGraphURL);
    </script>
 
+<script id="script" type="text/javascript">
+    let handleClick = function () {
+        try {
+            eval(document.getElementById("code-area").value);
+        } catch (error) {
+            alert(error.message);
+        }
+    }
+</script>
+
 </body>
 
 </html>
diff --git 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
@@ -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;
+};