Back to the Home Page

Frameworks Prototype

Contents

• Frameworks Prototype
  • Contents
  • Instructions
    • User Levels
    • Model Management
    • Zooming and Panning
  • Phase Two (and beyond) Feature Suggestions
    • Development of “Stuff Box” and “Elaborate Button” in the Coloured Meta Model
    • Todo List
  • Object Model
    • Frame
    • Node
    • Line (link of association)
  • Deployment
  • Dependencies

Instructions

You are the Thinker who would become Modeller. You will be constructing a ‘simple graphical model of your Thinking and/or Understanding’.

‘Frameworks’ modelling is rule-based.

In this Current Prototype Tool Version 3.0 - upon engaging with the tool, you are presented with the first two nodes of the Core Spinal Model in the Thinking & Modelling Space.

These are:

• Focus Node – which is highlighted – and identifies Your Focus and the focus of the model
• Context Node - identifies the context in which to consider the focus

The Focus and the Context must be named before you are able to continue elaborating the model by adding additional nodes.

Once the Focus and Context have been named, new nodes can be added by either clicking on the workspace or selecting the Elaborate button. New nodes will become children of whichever node is selected as active (indicated by the red circle).

• Nodes can be selected as active by clicking on the circle.
• Clicking on the Text Label will follow the Link HREF of the Node.
• When a node is active, clicking on it again will open the dialog to allow you to edit the node.
• Nodes can also be moved by clicking and dragging on the circle.

The elaboration allowed is determined by the user level assigned to the model as below. The user level can be changed by clicking on the New Model Button and changing the user level.

User Levels

Model Management

Within the main screen there are menu buttons to allow:

Zooming and Panning

There are zooming and panning controls for moving around larger models. These buttons are located under the model construction and management buttons.

Phase Two (and beyond) Feature Suggestions

Development of “Stuff Box” and “Elaborate Button” in the Coloured Meta Model

In PHASE TWO the plan is to enhance SAVE and SHARE. In Prototype Tool Version 3, models are SAVED to the ‘Frameworks’ Data Base (and can be Manged there). The idea is to enable the Thinker Modeller to SAVE and SHARE their Model(s) with others in a Coloured Meta Model. The Model now displayed in the Model Display Space, where it can be browsed and Nodes of interest selected for linking to detail.

The “Stuff Box” and “Elaborate Button” in the Frame (previously inert in the Black & White Meta Model) become active. The idea is that Stuff from the digital world can be located and sourced and deposited in the Stuff Box (i.e. for a Model). The idea is that should the recipient of a Model (SHARED with them) wish to Edit or to Elaborate the SHARED and Displayed Model, they would select the Elaborate Button in the Frame, and the Displayed Model would be displayed (back) into the Tool (Thinking and Modelling Space), where it could be Edited/Elaborated.

Todo List

1. Development of “Stuff Box”
   1. What type of objects are stored in the stuff box
      1. Are they simply named links to web resources
      2. Is there an expectation that large objects such as files can be stored here?
      3. If 2 then consider leveraging on other object storage and just keeping named links as in 1.
   2. How do objects in the stuff box relate to nodes in the model?
      1. Should you be able to drag them from the stuff box where they become child nodes of the active node with the name and link populated?
      2. Once something has been moved to the model should it be removed from the stuff box?
   3. What should the stuff box look like when you open it?
      1. Is it a list of things?
      2. Is it a grid of nodes to be drag and dropped?
   4. How do you add things to the stuff box?
2. User Interface Improvements
   1. Inclusion of stuff box and thicker borders in frames
   2. Addition of touch friendly gestures for zoom/pan etc.
   3. Potential for Folder Structure to Store and File Models

Object Model

The ‘Frameworks’ Tool: “The Intelligent Frame” is object-oriented consisting of:

• Frame; Thinking & Modelling Space
• Core Spinal Model; Focus Node, Context Node, Instances Node
• Nodes & Links of Association in a Simple Structural Model
• Stuff Box integral to Frame (to be completed)
• Elaborate Button integral to Frame

Frame

The Frame object manages the rendering and interactivity of the model within the SVG image on the HTML page. The frame is responsible for enforcing the constraints of the metamodel within the scope of the users'* expertise level. This includes:

• Requiring the user to name the Focus Node
• Requiring the user to name the Context Node
• Allowing elaboration of the model by adding nodes depending on the user level

Note: * - ”The “User” in ‘Frameworks’ is the “Thinker Modeller”

Methods are included for:

• Adding Nodes via Mouse Interaction
• Adding Nodes via Elaborate Button
• Downloading Frame SVG Data
• Starting a new model and selecting the user level for the new model
• Saving Frameworks Model to localStorage (within Browser)
• Loading Frameworks Model from localStorage

Node

The Node object contains the information related to each node in the model including:

• The Nodes Unique ID in the model
• The Nodes Name
• A description of the Node to be displayed when the mouse hovers over the node
• A hypertext link for a web page that the node links off to
• A list of all the child nodes of this node in the model

The Node also contains methods to allow the node to be rendered and interacted with via the SVG representation within the frame. These methods include:

• Node Creation
• Node Update via Dialog Box
• Node Move
• Node Deletion

Nodes can also be protected by the metamodel to prevent certain nodes from being deleted or moved (e.g. Focus and Context Nodes).

Line (link of association)

The line object provides methods for drawing and manipulating the lines connecting nodes in the SVG image within the frame. These include

• drawLine - to Draw the lines within the Frame.
• drawLineTo - to draw a line to a specific node.
• getLineGeometry - calculate the line geometry to align to node edges.

Deployment

1. The current code base is deployed via a CICD Pipeline integrated to an Azure Static Web App.
2. A pull request to main will trigger a deployment to a test clone environment with a unique URL to test.
3. Merging the Pull Request will trigger a full re-deployment to the main environment.
4. The database for storing the models needs to be build manually via from the scripts in the SQL directory.
5. The connection to the database needs to then be added to the Azure Static Web App Environment Variables as SqlConnectionString.
6. The current deployment shares the production database with the test environments that are created by the CICD pipeline.

Dependencies

1. The code requires an Azure Static Web App which can be set up folling instuctions here.
2. The Azure function app will need a version 4.0 API Enabled following instructions here.
3. The code also requires a SQL Azure Database which can be set up following instructions here
4. The Framworks Schema should be created following documentation in the SQL Directory of the code repository.
5. The Connection string for the database needs to be supplied to the Azure Static Web App as a SQLConnectionString environment variable.
6. Re-implementation of the CIDC Pipeline can be accomplished by following the instructions here.