Configurations

Interfaces

Here you can find the properties and/or methods used in the widget and the structures they conform to.

Widget Props

type WidgetProps = {
  key: string;
  parentElementSelector: string;

  hideSidePanel?: boolean; // optional
  hideSearch?: boolean; // optional

  functionMap_getGraphData?: string; // optional
  functionMap_getSelectedEntityId?: string; // optional
  functionMap_getSelectedRelationshipId?: string; // optional
};

Widget Parameters

Using Handshakes' Data

type WidgetParametersEndpointData = {
  graphType: string;
  datasets: string[];
  entities: { entityId: string; dataset: string }[];
  degree: number;
};

Using Your own Data

type WidgetParametersCustomData = {
  graphType: string;
};

Widget Methods

interface HandshakesWidget {
  drawGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    data: GraphData
  ): void;
  updateGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    props?: WidgetProps
  ): void;

  drawGraphWithCustomData(
    parameters: WidgetParametersCustomData,
    data: GraphData
  ): void;
  updateGraphWithCustomData(
    data: GraphData,
    parameters: WidgetParametersCustomData,
    props?: WidgetProps
  ): void;
}

You can create a file to house all the widget types:

types.ts

export type WidgetProps = {
  key: string;
  parentElementSelector: string;

  hideSidePanel?: boolean; // optional
  hideSearch?: boolean; // optional

  functionMap_getGraphData?: string; // optional
  functionMap_getSelectedEntityId?: string; // optional
  functionMap_getSelectedRelationshipId?: string; // optional
};

export type WidgetParametersEndpointData = {
  graphType: string;
  datasets: string[];
  entities: { entityId: string; dataset: string }[];
  degree: number;
};

export type WidgetParametersCustomData = {
  graphType: string;
};

export interface HandshakesWidget {
  drawGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    data: GraphData
  ): void;
  updateGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    props?: WidgetProps
  ): void;

  drawGraphWithCustomData(
    parameters: WidgetParametersCustomData,
    data: GraphData
  ): void;
  updateGraphWithCustomData(
    data: GraphData,
    parameters: WidgetParametersCustomData,
    props?: WidgetProps
  ): void;
}

Graph Data

To be able to have your data displayed in the Handshakes Graph Widget, it will have to be structured in a way that the widget can consume.
When using your own JSON data, it should be in this format below.

type GraphData = {
  nodes: [
    {
      id: string;
      isOrigin: boolean;  // determines if the node is the origin entity, and will be displayed bigger

      entities: [
        {
          entityId: string;
          dataset: string;  // "CRSG" | "CRMY" | "CM"
          entityNames: {
            name: string;
            effectiveDates: {
              start: string;  // YYYY-MM-DD format
              end: string;  // YYYY-MM-DD format
              startUncertainty?: string;  // "day" | "month"
              endUncertainty?: string;  // "day" | "month"
            };
            isActive: boolean;
          }[];
          entityType: string;
          entitySubType: string;
          entityIsActive: boolean;  // determines if the node should be displayed shaded
          entityStatusHistory: {
            status: string;
            effectiveDates: {
              start: string;  // YYYY-MM-DD format
              end: string;  // YYYY-MM-DD format
              startUncertainty: string; // "day" | "month"
              endUncertainty: string; // "day" | "month"
            };
          }[];
          identification: {
            identificationNumber: string;
            identificationType: string;
            identificationCountry: string;
            issuer: string;
            effectiveDates: {
              start: string;  // YYYY-MM-DD format
            };
          }[];
          addresses: {
            addressLines: string[];
            effectiveDates: {
              start: string;  // YYYY-MM-DD format
              end: string;  // YYYY-MM-DD format
              startUncertainty: string; // "day" | "month"
              endUncertainty: string; // "day" | "month"
            };
            isActive: boolean;
          }[];
          isRedListed: boolean; // determines if the entity is wanted/red-listed
          person: {
            citizenship: string;
            placeOfBirth: string;
          };
          firm: {
            companyRegistrationNumber: string;
            placeOfIncorporation: string;
            dateOfIncorporation: string;
            dateOfIncorporationUncertainty: string;
            businessActivities: {
              codeSystem: string;
              code: string;
              description: string;
            }[];
            stockCode: string;
            financialHighlights: {
              financialStatementsFiled: number[];
              financialPeriod: string;
              accountType: string;
              remarks: string;
              revenue: string;
              profitLossAftTax: string;
              totalAssets: string;
              totalLiabilities: string;
              shareholderEquity: string;
              employeeCount: number;
            }[];
          };
          remarks: string;
          statistics: {
            totalPersons: number;
            totalCorporate: number;
            totalEvent: number;
            totalOther: number;
            totalConnections: number;
          };
          metadata: {};
        }
      ]
    }
  ];

  edges: [
    id: string;
    source: string; // id: should be of an existing node id
    target: string; // id: should be of an existing node id
    relationships: [
      relationshipId: string;
      dataset: string;
      subjectEntityId: string;
      objectEntityId: string;
      relationshipType: string;
      relationshipSubType: string;
      effectiveDates: {
        start: string;  // YYYY-MM-DD format
        end: string;  // YYYY-MM-DD format
        startUncertainty: string; // "day" | "month"
        endUncertainty: string; // "day" | "month"
      };
      isPastRelationship: boolean;  // determines if the edge should be displayed dotted
      relationshipData: {};
      remarks: string;
      sourceDate: string;
    ];
  ];

  stats: {
    nodeCount: number;
    edgeCount: number;
    datasets: string[];
    datasetCount: number;
    degree: number; // degrees of separation
  };
  graphType: string; // "Radial" | "Interconnect" | "LBO"
};

---

Toggle Hide/Show of Widget UI Elements

The widget can disable selected UI elements based on the following object keys.

Object Key	Values	Default Value	Description
hideSidePanel	true | false	false	Disables the Side Panel of the Graph Widget
hideSearch	true | false	false	Disables the Search Bar of the Graph Widget

Add Hide to the Widget Props

widget-props.js

const widgetProps = {
  key: CLIENT_KEY,
  parentElementSelector: ELEMENT_SELECTOR,

  // Add these to your Widget Props
  hideSidePanel: true,
  hideSearch: true,
};