Configurations

Interfaces

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

Widget Props

type GraphTypes = "radial" | "interconnect" | "lbo" | "investee";

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

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

  hideNullFields?: boolean; // optional
  hideFields?: {
    entity?: string[];
    relationship?: string[];
  }; // optional
  rightClickOptions?: {
    generateNewGraph?: {
      hideForGraph?: GraphTypes[];
    };
  }; // optional

  functionMap_getStatus?: string; // optional
  functionMap_getSelectedElements?: string; // optional
};

Widget Parameters

Using Handshakes' Data

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

Using Your own Data

type WidgetParametersCustomData = {
  graphType: string;
};

Widget Methods

interface HandshakesWidget {
  drawGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    data: GraphData
  ): void;

  drawGraphWithCustomData(
    parameters: WidgetParametersCustomData,
    data: GraphData
  ): void;

  displayEmptyState: (props: typeof widgetProps, message?: string) => void;

  load: (message?: string) => 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
  hideZoomControls?: boolean; // optional
  hideExports?: boolean;

  hideNullFields?: boolean; // optional
  hideFields?: {
    entity?: string[];
    relationship?: string[];
  }; // optional

  functionMap_getStatus?: string; // optional
  functionMap_getSelectedElements?: string; // optional
};

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

export type WidgetParametersCustomData = {
  graphType: string;
};

export interface HandshakesWidget {
  drawGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    data: GraphData
  ): void;

  drawGraphWithCustomData(
    parameters: WidgetParametersCustomData,
    data: GraphData
  ): void;

  displayEmptyState: (props: typeof widgetProps, message?: string) => void;

  load: (message?: string) => 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 = {
  originEntities: {
    dataset: string; // "CRSG" | "CRMY" | "CM"
    id: string; // or comapny UEN/Identification number
  };
  graph: {
    graphType: string; // "radial" | "interconnect" | "lbo" | "investee"
    nodes: {
      id: string;
      entities: EntityInfo[];
      distanceFromOrigin: number;
      effectiveEquity?: number;
    }[];
    edges: {
      id: string;
      source: string;
      target: string;
      relationships: RelationshipInfo[];
      directEquity?: number;
      directVotingInterest?: number;
    }[];
    stats: {
      datasets: string[];
      degree: number; // degree of separation
    };
  };
  generatedAt: string; // ISO Date Format
};

type EntityInfo = {
  id: string;
  type: string;
  subtype: string;
  lastUpdated: string;
  isActive: boolean;
  names: {
    name: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPrimary: boolean;
    isPast: boolean;
    language: string;
    isTranslation: boolean;
  }[];
  addresses: {
    addressType: string;
    addressLines: string[];
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPrimary: boolean;
    isPast: boolean;
  }[];
  identifications: {
    id: string;
    type: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
    country: string;
    issuer: string;
  }[];
  statuses: {
    status: string;
    isActive: boolean;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
  }[];
  person?: Person;
  firm?: Firm;
  event?: Event;
  remarks: string;
  dataset: string; // "CRSG" | "CRMY" | "CM"
  isRedListed?: boolean;
};

type RelationshipInfo = {
  id: string;
  sourceEntityId: string;
  targetEntityId: string;
  type: string;
  subtype: string;
  effectiveDates: {
    start: string;
    end: string;
    startUncertainty: string;
    endUncertainty: string;
  };
  isPast: boolean;
  ownerships: {
    ownershipType: string;
    percentage: number;
    amount: number;
    currency: string;
    sharesAllotted: number;
    levelOfControl: string;
    isJoint: boolean;
    jointShareholding: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
  }[];
  remarks: string;
  dataset: string; // "CRSG" | "CRMY" | "CM"
};

type Person = {
  placeOfBirth: string;
  dateOfBirth: string;
  dateOfBirthUncertainty: string;
  salutation: string;
  citizenships: {
    country: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
  }[];
  gender: string;
};

