Advanced Usage

Once initialised, the widget emits interactive events that can be called by your site using global functions

The following are the functions emitted by the widget.

Function	Description
functionMap_getGraphData	On load, this function will be called supplied with the graph data in this listed structure
functionMap_getSelectedEntityId	On click of any entity in the graph, this function will be called supplied with the id of the respective entity
functionMap_getSelectedRelationshipId	On click of any relationship in the graph, this function will be called supplied with the id of the respective relationship

Add Global Function names to the Widget Props

widget-props.js
const widgetProps = {
  key: CLIENT_KEY,
  parentElementSelector: ELEMENT_SELECTOR,

  // Add these to your Widget Props
  functionMap_getGraphData: "hswidget_handleShowGraphData",
  functionMap_getSelectedEntityId: "hswidget_handleShowEntityId",
  functionMap_getSelectedRelationshipId: "hswidget_handleShowRelationshipId",
};

Replace hswidget_handleShowGraphData, hswidget_handleShowEntityId and hswidget_handleShowRelationshipId with the name of your global functions. Having a prefix of hswidget_ is recommended.

Create your Global Functions

Javascript
React

index.html
<html>
  <head></head>
  <body>
    <script type="module">
      import { widgetProps } from "./src/data/widget-props.js";

      const graphData = document.getElementById("graphData");
      const entity = document.getElementById("entity");
      const relationship = document.getElementById("relationship");

      window.hswidget_handleShowGraphData = function (data) {
        graphData.innerText = data.graphType;
      };

      window.hswidget_handleShowGraphData = function (id) {
        entity.innerText = id;
      };

      window.hswidget_handleShowGraphData = function (id) {
        relationship.innerText = id;
      };

      /* ... widget initialisation script */
    </script>

    <div>
      <div id="hsWidget"></div>
      <ul>
        <li id="graphData"></li>
        <li id="entity"></li>
        <li id="relationship"></li>
      </ul>
    </div>
  </body>
</html>

Create a useGlobalFunctionHandler hook that holds your site's Global Functions.
Each function should be accompanied by a state that will be updated based on the interaction with the graph widget.

use-global-function-handler.tsx
import { useState, useEffect } from "react";

// Custom hook to handle global function calls
export const useGlobalFunctionHandler = () => {
  const [graphData, setGraphData] = useState(null);
  const [selectedEntityId, setSelectedEntityId] = useState(null);
  const [selectedRelationshipId, setSelectedRelationshipId] = useState(null);

  useEffect(() => {
    (window as any).hswidget_handleShowGraphData = (data: any) => {
      setGraphData(data);
    };

    (window as any).hswidget_handleShowEntityId = (id: any) => {
      setSelectedEntityId(id);
    };

    (window as any).hswidget_handleShowRelationshipId = (id: any) => {
      setSelectedRelationshipId(id);
    };

    return () => {
      // Implement cleanup if necessary
    };
  }, []);

  return { graphData, selectedEntityId, selectedRelationshipId };
};

Use the useGlobalFunctionHandler hook in your component:

app.tsx
import { useState, useEffect } from "react";
import { useGlobalFunctionHandler } from "./hooks/use-global-function-handler";

// Custom hook to handle global function calls
export const App = () => {
  const { graphData, selectedEntityId, selectedRelationshipId } =
    useGlobalFunctionHandler();

  //
  // ... widget initialisation script
  //

  return (
    <div>
      <ul>
        <li>{`Graph Type: ${graphData.graphType}`}</li>
        <li>{`Last Selected Entity: ${selectedEntityId ?? "-"}`}</li>
        <li>{`Last Selected Relationship: ${
          selectedRelationshipId ?? "-"
        }`}</li>
      </ul>
    </div>
  );
};

Endpoint Data
Your Own Data

widget-update-demo.js
import {
  GraphData,
  WidgetProps,
  WidgetParametersEndpointData,
  HSWidget,
} from "./types";

const widgetProps: WidgetProps = {
  key: "client-key-001",
  parentElementSelector: "#hs-graphs",
};

const widgetParametersRadial: WidgetParametersEndpointData = {
  graphType: "radial",
  datasets: ["CM"],
  entities: [{ dataset: "CM", entityId: "xyz-001" }],
  degree: 1,
};

const widgetParametersInterconnect: WidgetParametersEndpointData = {
  graphType: "interconnect",
  datasets: ["CM"],
  entities: [
    { dataset: "CM", entityId: "xyz-001" },
    { dataset: "CM", entityId: "aaa-999" },
  ],
  degree: 2,
};

// ... Widget Initialisation script

const widget = new hs_widget(widgetProps);

// use the drawGraphWithEndpointData method to generate a radial graph using API data
widget.drawGraphWithEndpointData(widgetParametersRadial);

// ... some logic before calling an update to the graph visualisation

// update the graph to an interconnect graph
widget.updateGraphWithEndpointData(widgetParametersInterconnect);

widget-update-demo.js
import { radialGraphData, interconnectGraphData } from "./data";
import {
  GraphData,
  WidgetProps,
  WidgetParametersCustomData,
  HSWidget,
} from "./types";

const widgetProps: WidgetProps = {
  key: "client-key-001",
  parentElementSelector: "#hs-graphs",
};

const widgetParametersRadial: WidgetParametersCustomData = {
  graphType: "radial",
};

const widgetParametersInterconnect: WidgetParametersCustomData = {
  graphType: "interconnect",
};

// ... Widget Initialisation script

const widget: HSWidget = new hs_widget(widgetProps);

// use the drawGraphWithCustomData method to generate a radial graph using JSON data
widget.drawGraphWithCustomData(widgetParametersRadial, radialGraphData);

// ... some logic before calling an update to the graph visualisation

// update the graph to an interconnect graph
widget.updateGraphWithCustomData(
  widgetParametersInterconnect,
  interconnectGraphData
);

Advanced Usage

Widget Functions

Updating the Graph Visualisation using Widget Methods

Widget Functions​

Updating the Graph Visualisation using Widget Methods​

Widget Functions

Updating the Graph Visualisation using Widget Methods