Graph Databases to Build Plugin-Driven Web Apps, such as Multimedia Content Management Systems

Eleven years ago, the 2015 origins of the open-source project BrainAnnex.org was as a Multimedia Content Management System.  

Fast-forward to 2021 : the project had a radical makeover with v. 5, and is now a much more general, modular, full-stack technology solution to effectively utilize graph databases.

For example, you can opt to install just the python library, if that's all you need.  But if you elect to install the entire repo (python library, web API and web app), you will have a UI that includes:

1.  a control panel - including search and visualization
2. a plugin-driven web app that you can customize relatively easily

The plugin-driven web app is the focus of this entry.  More specifically, the existing plugins that come with the standard release, and provide a Multimedia Content Management System

This article is part of a growing, ongoing series on Graph Databases and Neo4j

Plugin-Driven Architecture

A "plugin", in this context, is a small piece of software, typically for a specific use case, that is relatively easy to write thanks to the "core module" that does most of the work.

 

You might have had exposure, for example, to WordPress : their core platform started out as a way to write and manage blog entries... but they made it plugin-driven, and a wide variety of plugins allowed people to use WordPress for all sorts of purposes.

 

In a generally similar fashion, Brain Annex plugins can provide all sort of functionalities for broad categories such as:

1.  customized data management
2. visualization
3. interactive usage

Purely for historical reasons, most of the out-of-the-box plugins that come with the standard BrainAnnex web app installation are for Multimedia Content Management.  A wider variety of plugins will gradually emerge, and you can also relatively easily write your own.  Creating a new plugin will be covered by a future entry.

 

Multimedia Content Management System

Again, that's just one of a wide array of possibilities for a plugin-driven web app that utilizes the power of a graph database and the Brain Annex python library.

 

But if a CMS happens to be your interest, then you're in luck - because for historical reasons the Brain Annex web app provides out of the box several plugins that enable a fairly well-rounded multimedia content management system.

 

For example, let's imagine that you've been studying German as a foreign language - as I have! - and that you want to manage your growing knowledge of the language.  Voila', out of the box you can create a Brain Annex page like the following:

 

This is not a contrived example; the image shows a handful of my actual, real-life notes!

Let' digest the page, from top to bottom:

• URL : it's a web app.  You may run the server either on your local computer or on the cloud.  Then access it with a browser.  Installation guide.
   
•  Category : "Categories" are a built-in entity, coming with a UI editor.  They form a web of relationships with one another.  
  You could think of them as chapters and sub-chapters in a book, but they are more general and flexible than a "tree structure": they form a "network" (aka "mesh" or "directed graph".)   You could also think of categories as an "ontology" of your knowledge.  For example, "German" and "French" as sub-categories of the "Language" category.  And "German pronunciation" could be a sub-category of "German". ("See also" relationships are supported as well.)
  
  
• Category Page : Every "Category", as defined above, can have a variety of "Content Items" (nodes of the graph database, which you may imagine as "data records") linked to it, in a specified order.  In this context, a page is a UI construct to display, in their assigned ordered, all the items linked to a given Category - in our example, "German"
  
  
• Header : this items, just like everything else on the pages, is just a record of data (node of the graph database).  If we were to show it a record, for example in the form of a python dictionary, it might look like: 

     {"text": "Nouns", "_CLASS": "Header","entity_id": "509"}

or, if we looked inside the graph database, for example with the Neo4j browser, we might see:

But, of course, in the context of our Category page for "German", the header looks vastly better when rendered as shown in the earlier screenshot!  That nice, customized, display is the handy work of the "header" plugin, which also provides a UI for editing the values (discussed later.) 

What triggers the involvement of the  "header" plugin?  It's that field:    "_CLASS": "Header"     (capitalizing on the Schema Layer provided by the Brain Annex python library, schema classes can be assigned "handlers", i.e. plugin-provided special modules for display, editing and possibly interactivity)

