Skip to content

Store

Jump to bottom
Femke edited this page Oct 7, 2019 · 2 revisions

Contents

General

The VueX state management library is used to maintain a model and keeps components loosely coupled. Data is kept in the store and can only be modified using mutations and actions.

The store contains application logic such as the the state which maintains the internal model and methods to access or modify the model.

  • Store Globally shared data accessible by components in the application. This data can be modified through mutations and accessed via getters (see below).
  • Mutations Mutations are responsible for changing the global state. They should only be called by actions and not used directly in components.
  • Actions Methods that expose changes to the global state. Components that wish to change the state should rely on actions which in turn call mutations.
  • Getters Expose objects in the state.

Each module can contain its own state, mutations, actions, getters, and even nested modules. Modules are used to split up the store, since for big projects, the store can get really bloated.

Store

Modules

Mixins

State

  • editor: Reference to the editor.
  • showClearModal: Indicates if the clear modal is shown.
  • showExportModal: Indicates if the export modal is shown.
  • pathModal
    • show: Indicates if the path modal is shown.
    • editing: Indicates if the path modal is used to edit a shape.
    • shapeID: The ID of the shape that is currently edited.
  • exportType: The type of the file we want to export.

Mutations

  • saveOperation: Empty (event-like) mutation to save the state to use in the UndoRedoMixin.
  • undo: Empty (event-like) mutation that is called whenever an undo is executed. Exists to keep the shape and relationship arrow locations updated while undoing/redoing operations.
  • setEditor: Save a reference to the editor.
  • toggleClearModal, togglePathModal, toggleExportModal: Toggles for the visibility of the clear, path and export modals.

Actions

  • loadExample: Load in some example data.

Getters

  • internalModelToJson, internalModelToTurtle: Returns the internal modal in SHACL, both JSON and Turtle format.
  • predicates: Get the possible predicates for the given value type.
  • objects: Get the possible object for the currently set predicate.

UndoRedoMixin

This mixin contains the logic to handle undo/redo functionality. It listens to the store's mutations and reacts to saveOperation-mutations.

An operation, like we call it in this project, is different from a mutation or an action. The latter ones are VueX specific terms and are used to specify changes in the store state. An operation, however, is an action the user has explicitly executed, for example "add a new constraint to this shape" or "delete this shape from the model". One user operation can consist of multiple actions and/or mutations, which is why simply subscribing to every mutation and action is not a feasible way to undo/redo user oparations. The saveOperation-mutation is explicitly committed after every complete user operation, and only when the whole operation is fully executed.

Whenever a saveOperation is committed, this mixin will create a deep copy of the current state and add it to the list of executed operations, done. The 100 most recent user operations are saved in this list. If a new operation is executed, the list with undone operations, undone, is emptied.

Every operation object consists of the store state whenever saveOperation was committed, along with the last action that has been dispatched before committing saveOperation, containing the action type and payload. The first is used to replace the current state while iterating through done/undone operation. The latter was part of a previous implementation and is not used anymore, but kept for debugging purposes.

Different implementations have been tried before settling for this one to implement the undo/redo functionality. Other implementations caused problems with the model's blank node's ID's among other factors. We opted for this mutation listener instead of event listeners because it was easier to implement regarding Vue Components and the VueX store.

Data

  • done: List of operations that have been executed.
  • undone: List of operations that have been undone.
  • newOperation: Boolean that indicates if the next operation is a new one.

Methods

  • canUndo: Indicates if there are any operations that can be undone.
  • canRedo: Indicates if there are any operations that can be redone.
  • undo: Undo the most recent operation, if possible. The most recent executed operation will be removed from the done list and pushed onto the undone list. If possible, the latest state will be used as the new current state. Otherwise, an empty state will be used. Triggers the undo mutation in the store to keep the shape and relationship arrow locations updated.
  • redo: Redo the last operation that has been undone, if possible. The most recent undone operation will be removed from the undone list and pushed onto the done list. Replace the current state by the state of this operation.

ShapeModule

This module contains everything to modify the shapes.

Modules

State

  • model: List of shapes.
  • shapeModal
    • show: Indicates if the shape modal is shown.
    • id: IRI of the shape that is being edited.
    • label: Label/name of the shape.
    • labelLang: Language of the label/name.
    • description: Description of the shape.
    • descrLang: Language of the description.
    • nodeShape: Indicates if the shape is a node shape.

Mutations

  • clear: Clear all shapes and properties from the current state.

  • setModel: Set the model to the given value.

  • toggleEditShapeModal: Toggle the visibility of the node shape modal.

  • addShape: Add the given shape to the state and set its coordinates to zero.

  • updateShapeID: Update the shape's ID.

  • updateShape: Update the value of the shape with the given ID to the given value.

  • deleteShapeAtIndex: Delete the shape at the given index.

  • deletePropertyFromShape: Delete the property with the given ID from the given shape.

Actions

  • addNodeShape: Add an empty node shape with a generated UUID.
  • addPropertyShape: Add a new property shape with a generated UUID and a given path.
  • editShape: Edit the ID of a shape.
  • deleteNodeShape: Delete the node shape with the given ID.
  • deletePropertyShape: Delete the property shape with the given id.

Getters

  • labelsForIds: Get a map of the shapes' IDs to their labels.
  • shapes: Returns a map of the shape ID's to their respective objects.
  • shapeIDs: Returns a list of the shape IDs.
  • nodeShapes: Get a dictionary mapping ID's to the respective node shape objects.
  • propertyShapes: Get a dictionary mapping ID's to the respective property shape objects.
  • relationships: Get a list of relationships.
  • shapeWithID: Get the shape object with the given ID.
  • indexWithID: Get the index of the shape object with the given ID.

