Skip to main content

Workspace Components

The recommended way to display a workspace is to use createWorkspace() to create new workspace context, which stores graph data and provides means to display and interact with the diagram. Then the context can be provided to child components with <WorkspaceProvider>.

Alternatively, <Workspace /> can be used as a top-level utility component which both creates and provides the context.

Hooks​

useLoadedWorkspace() hook should be used to perform an initial initialization for the workspace which correctly reverts the changes and aborts async operations via provided AbortSignal when the workspace component is unmounted.

useWorkspace() hook can be used from inside <Workspace /> child components to access workspace context; see workspace context for details.

<WorkspaceRoot> and built-in layouts​

The UI of the workspace is composed of various components which use provided workspace context:

Default built-in layout is provided as <DefaultWorkspace /> component which includes the unified search, main menu and action toolbars and all built-in canvas widgets.

Alternative (classic) built-in layout is provided as <ClassicWorkspace /> component which uses layout panels with class tree, instances search, link types toolbox, <ClassicToolbar /> and all built-in canvas widgets.

When providing a custom workspace layout it is required to use <WorkspaceRoot /> as a top-level parent component to establish necessary style defaults, including styles for light or dark color scheme.

Example: canvas-only custom layout​

Result
Loading...
Live Editor
function Example() {
  const {defaultLayout} = Reactodia.useWorker(Layouts);
  const [workspace] = React.useState(() => Reactodia.createWorkspace({
    defaultLayout,
  }));

  const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
    const {model, view} = context;
    const dataProvider = new Reactodia.EmptyDataProvider();
    await model.createNewDiagram({dataProvider, signal});
    model.createElement('http://example.com/entity');
    const canvas = view.findAnyCanvas();
    canvas.zoomToFit();
  }, []);

  return (
    <div className='reactodia-live-editor'>
      <Reactodia.WorkspaceProvider workspace={workspace}
        onMount={onMount}>
        <Reactodia.WorkspaceRoot>
          <Reactodia.Canvas />
        </Reactodia.WorkspaceRoot>
      </Reactodia.WorkspaceProvider>
    </div>
  );
}

Customize type styles​

Reactodia displays entities in different places throughout the workspace components. It is possible to customize overall style based on entity types (accent color and icon) by providing a custom typeStyleResolver to the createWorkspace():

const [workspace] = React.useState(() => Reactodia.createWorkspace({
  defaultLayout,
  typeStyleResolver={types => {
    if (types.includes('http://www.w3.org/2000/01/rdf-schema#Class')) {
      return {icon: CERTIFICATE_ICON, iconMonochrome: true};
    } else if (types.includes('http://www.w3.org/2002/07/owl#Class')) {
      return {icon: CERTIFICATE_ICON, iconMonochrome: true};
    } else if (types.includes('http://www.w3.org/2002/07/owl#ObjectProperty')) {
      return {icon: COG_ICON, iconMonochrome: true};
    } else if (types.includes('http://www.w3.org/2002/07/owl#DatatypeProperty')) {
      return {color: '#00b9f2'};
    } else {
      return undefined;
    }
  }}
}));

By default, the colors are assigned deterministically based on total hash of the types in the entity data.