Global

Members

# NodeFile

Class wrapping @graphistry/js-upload-api::Client for client->server File and Dataset uploads.

Source:

Methods

# addExclusion(expr)

Add an exclusion to the visualization with the given expression

Parameters:
Name Type Description
expr string

An expression using the same language as our in-tool exclusion and filter panel

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(addExclusion('point:degree > 0'))
    .subscribe();

# addExclusions(expr)

Add an exclusion to the visualization with the given expression

Parameters:
Name Type Description
expr array

Expressions using the same language as our in-tool exclusion and filter panel

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(addExclusions(['point:degree > 0'], ['edge:value > 0']))
    .subscribe();

# addFilter(expr)

Add a filter to the visualization with the given expression

Parameters:
Name Type Description
expr string

An expression using the same language as our in-tool exclusion and filter panel

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(
         addFilter('point:degree > 0'),
         addFilter('edge:value > 0'))
    .subscribe();

# addFilter(expr)

Add filters to the visualization with the given expression

Parameters:
Name Type Description
expr array

An array of expressions using the same language as our in-tool exclusion and filter panel

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(addFilters(['point:degree > 0', 'edge:value > 0'])));
    .subscribe();

# (static) autocenter(percentile, cbopt)

Center the view of the graph

Parameters:
Name Type Attributes Description
percentile number

Controls sensitivity to outliers

cb function <optional>

Callback function of type callback(error, result)

Source:
To Do:
  • Implement this function
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(autocenter(.90))
    .subscribe();

# encodeAxis()

Add an axis to the graph

Parameters:
Type Description
Object
Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

# encodeColor(graphTypeopt, attributeopt, variationopt, colorsOrMappingopt)

Change colors based on an attribute. Pass null for attribute, mapping to clear.

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

attribute Attribute <optional>

name of data column, e.g., 'degree'

variation Variant <optional>

If there are more bins than colors, use 'categorical' to repeat colors and 'continuous' to interpolate

colorsOrMapping any <optional>

array of color name or hex codes, or object mapping

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeColor('point', 'degree', 'categorical', ['black', 'white']))
    .subscribe();

# encodeDefaultEdgeIcons(array:)

Single-argument edge default icons (user-unset) based on an attribute for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultEdgeIcons())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultEdgeIcons('some_attr'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultEdgeIcons(['some_attr', some_mapping]))
    .subscribe();

# encodeDefaultIcons(graphTypeopt, attributeopt, objectopt)

Change default (user-unset) icons based on an attribute. Pass undefined for attribute, mapping to clear.

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

attribute Attribute <optional>

name of data column, e.g., 'icon'

object Mapping <optional>

optional value mapping, e.g., {categorical: {fixed: {ip: 'laptop', alert: 'alaram'}, other: 'question'}}

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultIcons('point', 'icon', 'some_attr'))
    .subscribe();

# encodeDefaultPointIcons(array:)

Single-argument point default icons (user-unset) based on an attribute for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultPointIcons())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultPointIcons('some_attr'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeDefaultPointIcons(['some_attr', some_mapping]))
    .subscribe();

# encodeEdgeColor(array:)

Single-argument version of encodeColor used for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, 'categorical' or 'continuous', [ str ] or mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeEdgeColor())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeEdgeColor('prebaked_colors_col'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeEdgeColor(['degree', 'categorical', ['black', 'white']]))
    .subscribe();

# encodeEdgeIcons(array:)

Single-argument edge change icons based on an attribute for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeEdgeIcons())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeEdgeIcons('some_attr'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeEdgeIcons(['some_attr', some_mapping]))
    .subscribe();

# encodeIcons(graphTypeopt, attributeopt, objectopt)

Change icons based on an attribute. Pass undefined for attribute, mapping to clear.

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

attribute Attribute <optional>

name of data column, e.g., 'icon'

object Mapping <optional>

optional value mapping, e.g., {categorical: {fixed: {ip: 'laptop', alert: 'alaram'}, other: 'question'}}

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeIcons('point', 'icon', 'some_attr'))
    .subscribe();

# encodePointColor(array:)

Single-argument version of encodeColor used for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, 'categorical' or 'continuous', [ str ] or mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointColor())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointColor('prebaked_colors_col'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointColor(['degree', 'categorical', ['black', 'white']]))
    .subscribe();

# encodePointIcons(array:)

Single-argument point change icons based on an attribute for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointIcons())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointIcons('some_attr'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointIcons(['some_attr', some_mapping]))
    .subscribe();

# encodePointSize(array:)

Single-argument point change size based on an attribute for React props

Parameters:
Name Type Description
array: Array

undefined to reset; str to use directly; [str attr, mapping]

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointSize())
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointSize('some_attr'))
    .subscribe();
GraphistryJS(document.getElementById('viz'))
    .pipe(encodePointSize(['some_attr', some_mapping]))
    .subscribe();

# encodeSize(graphTypeopt, attributeopt)

