@graphistry/js-upload-api

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@graphistry/node-api - v5.1.3</title><meta name="description" content="Documentation for @graphistry/node-api - v5.1.3"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@graphistry/node-api - v5.1.3</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1>@graphistry/node-api - v5.1.3 </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography"><img height=48 src="https://hub.graphistry.com/static/assets/images/logo/banner_transparent_colored.png"> <hr> <p><a href="https://graphistry.github.io/graphistry-js/"><img src="https://img.shields.io/badge/docs-latest-brightgreen" alt="Latest docs"></a> <a href="https://www.npmjs.com/package/ient-api"><img src="https://img.shields.io/npm/v/@graphistry/client-api?label=%40graphistry%2Fclient-api&logo=npm" alt="npm"></a> <a href="https://www.npmjs.com/package/@graphistry/client-api-react"><img src="https://img.shields.io/npm/v/@graphistry/client-api?label=%40graphistry%2Fclient-api-react&logo=npm" alt="npm"></a> <img src="https://img.shields.io/github/license/graphistry/graphistry-js" alt="GitHub"></p> <p><img src="https://github.com/graphistry/graphistry-js/workflows/CI/badge.svg" alt="CI main"> <img src="https://github.com/graphistry/graphistry-js/workflows/Audit/badge.svg" alt="Security audit"> <img src="https://github.com/graphistry/graphistry-js/workflows/Storybook/badge.svg" alt="CI docs"></p> <p><a href="https://join.slack.com/t/graphistry-community/shared_invite/zt-53ik36w2-fpP0Ibjbk7IJuVFIRSnr6g"><img src="https://img.shields.io/badge/slack-Graphistry%20chat-yellow.svg?logo=slack"></a> <img src="https://img.shields.io/twitter/follow/graphistry" alt="Twitter Follow"></p> <hr> <a href="#graphistryjs" id="graphistryjs" style="color: inherit; text-decoration: none;"> <h1>GraphistryJS</h1> </a> <a href="#web-libraries-for-uploading-and-embedding-graph-visualizations" id="web-libraries-for-uploading-and-embedding-graph-visualizations" style="color: inherit; text-decoration: none;"> <h2>Web libraries for uploading and embedding graph visualizations</h2> </a> <ul> <li><a href="projects/client-api">@graphistry/client-api</a> - Pure JS API for manipulating Graphistry visualizations <ul> <li><a href="https://graphistry.github.io/graphistry-js/?path=/story/graphistry-vanilla-js">Storybook</a></li> </ul> </li> <li><a href="projects/client-api-react">@graphistry/client-api-react</a> - Graphistry vizualization React component<ul> <li><a href="https://graphistry.github.io/graphistry-js/?path=/story/graphistry-react-style--predefined-dataset">Storybook</a></li> </ul> </li> <li><a href="projects/node-api">@graphistry/node-api</a> - Node bindings to upload into Graphistry ecosystem</li> <li><a href="projects/js-upload-api">@graphistry/js-upload-api</a> - Pure JS library for graph upload</li> <li><a href="projects/cra-test">@graphistry/cra-test</a> - Example react app using these libraries</li> </ul> <p>Dev guide for contributors: <a href="./DEVELOP.md">DEVELOP.md</a></p> <p><br><br></p> <a href="#graphistry---visual-graph-intelligence" id="graphistry---visual-graph-intelligence" style="color: inherit; text-decoration: none;"> <h1>Graphistry - Visual Graph Intelligence</h1> </a> <p>GPU and AI acceleration for interactive visualization of large graphs. Used accross multiple industries for security, fraud, supply chain, social media analysis and more. Graphistry supports live explorations of large datasets by running server side GPUs to stream into a custom WebGL rendering engine. This enables graph metrics and dynamic layout of up to 8MM nodes and edges at a time, most older client GPUs smoothly support somewhere between 100K and 1MM elements.</p> <p>You can </p> <ul> <li><a href="https://www.graphistry.com/get-started">Start with a free Graphistry Hub account</a></li> <li><a href="https://github.com/graphistry/pygraphistry">Create Python notebooks with PyGraphistry</a></li> <li><a href="https://github.com/graphistry/graph-app-kit">Build StreamLit dashboards in Graph-App-Kit</a></li> <li><a href="https://hub.graphistry.com/docs/api/">Directly interact with Graphistry REST APIs</a></li> <li><a href="https://www.graphistry.com/get-started">Launch your own Graphistry server with just a few clicks</a></li> </ul> <p><br><br></p> <a href="#javascript-clients-vanilla-js-react-amp-node" id="javascript-clients-vanilla-js-react-amp-node" style="color: inherit; text-decoration: none;"> <h1>JavaScript clients: Vanilla JS, React, & Node</h1> </a> <a href="#graphistryclient-api" id="graphistryclient-api" style="color: inherit; text-decoration: none;"> <h2>@graphistry/client-api</h2> </a> <img height=48 src="http://3con14.biz/code/_data/js/intro/js-logo.png"/> <p>Pure JavaScript API for manipulating Graphistry visualizations in the browser with async-friendly APIs</p> <pre><code class="language-bash"><span class="hl-0">npm install </span><span class="hl-1">'@graphistry/client-api'</span> </code></pre> <pre><code class="language-javascript"><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-3">graphistryJS</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-1">"@graphistry/client-api"</span><span class="hl-0">; </span><span class="hl-4">// + variants for different bundling formats</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">g</span><span class="hl-0"> = </span><span class="hl-7">graphistryJS</span><span class="hl-0">(</span><span class="hl-3">elt</span><span class="hl-0">);</span> </code></pre> <p>See <a href="projects/client-api/README.md">@graphistry/client-api project</a> and <a href="https://graphistry.github.io/graphistry-js/?path=/story/graphistry-vanilla-js">interactive storybook docs</a></p> <p><br><br></p> <a href="#graphistryclient-api-react" id="graphistryclient-api-react" style="color: inherit; text-decoration: none;"> <h2>@graphistry/client-api-react</h2> </a> <img height=48 src="https://raw.githubusercontent.com/jalbertsr/logo-badge-images/master/img/react_logo.png"/> <p>React component for manipulating Graphistry visualizations in the browser</p> <pre><code class="language-bash"><span class="hl-0">npm install </span><span class="hl-1">'@graphistry/client-api-react'</span> </code></pre> <pre><code class="language-javascript"><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-3">Graphistry</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-1">'@graphistry/client-api-react'</span><span class="hl-0">;</span><span class="hl-1">` // + variants for different bundling formats</span><br/><span class="hl-1"><Graphistry dataset="myDatasetID" /></span> </code></pre> <p>See <a href="projects/client-api-react/README.md">@graphistry/client-api-react project</a>, <a href="https://graphistry.github.io/graphistry-js/">interactive storybook docs</a>, and <a href="projects/cra-test/README.md">Create React App project sample</a></p> <p><br><br></p> <a href="#graphistrynode-api" id="graphistrynode-api" style="color: inherit; text-decoration: none;"> <h2>@graphistry/node-api</h2> </a> <img height=48 src="https://raw.githubusercontent.com/caiogondim/javascript-server-side-logos/master/node.js/standard/454x128.png" /> <p><strong>@graphistry/node-api</strong>: Node.js bindings, including optional Typescript support, for creating visualizations and generating URLs</p> <pre><code class="language-bash"><span class="hl-0">npm install </span><span class="hl-1">'@graphistry/node-api'</span> </code></pre> <pre><code class="language-javascript"><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-3">Client</span><span class="hl-0">, </span><span class="hl-3">Dataset</span><span class="hl-0">, </span><span class="hl-3">EdgeFile</span><span class="hl-0">, </span><span class="hl-3">NodeFile</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-1">"@graphistry/node-api"</span><span class="hl-0">;</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">client</span><span class="hl-0"> = </span><span class="hl-5">new</span><span class="hl-0"> </span><span class="hl-7">Client</span><span class="hl-0">(</span><span class="hl-3">user</span><span class="hl-0">, </span><span class="hl-3">pass</span><span class="hl-0">);</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">ds</span><span class="hl-0"> = </span><span class="hl-5">new</span><span class="hl-0"> </span><span class="hl-7">Dataset</span><span class="hl-0">(</span><span class="hl-3">bindings</span><span class="hl-0">, </span><span class="hl-5">new</span><span class="hl-0"> </span><span class="hl-7">EdgeFile</span><span class="hl-0">(</span><span class="hl-3">edges</span><span class="hl-0">));</span><br/><span class="hl-2">await</span><span class="hl-0"> </span><span class="hl-3">ds</span><span class="hl-0">.</span><span class="hl-7">upload</span><span class="hl-0">(</span><span class="hl-3">client</span><span class="hl-0">);</span> </code></pre> <p>See <a href="projects/node-api/README.md">@graphistry/node-api project</a> and <a href="https://graphistry.github.io/graphistry-js/node-tsdocs/">API docs & examples</a></p> <p><br><br></p> <a href="#graphistry39s-architecture" id="graphistry39s-architecture" style="color: inherit; text-decoration: none;"> <h1>Graphistry's Architecture</h1> </a> <p>You can think of Graphistry as a live data version of Google Maps.</p> <p>Clientside (client-api & client-api-react):</p> <ul> <li>Graphistry runs as an embedded iframe that streams live with your Graphistry server</li> <li>GraphistryJS runs as a lightweight JavaScript library in your application. It simplifies creating the iframe, uploading data for visualization as needed, and sending the iframe messages to control style and interactions</li> <li>GraphistryJS can be used to upload and view new visualizations, or run sessions for existing uploads, including those from other clients</li> <li>User and GraphistryJS interactions will transparently leverage the Graphistry server as needed, such as for loading a graph, running analytics, drilling into data, and saving settings</li> </ul> <p>Serverside (node-api):</p> <ul> <li>GraphistryJS can be used to upload new files and stitch them into graph datasets</li> <li>The resulting server item IDs can be sent to browsers for embedding either as iframe URLs or GraphistryJS IDs, or additional server-side manipulations</li> </ul> <a href="#decoupling-uploads-from-downloads" id="decoupling-uploads-from-downloads" style="color: inherit; text-decoration: none;"> <h2>Decoupling uploads from downloads</h2> </a> <p>To support server-acceleration and fast interactions, Graphistry decouples uploads from downloads</p> <a href="#uploads" id="uploads" style="color: inherit; text-decoration: none;"> <h3>Uploads:</h3> </a> <ul> <li>Multiple upload formats are possible, but we recommend parquet & arrow for the best performance and high reliability</li> <li>Uploads are possible from browser clients (CSP/CORS support), but we generally recommend server<>server communications for better speed</li> <li>Different datasets may reuse the same file. Datasets are generally just a small amount of metadata, so for best performance, try to upload new datasets for existing files, instead of reuploading the files as well.</li> </ul> <a href="#downloads" id="downloads" style="color: inherit; text-decoration: none;"> <h3>Downloads:</h3> </a> <ul> <li>Client sessions connect to previously uploaded datasets and their files</li> <li>Client session configurations can override settings initially defined during the upload phase</li> </ul> <a href="#security" id="security" style="color: inherit; text-decoration: none;"> <h2>Security</h2> </a> <ul> <li>You can configure your Graphistry server to run as http, https, or both</li> <li>Uploads require authentication<ul> <li>The <code>node-api</code> client already uses the new JWT-based protocol ("API 3")</li> <li>Deprecated: The clientside JavaScript convenience APIs still use the deprecrated "API 1" protocol (key-based), which lacks JWT-based authentication and authorization<ul> <li>We recommend clients instead use <code>fetch</code> or other HTTP callers to directly invoke the REST API: See how the <code>node-api</code> performs it</li> <li>The client JavaScript APIs will updated to the new JWT method alongside recent CORS and SSO updates; contact staff if you desire assistance</li> </ul> </li> </ul> </li> <li>Sessions are based on unguessable web keys: sharing a secret ID means sharing read access</li> <li>Datasets are immutable and thus their integrity is safe for sharing, while session state (e.g., filters) are writable: share a copy when in doubt</li> </ul> </div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-class"><a href="classes/Client.html" class="tsd-kind-icon">Client</a></li><li class="tsd-kind-class"><a href="classes/ClientPKey.html" class="tsd-kind-icon">ClientPKey</a></li><li class="tsd-kind-type-alias"><a href="modules.html#ClientType" class="tsd-kind-icon">Client<wbr/>Type</a></li><li class="tsd-kind-class"><a href="classes/Dataset.html" class="tsd-kind-icon">Dataset</a></li><li class="tsd-kind-class"><a href="classes/EdgeFile.html" class="tsd-kind-icon">Edge<wbr/>File</a></li><li class="tsd-kind-class"><a href="classes/File.html" class="tsd-kind-icon">File</a></li><li class="tsd-kind-enum"><a href="enums/FileType.html" class="tsd-kind-icon">File<wbr/>Type</a></li><li class="tsd-kind-type-alias"><a href="modules.html#Mode" class="tsd-kind-icon">Mode</a></li><li class="tsd-kind-type-alias"><a href="modules.html#ModeAction" class="tsd-kind-icon">Mode<wbr/>Action</a></li><li class="tsd-kind-type-alias"><a href="modules.html#ModeActionRaw" class="tsd-kind-icon">Mode<wbr/>Action<wbr/>Raw</a></li><li class="tsd-kind-class"><a href="classes/NodeFile.html" class="tsd-kind-icon">Node<wbr/>File</a></li><li class="tsd-kind-class"><a href="classes/Privacy.html" class="tsd-kind-icon">Privacy</a></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li><li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="assets/main.js"></script></body></html>