• Website Bookmark :  a way to save a URL, and also annotate it
  
  
• Tabular Data :  a saved filter, similar to a "saved SQL query" in a relational database.  Here we're displaying a handful of the "German Vocabulary" records (sorted, and filtered for  grammar = 'noun' , where grammar is a field name), but any node data in the graph database may be displayed in this manner - including arbitrary data that may have nothing to do with Content Management Systems!
  
  
• Formatted Text Note :  a little HTML file, saved as media, and managed with an embedded editor
  
  
• Image : a little metadata about an image file, and a thumbnail version.  Clicking on it opens the full image
  
  
• Document : a little metadata (such as user comments) about a generic document, such as PDF or Word document, plus an optional image.  Please note that PDF files optionally get parsed and indexed - and are searchable.  If you click on it, it will be opened by the browser or downloaded, depending on the file type.
  
  
• Flash Card: with this plugin we're moving away from the very general, and into specific use cases.  You specify the source of your data (the "label" name, such as "German Vocabulary"), and what field to show on side A.  When you click on it, all the other fields are shown as well (as seen in the screenshot.)  Randomizing is handled by the plugin.  Future version might also record your answers, and preferentially quiz you on your weak spots.
  

The important point here is: "do you have a specific use case?  Well, just make your own plugin!"  A junior programmer with a little JavaScript, CSS and python ought to be able to put it together.

• Timer : here's an example of a plugin that is widget-like.  It keeps its own data (which tone to use for the ringer) in the database, but doesn't interact with any other data
  
  
•  Table of Contents (leftmost column): this is provided by the Category Page core module, and automatically populated

 

Cross-Linking of Content Items

With the frame of mind of graph databases, cross-linking is a natural operation to turn to!

For example, consider that e-book about the German language managed by the "document" plugin, and linked to the "German" category page.

What if you have another category page, for example called "Books in-progress", and that e-books really belongs there as well!  

No hair pulling needed to decide "which category to place it in"!

Unlike files on your OS folder, content managed by the Brain Annex app can (appear to) be in multiple places at once!  Same underlying object, linked to multiple category pages : if you edit the content item in one place, the edit will be reflected everywhere; if you delete it anywhere, it will gone.

On this example category page, "Books in-progress", we have 2 e-books ("document" plugins).  Notice that the German book is linked to - and will show up on - both this page and the "German" page.  Each link internally maintains its own positional value for its respective page: on this page, the German book appears as the first element, but on the "German" page it might be in the 34th position!

This page is shown in page-wide editing mode, toggled by an icon in the bottom right.  (Many Content Items also respond to a double-click on them, to enter a localized edit mode just for them.) 

Most of the controls, now exposed by the editing mode, are fairly self-explanatory; a few are annotated in the above screenshot.

As usual, a table of contents (left column) is automated generated.  Not shown is a rightmost column with an alphabetical listing of all the Categories that you have created. 

The purple box near the top left shows the traditional "breadcrumb navigation" from the "HOME" (root) Category to the one you're browsing.  In this case, it's a straightforward  

HOME » Books in-progress

but in general it will be multiple paths independently reaching the current page from the home one; that's because categories aren't restricted to a simple tree structure, but rather allow a web of connections ("Directed Acyclic Graph") among them, by means of "subcategory of" relationships.

 

Make Your Own Plugin?

A future entry will explore how to create your own plugin.  For now, please be aware that a plugin largely consists of:

1. A front end, written in Vue 2, which provides the interactive UI.  The bulk of a plugin goes here.  Examples of existing plugin frontends.
   
   
2.  A python backend, primarily to create the needed Schema and in some case perform specialized functions (such as the optional parsing of PDF files.)   Examples of existing plugin backends.

The names of the plugins that one wants to use in the web app must be declared in the Brain Annex app config file.  By default, all the maintained standard-issue plugins are enabled.

 

This article is part of a growing, ongoing series on Graph Databases and Neo4j