Change size based on an attribute. Pass null for attribute, mapping to clear.

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point'

attribute Attribute <optional>

name of data column, e.g., 'degree'

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(encodeSize('point', 'community_infomap'))
    .subscribe();

# getCurrentWorkbook(cbopt)

Read the workbook ID

Parameters:
Name Type Attributes Description
cb function <optional>

Callback function of type callback(error, result)

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(getCurrentWorkbook())
    .subscribe(function (workbook) {
        alert('id: ' + workbook.id)
    });

# labelUpdates(cacheopt) → {Observable.<Observable.<LabelEvent>>}

Get or create an Observable stream of all label updates from the visualization.

The Observable returned by this method emits inner Observables, where each inner Observable is tied to the lifetime of the label for which it was created.

For each label rendered in the visualization, the Observable returned by this method will create and emit a new inner Observable. The inner Observable will emit events when the label changes. For example, if the user clicks on the label, or the label changes position because of a pan/zoom, the inner Observable will emit an event.

The inner Observable for a label will complete if the label is removed from the screen.

Parameters:
Name Type Attributes Description
cache object <optional>

An optional cache object (empty object) to use for caching label updates across subscriptions.

Source:
Returns:

An Observable of inner {Observables}, where each inner Observable represents the lifetime of a label in the visualization.

Type
Observable.<Observable.<LabelEvent>>
Examples
GraphistryJS(document.getElementById('viz'))
    .pipe(
         labelUpdates(),
         tap(({ id, tag, pageX, pageY }) => {
                // prints messages like
                // > 'Label 13 added at (200, 340)'
                // > 'Label 74 updated at (750, 100)'
                console.log(`Label ${id} ${tag} at (${pageX}, ${pageY})`);
         }),
         takeLast(1),
         tap(function ({ id, pageX, pageY }) {
                console.log(`Label ${id} removed at (${pageX}, ${pageY})`);
         });
    })
    .subscribe();
var cache = {};
//first use
GraphistryJS(document.getElementById('viz'))
   .pipe(labelUpdates(cache))
   .subscribe();
//second time reuse the cache to avoid excess event queue slowdowns 
GraphistryJS(document.getElementById('viz'))
     .pipe(labelUpdates(cache))
    .subscribe()

# (private) makeCaller(modelName, args)

Serialization and coordination for formatting postMessage API calls, used with GraphistryState Observables

Parameters:
Name Type Description
modelName string

'view' or 'workbook'

args any

anything to pass as falcor .call(...args)

Source:
Returns:

GraphistryState Observable

Example
GraphistryJS(document.getElementById('viz'))
   .pipe(
         makeCaller('view', 'tick', []),
         delay(2000),
         makeCaller('view', 'tick', []))
   .subscribe();

# (private) makeCallerJSON(modelName, args)

Serialization and coordination for formatting postMessage API calls, used with GraphistryState Observables. Adds json desrialization to makeCaller.

Parameters:
Name Type Description
modelName string

'view' or 'workbook'

args any

anything to pass as falcor .call(...args)

Source:
Returns:

GraphistryState Observable

Example
GraphistryJS(document.getElementById('viz'))
   .pipe(
         makeCaller('view', 'tick', []),
         delay(2000),
         makeCaller('view', 'tick', []))
   .subscribe();

# makeGetter(modelName, …args)

Serialization and coordination for formatting postMessage API calls, used with GraphistryState Observable

Parameters:
Name Type Attributes Description
modelName string
args any <repeatable>

anything to pass as falcor .get(...args)

Source:
Returns:

GraphistryState Observable

# makeGetterJSON(modelName, …args)

Serialization and coordination for formatting postMessage API calls, used with GraphistryState Observable. Adds json desrialization to makeGetter.

Parameters:
Name Type Attributes Description
modelName string
args any <repeatable>
Source:
Returns:

GraphistryState Observable

# (private) makeSetter(modelName, value)

Serialization and coordination for formatting postMessage API calls, used with GraphistryState Observables

Parameters:
Name Type Description
modelName string

'view' or 'workbook'

value string

$value path/value pair

Source:
Returns:

GraphistryState Observable

Example
GraphistryJS(document.getElementById('viz'))
   .pipe(makeSetter('view', $value('viz.width', 500)))
   .subscribe();

# (private) makeSetterWithModel(modelName, value)

Serialization and coordination for formatting postMessage API calls, used with GraphistryState Observables

Parameters:
Name Type Description
modelName string

'view' or 'workbook'

value string

$value path/value pair

Source:
Returns:

GraphistryState Observable

Example
GraphistryJS(document.getElementById('viz'))
   .pipe(makeSetterWithModel('view', model => myValuesFromModel(model)))
   .subscribe();

# resetColor(graphTypeopt)

Reset color encoding

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
   .pipe(resetColor('point'))
   .subscribe();

# resetEdgeColor() → {GraphistryState}

Reset the edge color encoding

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
  .pipe(resetEdgeColor())
  .subscribe();

