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_getStatus	On any API call, this function will be called, supplied with any relevant success/error messages and status codes
functionMap_getSelectedElements	On selection of any entity(ies) and/or relationship(s) in the graph, this function will be called, supplied with the data of the respective selected elements

functionMap_getStatus returns a Status object in the following format:

type Status = {
  success?: boolean;
  error?: boolean;
  code?: number; // status codes (200, 400, 404 etc)
  message?: string;
  data?: any;
};

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_getStatus: "hswidget_handleShowStatus",
  functionMap_getSelectedElements: "hswidget_handleGetSelectedElements",
};

Replace hswidget_handleShowStatus, hswidget_handleShowEntityId and hswidget_handleShowRelationshipId with the name of your global functions. Having a prefix of hswidget_ is recommended but not mandatory.

Create your Global Functions

Javascript
React

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

      const selectedElements = document.getElementById("selectedElements");

      window.hswidget_handleShowStatus = function (status) {
        alert(status.message);
      };

      window.hswidget_handleGetSelectedElements = function (elements) {
        selectedElements.innerText = `Selected: ${elements.length}`;
      };

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

    <div>
      <div id="hsWidget"></div>
      <ul>
        <li id="selectedElements"></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 [status, setStatus] = useState(null);
  const [selectedElements, setSelectedElements] = useState([]);

  useEffect(() => {
    (window as any).hswidget_handleShowStatus = (status: {
      success?: boolean;
      error?: boolean;
      code?: number;
      message?: string;
      data?: any;
    }) => {
      setStatus(status);
    };

    (window as any).hswidget_handleGetSelectedElements = (elements: any[]) => {
      setSelectedElements(elements);
    };

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

  return { status, selectedElements };
};

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 { status, selectedElements } = useGlobalFunctionHandler();

  useEffect(() => {
    alert(status.message);
    console.log(status.data);
  }, [status]);

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

  return (
    <div>
      <ul>
        <li>{`No. of Selected Elements: ${selectedElements.length}`}</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", id: "xyz-001" }],
  degree: 1,
};

const widgetParametersInterconnect: WidgetParametersEndpointData = {
  graphType: "interconnect",
  datasets: ["CM"],
  entities: [
    { dataset: "CM", id: "xyz-001" },
    { dataset: "CM", id: "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.drawGraphWithEndpointData(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.drawGraphWithCustomData(
  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