type Firm = {
  dateOfIncorporation: string;
  dateOfIncorporationUncertainty: string;
  placeOfIncorporation: string;
  businessActivities: {
    description: string;
    code: string;
    classificationStandard: string;
    isPrimary: boolean;
  }[];
  capitals: {
    isPast: boolean;
    shareType: string;
    currency: string;
    shareCategory: string;
    amount: number;
  }[];
  financials: {
    isPast: boolean;
    isConsolidated: boolean;
    companyType: string;
    periodStartDate: string;
    periodEndDate: string;
    financialYear: number;
    filingDate: string;
    filingType: string;
    audit: {
      isAudited: boolean;
    };
    statements: {
      currency: string;
      profitOrLoss: {
        income: {
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
        expenses: {
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
        profit: {
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
      };
      financialPosition: {
        assets: {
          current: {
            total: number;
          };
          nonCurrent: {
            total: number;
          };
          total: number;
        };
        liabilities: {
          current: {
            total: number;
          };
          nonCurrent: {
            total: number;
          };
          total: number;
        };
        equities: {
          total: number;
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
      };
      cashFlows: {
        operatingActivities: {
          total: number;
        };
        investingActivities: {
          total: number;
        };
        financingActivities: {
          total: number;
        };
      };
    };
  }[];
  stockListings: {
    stockExchange: string;
    stockCode: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
  }[];
  employeeCount: {
    min: number;
    max: number;
  };
};

type Event = {
  grossProceeds: number;
  issuePrice: number;
  issuedShares: number;
  transactionCurrency: string;
  transactionDate: string;
  transactionDateUncertainty: string;
};

---

Hide 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	Removes the Side Panel of the Graph Widget
hideSearch	true | false	false	Removes the Search Bar of the Graph Widget
hideZoomControls	true | false	false	Removes the zoom buttons of the Graph Widget
hideExports	true | false	false	Removes the export buttons of the Graph Widget (xlsx, pdf)

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,
  hideZoomControls: true,
};

---

Hide Info on the Widget Sidebar

The widget can selectively hide entity/relationship information in the Widget Sidebar based on the following object keys.

Object Key	Values	Default Value	Description
hideNullFields	true | false	false	Hides information that has null values in the Sidebar's Info panel. Otherwise the null values with be displayed as "-"
hideFields	An object of parameters "entity" and/or "relationship" that contains an array of string	null	Hides information in the Sidebar's Info panel if their keys are included in the "entity" or "relationship" string array

Add Hide to the Widget Props

widget-props.js

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

  // Add these to your Widget Props
  hideNullFields: true,
  // some examples below of fields you can hide
  hideFields: {
    entity: ["currentNameEffectiveDate", "status", "remarks"],
    relationship: ["pastRelationship", "startDate", "endDate", "remarks"],
  },
};

Hidable Fields in the Widget Sidebar

The table below shows the fields you can use to hide entity and/or relationship information in the widget sidebar. Simply add them in the hideFields object (like in the example above).

Entity Fields

Type	Field	Displayed Name
entity	currentName	Current Name / Current Description (Event)
entity	currentNameEffectiveDate	(Effective Date) (In the same label as currentName)
entity	otherNames	Other Names / Other Descriptions (Event)
entity	otherNamesEffectiveDate	(Effective Date) (In the same label as otherNames)
entity	entityType	Entity Type
entity	entitySubType	Entity Sub-type
entity	remarks	Remarks
entity	placeOfIncorporation	Country/Region of Incorporation/Registration
entity	identifications	Identifications
entity	socialCreditNumber	Social Credit Number
entity	registrationDate	Registration Date
entity	address	Address
entity	capital	Capital
entity	status	Status
entity	primaryBusinessActivity	Primary Business Activity
entity	primaryBusinessActivityCode	Primary Business Activity Code
entity	secondaryBusinessActivity	Secondary Business Activity
entity	secondaryBusinessActivityCode	Secondary Business Activity Code
entity	transactionDate	Transaction Date

Relationship Fields

Type	Field	Displayed Name
relationship	relationshipType	Relationship Main-type
relationship	relationshipSubType	Relationship Sub-type
relationship	startDate	Start Date
relationship	endDate	End Date
relationship	pastRelationship	Past Relationship
relationship	remarks	Remarks
relationship	sourceDate	Latest Source / Disclosure Date
relationship	shareType	Share Type (LBO & Investee graphs)
relationship	totalShares	Total Shares (LBO & Investee graphs)
relationship	allotmentDate	Allotment Date (LBO & Investee graphs)

---

Hide Right-click options in the Widget

The widget can selectively hide right-click options based on the following object keys.

Object Key	Values	Default Value	Description
generateNewGraph.hideForGraph	Array<"radial" | "interconnect" | "lbo" | "investee">	undefined	Hides the "Generate New Graph" option for specific graph types

Configure Right-click options in the Widget Props

widget-props.js

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

  // Add these to your Widget Props
  rightClickOptions: {
    generateNewGraph: {
      // Include the GraphTypes you wish to disable generateNewGraph for
      hideForGraph: ["interconnect", "lbo", "investee"];
    };
  };
};