Creating a Plugin in the GUI

Creating a plugin in the LBDserver GUI should be quite straightforward. After cloning the repository and activating the "main" branch, you will find a subfolder ./src/plugins. (Semantic) plugins are registered in this folder. In the root of this plugin folder, you'll find two files ("pluginDictionary.js" and "index.js") and a subfolder per plugin. The "index.js" file should not be modified, as registering your plugin happens in "pluginDictionary.js" by importing it from the corresponding subfolder of your plugin. A template is provided in the subfolder "PluginTemplate", where you will find an "index.js" file and a basic React component "PluginComponent.js". You can create a new plugin from this template by following the next steps:

• Copy this "PluginTemplate" folder and give it a new name (e.g. MyCustomPlugin). (NOTE: curently, there are some problems when directly copying within VS Code, as it apparently changes the import aliases (e.g. @components) to unexisting folders. So better copy it in your File Explorer instead of VS Code.)
• If you want, you can choose an icon for your plugin, by importing it in ./MyCustomPlugin/index.js
• Open ./src/plugins/pluginDictionary, import your plugin and include it in the pluginDictionary object usings an appropriate key.

import ProjectPlugin from "./ProjectPlugin";
import MyCustomPlugin from "./MyCustomPlugin"

const pluginDictionary = {
    project: ProjectPlugin,
    myPlugin: MyCustomPlugin,
  };

export default pluginDictionary

• When you now open your GUI (npm run start) and select a project, you will see your new plugin icon at the left sidebar. When you activate it, a "drawer" will open, giving you a canvas for your plugin. This canvas is defined in "PluginComponent.js", hence this file is the root of your plugin. Of course you can nest as many child components as you wish within this root.

• You can access the global application context from within your plugin, if your components include the following lines:

import React, { useContext, useState } from "react";
import AppContext from "@context";
... 
export default function MyPluginComponent() {
    const { context, setContext } = useContext(AppContext);
    ...
    return(...)
}

The context itself is an object with the following fields (see "./src/interfaces/contextInterface.js" for the TS interface and "./src/context/index.js" for the initial context as examples):

user (if not set: null)
    => user: the user object corresponding with the currently authenticated user
    => token: the JWT token required to authenticate to the backend)
currentProject (if not set: null)
    => activeGraphs: a list of uris (strings) for the graphs that are activated in the GUI
    => activeDocuments: a list of uris (strings) for the documents that are activated in the GUI
    => metadata: a JSON-LD serialisation of the metadata graph of the project (see below for its default content)
    => id: the project id
    => graphs: an object where keys are given by the graphs' uris and values represent their metadata (JSON-LD) (see below for its default content)
    => documents: an object where the keys are given by the documents' uris and the values represent their metadata (JSON-LD) (see below for its default content)
selection: Array of guids selected either via the viewer or programmatically
states: a state object for the plugins, to enable data storage and retrieval even when a plugin is not active (see below)

By default, an LBDserver metadata graph contains the following relationships:

- rdfs:label (a label for the project/resource)
- rdfs:comment (a description of the project/resource)
- lbd:hasAcl (a pointer to the ACL graph that defines the access rights for this project/resource)

A plugin can register a state in the global application context by creating an entry in the context.states[pluginname]. Any changes in the context can happen either directly, via setContext({...context, _theKeyOfTheObject_: _theObject_}), or via the preconfigured function "setState(state)" in the plugin template component.

In order to visualize components in the Geometry Viewer, you need to store the element guids in the context.querySelection.

Finally, do not hesitate to create issues when things are not working. Good luck!