ConstraintModule

This module contains everything to change the shape constraints.

Modules

State

  • constraintIndex: Index of the constraint value that is being edited.

Mutations

  • setConstraintValue: Set the value of the constraint with the given ID to the given value.
  • deleteConstraintFromShape: Delete the given constraint from the given shape object.

Actions

  • addPredicate: Add a constraint with the given values to the given shape.
  • startConstraintEdit: Prepare and toggle the predicate modal.
  • stopConstraintEdit: Get the values from the predicate model and execute the edit.
  • updateConstraint: Update the constraint value of the given shape.
  • deleteConstraintFromShapeWithID: Delete the given constraint from the given shape.
  • deleteConstraintValueWithIndex: Delete the constraint value at the given index.
  • deleteConstraintValue: Delete the given constraint.

Getters

  • shapeProperties: Get a list of property ID's for the shape with the given ID.
  • shapeConstraints: Get a map of the constraints of the shape with the given ID.
  • shapeIDConstraints: Get the constraints that have existing shape IDs as values. This will return a dictionary that maps every constraint IDs to a list of shape IDs.

PredicateModalModule

This module contains all the state data related to the predicate modal.

State

  • show: Indicates if the predicate modal is shown.
  • shapeID: IRI of the shape that is being edited.
  • shapeType: The type of the shape that is being edited.
  • input: Input entered by the user.
  • object: Type of the input.
  • editing: Indicates if the modal is being used to edit a predicate.
  • onExit: Method that should be executed when the modal is closed.
  • selected: Predicate that is currently selected.
  • sorting
    • sorted: Indicates if the table is sorted.
    • sortBy: The column the table is sorted by.
    • ascending: Indicates if the table is sorted ascendingly.

Mutations

  • togglePredicateModal: Toggle the visibility of the predicate modal.
  • sortPredicateModal: Set the sorting of the table in the predicate modal.
  • selectRow: Select the row with the given key (constraint ID).
  • resetPredicateModal: Reset the properties of the predicate modal.

Actions

This module has no actions.

Getters

This module has no getters.

CoordinateModule

State

  • yValues: Object that contains the values of every component.
  • coordinates: Object that contains the coordinates of every shape.
  • heights: Objec that contains the height of every shape.

Mutations

  • updateLocations: Update the coordinates and values of the given shapeID.
  • deleteShapeLocations: Delete the coordinates and y values of the shapeID with the given ID.
  • updateYValues: Update the y values of the properties of the given shapeID.
  • updateCoordinates: Update the coordinates of the given shapeID.
  • clearLocations: Clear all the coordinates and y values.

Actions

This module has no actions.

Getters

  • bottomYCoordinate: Get the absolute bottom y coordinate of the shapeID with the given ID.
  • allBottomYs: Get the absolute bottom y coordinates of all the shapes.

DataModule

This module contains everything to handle data imports/exports and validation.

State

  • format: Format of the loaded data.
  • dataFile: Object containing the data.
  • dataFileName: Name of the loaded data file.
  • dataFileExtension: Extension of the loaded data file.
  • dataText: Textual representation of the loaded data file.
  • validationReport: Object that represents the validation report.
  • showValidationReportModal: Indicates if the validation report modal is shown.

Mutations

  • toggleValidationReport: Show the validation report modal.
  • setData: Set the data file to the given contents.
  • setJsonData: Set the given JSON data as the current data file.
  • validateWithModel: Parse the model to the expected format and validate the data file using these shapes.

Actions

  • uploadDataFile: Receives a datafile and takes its content to the state.
  • uploadSchemaFile: Takes a file and reads the extension.
  • updateModel: Set the model to the given one.
  • validateWithCurrentModel: Validate the interal model.
  • exportFileWithName: Export the internal model to a file.
  • updateData: Update the data file to the given data text.

Getters

  • validationReport: Get the validation report.

ConfigModule

This module contains everything related to the configuration of the application.

Modules

State

  • namespaces: Dictionary of prefixes mapped to their related URI.
  • baseURI: Current base URI.

Mutations

  • updateNamespacePrefix: Update the given prefix in the namespaces config.
  • updateNamespaceURI: Update the URI of the given prefix in the namespaces config.
  • addPrefix: Add the given prefix to the namespaces.
  • deletePrefix: Delete the given prefix from the namespaces.
  • setBaseUri: Set the current base URI to the given URI (if given) or to the URI corresponding to the given prefix. If the current base URI is identical to the given URI, then clear the base URI.

Actions

  • stopEditingNamespace: Stop editing the namespaces. Get the entered value and update the namespaces.

Getters

  • namespaces: Get the current namespaces.
  • prefixByURI: Get the URI of the given prefix.
  • uriByPrefix: Get the prefix of the given URI.
  • baseURI: Get the current base URI.

NamespaceModalModule

This module contains all the state data related to the namespace modal.

State

  • show: Indicates if the namespace modal is shown.
  • editRow: Prefix of the row that is being edited.
  • editField: Column that is being edited.

Mutations

  • toggleNamespaceModal: Toggle the visibility of the namespace modal.
  • startEditingNamespace: Start editing the given row and field.
  • clearTableEdit: Clear the edit fields for the namespace modal.

Actions

  • addNewPrefix: Add a new entry with the given prefix and URI.

Getters

This module has no getters.

Questions? Anything unclear? Feel free to message me!

Clone this wiki locally