# resetEdgeIcons() → {GraphistryState}

Reset the edge icon encoding

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
.pipe(resetEdgeIcons())
.subscribe();

# resetIcons(graphTypeopt) → {GraphistryState}

Reset the icon encoding

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
 .pipe(resetIcons())
 .subscribe();

# resetPointColor() → {GraphistryState}

Reset the point color encoding

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
   .pipe(resetPointColor())
   .subscribe();

# resetPointIcons() → {GraphistryState}

Reset the point icon encoding

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
 .pipe(resetPointIcons())
 .subscribe();

# resetPointSize() → {GraphistryState}

Reset the point size encoding

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
.pipe(resetPointSize())
.subscribe();

# resetSize(graphTypeopt) → {GraphistryState}

Reset the size encoding

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point'

Source:
Returns:

A GraphistryState Observable that emits the result of the operation

Type
GraphistryState
Example
GraphistryJS(document.getElementById('viz'))
  .pipe(resetSize())
  .subscribe();

# saveWorkbook()

Save the current workbook. A saved workbook will persist the analytics state of the visualization, including active filters and exclusions

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(saveWorkbook())
    .subscribe();

# subscribeLabels() → {Subscription}

Subscribe to label change and exit events

Parameters:
Type Description
Object

An Object with onChange and onExit callbacks

Source:
Returns:

A Subscription that can be used to stop reacting to label updates

Type
Subscription
Example
var sub = graphistryJS(document.getElementById('viz'))
   .pipe(subscribeLabels({
      onChange: (label) => {
        console.log(`Label ${label.id} changed at (${label.pageX}, ${label.pageY})`);
     },
    onExit: (label) => {
       console.log(`Label ${label.id} removed at (${label.pageX}, ${label.pageY})`);
   }
}));
setTimeout(() => { sub.unsubscribe(); }, 5000);

# toggleHistograms(turnOnopt)

Toggle histogram panel

Parameters:
Name Type Attributes Description
turnOn boolean <optional>

Whether to make panel visible

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(toggleHistograms(true))
    .subscribe();

# toggleInspector(turnOnopt)

Toggle inspector panel

Parameters:
Name Type Attributes Description
turnOn boolean <optional>

Whether to make panel visible

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(toggleInspector(true))
    .subscribe();

# togglePanel(panelopt, turnOnopt)

Toggle a top menu panel on/off. If panel is an array, interpret as [panel, turnOn]. Only one panel is turned on; the rest are turned off.

Parameters:
Name Type Attributes Description
panel string <optional>

Name of panel: filters, exclusions, scene, labels, layout

turnOn boolean <optional>

Whether to make panel visible, or turn all off

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(togglePanel('filters', true));
    .subscribe();

# toggleTimebars(turnOnopt)

Toggle timebars panel

Parameters:
Name Type Attributes Description
turnOn boolean <optional>

Whether to make panel visible

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .pipe(toggleTimebars(true));
    .subscribe();

# toogleToolbar(show)

Hide or Show Toolbar UI

Parameters:
Name Type Description
show boolean

Set to true to show toolbar, and false to hide toolbar.

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
<button onclick="g.pipe(toggleToolbar(false)).subcribe()">Hide toolbar</button>
<button onclick="g.pipe(toggleToolbar(true)).subscribe()">Show toolbar</button>

# updateSetting(name, val)

Modify a settings value in the visualization

Available Settings Value Type
showToolbar boolean
pruneOrphans boolean
showArrows boolean
background color as hex or rgba string
edgeOpacity number (0 to 1)
edgeSize number (0.1 to 10)
edgeCurvature number (0.1 to 1)
pointOpacity number (0 to 1)
pointSize number (0.1 to 10)
neighborhoodHighlight string ("incoming", "outgoing", "both", "none")
neighborhoodHighlightHops uint
zoom uint
center const 0
labelOpacity boolean
labelEnabled boolean
labelPOI boolean
labelLabelPOI boolean
labelHighlightEnabled boolean
labelInspectorEnabled boolean
labelShowActions boolean
labelColor color as hex or rgba string
labelBackground color as hex or rgba string
precisionVsSpeed int (-5 to +5)
gravity number (0 to 10)
scalingRatio number (0 to 10)
edgeInfluence number (0 to 10)
strongGravity boolean
dissuadeHubs boolean
linLog boolean
lockedX boolean
lockedY boolean
lockedR boolean
Parameters:
Name Type Description
name string

the name of the setting to change

val string

the value to set the setting to.

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
graphistryJS(document.getElementById('viz'))
    .pipe(updateSetting('background', 'red'))
    .subscribe();

# updateZoom(level)

Update the camera zoom level

Parameters:
Name Type Description
level number

Controls how far to zoom in or out.

Source:
Returns:

GraphistryState A GraphistryState Observable that emits the result of the operation

Example
graphistryJS(document.getElementById('viz'))
    .pipe(updateZoom(2), delay(2000), updateZoom(0.5))
    .subscribe();