The React-Redux app

Change the edit forms

To change the edit forms, head to the apps/arrows-ts/src/components/DetailInspector.tsx file or to the apps/arrows-ts/src/components/GeneralInspector.tsx file. The DetailInspector component is used to edit classes and relationships, the GeneralInspector component is used to edit the schema metadata. Both components are wrapped into a Container component which takes care of proxying properties that come from the Redux store. Because of this, to change which properties are passed to the edit forms, you also need to change the apps/arrows-ts/src/containers/InspectorContainer.ts or the apps/arrows-ts/src/containers/GeneralInspectorContainer.ts respectively.

The model library

Add/change properties for the schema, the classes, or the relationships

To add or change a property for the schema, the classes, the relationships, or any other entity used by the webapp, locate the appropriate TypeScript file. Within the file, locate the interface for that entity, and change it accordingly.

For example, to add a property to a relationship:

Changing properties for models may result into breaking changes to the webapp! Lookout for TypeScript errors: those will guide you in updating the codebase accordingly.

The graphics library

Change arrows behavior

To change how arrows behave based on the content of the schema, head to libs/graphics/src/lib/arrowDimensions.ts and change how the different parameters of an arrow are calculated, based on the type of the relationship.

Different layouts on the canvas might result into different arrows being rendered. For example, when only one relationship exists between two classes, a StraightArrow is rendered. When multiple relationships exist, a ParallelArrow is rendered. When changing the behavior of arrows, make sure to update all of the arrow types.

The linkml library

Change LinkML export logic

To change how the conversion from the webapp schema to a LinkML schema is done, head to the linkml/src/index.ts file. The fromGraph function takes a collection of classes, a collection of relationships, and some metadata about the schema - e.g. schema name, description, license. The returned object is a LinkML object, which can be converted to a YAML string. A LinkML object is a TypeScript object typed such that it can store a valid LinkML schema.

Change LinkML import logic

To change how the conversion from a LinkML schema to the webapp schema is done, head to the linkml/src/index.ts file. The toGraph function takes a collection of classes, a collection of ontologies, and some metadata about the schema - e.g. description. The returned object is a LinkMLGraph object, which can be imported in the webapp Redux store. A LinkMLGraph object is a TypeScript object typed such that it can store a valid subset of the properties from a Graph object: the type used for the webapp schema. Namely, a LinkMLGraph object contains only classes and relationships, along with some metadata.