Version: v4.5

IafKgraphUI component

IafKgraphUI overview#

The Knowledge Graph viewer utilizes the IafKGraphUI component which renders a knowledge graph with the Canvas component, utilizing its store and various context controllers and hooks.

This page describes how to install and import the IafKgraphUI, outlines its main usage, and how to apply high-level wrappers.

Note: For a general introduction to the Knowledge Graph Viewer component, refer to the Knowledge Graph Viewer component page in the Concepts section.

Install#

npm install @dtplatform/iaf-kgraph-ui

Import#

import {  Canvas,  ConfigContext,  ConfigController,  RightMenuController,  GraphBoundsController,  store,  NodeMenuController,  LoadMoreDialogController,} from "@dtplatform/iaf-kgraph-ui";

Usage#

Create your own KnowledgeGraph component by using the available library components and your own customizations.

Main components to use:

For the most basic knowledge graph canvas, import and use the components described in Basic knowledge graph canvas.
To add an on-node-click menu above each node that the user can use to edit, delete, or highlight the clicked node, or add a new node in relation to the current, see NodeMenu and NodeMenuController.
To add a right-click menu for nodes, see RightMenuController.
To add functionality to load an additional 25 nodes at each button click, see LoadMoreDialogController.

Important: To ensure that your KnowledgeGraph component has access to the necessary context data and functions, you must wrap it in the context controllers described in Higher-level wrappers, when you import and use the component in a parent component.

Basic knowledge graph canvas#

For the most basic set-up of just the knowledge graph canvas, nest the following components as described below.

<ConfigController graphConfig={graphConfig}>  <Provider store={store}>    <GraphBoundsController>      <GraphContainer>        <Canvas />      </GraphContainer>    </GraphBoundsController>  </Provider></ConfigController>

See descriptions below for an explanation of the components used in this example.

Canvas#

The Canvas component places graph nodes on a canvas. The Canvas component and any custom components require a graph container, which you must define.

GraphContainer#

The GraphContainer component defines the viewport for the knowledge graph canvas.

The example below shows how to create your own GraphContainer component. This example invokes the width and height values from ConfigContext as well as some style properties.

function GraphContainer({ children }: { children: React.ReactNode }) {  useConfigSync();
  const { config } = useContext(ConfigContext)!;
  return (    <div      id={"knowledge-graph-container"}      style={{        position: "relative",        width: config.width,        height: config.height,        overflow: "hidden",        ...config.style,      }}      className={config.className}    >      {children}    </div>  );}

You can then wrap the Canvas component with your GraphContainer component.

<ConfigController graphConfig={graphConfig}>    <Provider store={store}>      <GraphBoundsController>        <GraphContainer>          <Canvas />        </GraphContainer>      </GraphBoundsController>    </Provider>  </ConfigController>

GraphBoundsController#

The GraphBoundsController defines the boundaries of the knowledge graph.

Store provider#

The store provider stores the reducers and middleware.

ConfigController#

The ConfigController maintains the context of your configuration.

NodeMenu and NodeMenuController#

The NodeMenu component is used to add a menu of operations for each node. The menu will allow operations such as edit, delete, or highlight the selected node, or add a new node in relation to the current node.

Use the NodeMenu component and wrap it with the NodeMenuController context component as shown in the example below.

<ConfigController graphConfig={graphConfig}>    <Provider store={store}>      {/* Controls the node menu */}      <NodeMenuController>         <GraphBoundsController>          <GraphContainer>            <Canvas />            {/* Added NodeMenu component */}            <NodeMenu />          </GraphContainer>        </GraphBoundsController>      </NodeMenuController>    </Provider>  </ConfigController>

RightMenuController#

The RightMenuController wrapper component is used to add a right-click menu option for nodes. To achieve this, import and use the RightMenuController wrapper component as shown in the example below.

<ConfigController graphConfig={graphConfig}>    <Provider store={store}>      {/* Added RightMenuController wrapper */}      <RightMenuController>        <NodeMenuController>          <GraphBoundsController>            <GraphContainer>              <Canvas />              <NodeMenu />            </GraphContainer>          </GraphBoundsController>        </NodeMenuController>      </RightMenuController>    </Provider>  </ConfigController>

LoadMoreDialogController#

By default, 25 nodes are loaded to an instance of a knowledge graph. The LoadMoreDialogController wrapper adds functionality to load an additional 25 nodes on each button click. See example below.

<ConfigController graphConfig={graphConfig}>    <Provider store={store}>      {/* Added controller */}      <LoadMoreDialogController>        <GraphBoundsController>          <GraphContainer>            <Canvas />          </GraphContainer>        </GraphBoundsController>      <LoadMoreDialogController>    </Provider>  </ConfigController>

Example using all components#

import React, { Dispatch, SetStateAction, memo, useContext } from "react";import { Provider } from "react-redux";import {  Canvas,  ConfigContext,  ConfigController,  RightMenuController,  GraphBoundsController,  store,  NodeMenuController,  LoadMoreDialogController,} from "@dtplatform/iaf-kgraph-ui";import "@dtplatform/iaf-kgraph-ui/dist/style.css";import NodeMenu from "../components/NodeMenu";import SearchBar from "../components/SearchBar";import FilterBar from "../components/FilterBar";import useConfigSync from "../_hooks_/useConfigSync";
function GraphContainer({ children }: { children: React.ReactNode }) {  useConfigSync();
  const { config } = useContext(ConfigContext)!;
  return (    <div      id={"knowledge-graph-container"}      style={{        position: "relative",        width: config.width,        height: config.height,        overflow: "hidden",        ...config.style,      }}      className={config.className}    >      {children}    </div>  );}
function Graph(graphConfig) {  const { openModal } = useModal();
  return (    <div      style={{        height: "100vh",        width: "100vw",        overflow: "hidden",      }}    >         <div style={{ position: "relative" }}>        <ConfigController graphConfig={graphConfig}>          <Provider store={store}>            <LoadMoreDialogController>              <RightMenuController>                <NodeMenuController>                  <GraphBoundsController>                    <GraphContainer>                      <ModalDialogs />                      <SearchBar />                      <FilterBar />                      <Canvas />                      <NodeMenu />                    </GraphContainer>                  </GraphBoundsController>                </NodeMenuController>              </RightMenuController>            </LoadMoreDialogController>          </Provider>        </ConfigController>      </div>    </div>  );}
export default memo(Graph);

Higher-level wrappers#

Wrappers must be used when you import your knowledge graph component. In the parent component that imports and uses your knowledge graph component, wrap the knowledge graph component in the DataStateProvider and ActiveGraphController wrappers. See example below.

return (    <div onContextMenu={preventDefaultContextMenu}>      <DataStateProvider>        <ActiveGraphController>          <Grid container spacing={1}>            <Grid item xs={6}>              <KnowledgeGraph                explore={getConnection}                onClickAddon={handleClickAddon}              />            </Grid>          </Grid>        </ActiveGraphController>      </DataStateProvider>    </div>  );

ActiveGraphController#

The ActiveGraphController component is used to control which graph is the currently active graph.

DataStateProvider#

The DataStateProvider component is used to maintain the data state.