Documentation

First Steps

Analyze JavaScript coding

Make sure you have a folder which contains html files together with JavaScript code. You may for instance use git to replicate the source code of this application to a local folder.

Open this application in a browser

Choose in the menu Model -> Extract Code from File System to SOMIX model (w/o .git). Choose the main folder of the application. All extracted components will be displayed in a circle.

Choose in the menu File -> Open Work Folder. Specify a folder where the generation information for all diagrams shall be stored. In case you analyze this application choose the folder models.

In case you use this application. Choose in the menu File -> Read Diagram. You will see a list of existing diagrams.

In case there are no diagram informations yet. Choose in the menu File -> New Diagram. Enter a name for the diagram. Choose Model -> Explore model ()Add elements to diagrams) to choose components to be displayed.

Demo

It is possible to display and use demo data. Follow these steps:

Open the application in a Browser

Choose in the menu Help -> Load demo data

Do a right mouse click into the pane and choose "Start Force-directed graph". Wait some time and choose then "Stop Force-directed graph".

Click on one of the red or blue circles with the right mouse button. Choose "Add element with all neighbors"

Do a right mouse click into the pane and choose Demo Diagram

Play around with left and right clicks of the mouse on elements, into boxes and onto the pane. Use also the scrool wheel of the mouse.

You may also choose Model -> Explore Model (Add elements to diagrams). Use this steps:

Open the application in a Browser

Choose in the menu Help -> Load demo data

Enter for instance ^Z.*LOG in the input field. This filters for all elements which start with Z and have a LOG somewhre in the name. You can use any Regex expression. The search is case insensitive.

The Button Apply Filter may not yet work, instead move the mouse down.

You can scroll with the mouse wheel in the result list.

Make a right click on an element and choose "Add element with all neighbors"

Choose cancel

Make a right click in the pane and choose Demo Diagram.

Play around with left and right clicks of the mouse on elements, into boxes and onto the pane. Use also the scrool wheel of the mouse.

Generate a SOMIX model from files in a local folder

It is possible to analyze folders in the local file system:

Extract a model where files are date and folders are groupings. Choose Model -> Extract File System to SOMIX model (w/o .git). A pop up opens where you specify a local folder on your computer. Therafter it is prompted to specify a folder to the source of the JavaScript code. This is required because it is not possible to determine the source folder from within a browser. Content in .git folders is ignored. This is in most cases helpfull when git is used. Git stores many files which are normally not of interest.

Extract a model of the code in files. This is currently in development. Extract Code from File System to SOMIX model (w/o .git). A pop up opens where you specify a local folder on your computer. Content in .git folders is ignored. This is in most cases helfull when git is used. Git stores many files which are normally not of interest.

Use a SOMIX model

When you have a SOMIX model (You will need to use SAP2Moose for now):

Choose File -> Open Work Folder (Generation informations for files will be stored in this folder)

When this folder has a subfolder SOMIX the application will load the most recent .mse file in this folder automatically. In that case the next step is not required.

Choose File -> Load Model and load a SOMIX model

Choose File -> New Diagram and enter a name for the new diagram.

Make a right click into the pane and choose the name of your diagram. This will change the view and display: "This diagram is currentl empty: ..."

Make a right mouse click into the pane and choose "Make this diagram active". When you later add elements to a diagram, these elements will be added to the active diagram.

Now choose an element and add it to the active diagram like it was described on this page under "First Steps" -> "Demo".

To save the displayed diagram choose File -> Save Displayed Diagram.

When you repeat your work do

• Load a new SOMIX model. This will normally not be the model you used before. The diagram will be automatically adapted to the new software version.
• Choose File -> Open Work Folder
• Choose File -> Read Diagram (You will need "Import old Diagram (XML) only when you worked with the Smalltalk version of Moose2Model).

Export Model Information

This new feature allows you to export a comprehensive list of all model elements, along with the count of calls and accesses to each element. This can be particularly useful for analyzing the usage and interactions of elements within your model.

1. Ensure that you have loaded a SOMIX model into the application.
2. Select the 'Model' menu.
3. Click on 'Export model information'. This will prompt you to choose a location to save the CSV file.
4. The exported file will include details such as the index, technical type, unique name, main group, name, and the number of calls and accesses for each model element.
5. Make sure you have specified a work directory where the export file will be stored.

Features

General

• Load a SOMIX model
• Read a folder and create a SOMIX model of the contained folders and files.
• Create a new diagram
• Force-dragged positioning. Start and stop with a context click in background of pane
• Scrolling by dragging the pane(with "right" mouseclick")
• Dragging elements (with "left" mouseclick)
• Press G to drag always the group an element is in
• Zooming with the wheel of the mouse
• Menu Model
• Extract a SOMIX model from a folder in the local file system
• Extract Code from File System to SOMIX model (w/o .git). Content in .git folders is ignored.
• Load a SOMIX model
• Explore model (Add elements to diagrams)
• Export model information
• Menu Diagram
  • Search elements in the model. The search is case insensitive.
  • Remove all hightlighting of the displayed elements
  • Pin all elements
  • Remove all pinning
  • Unpin all Highlighted elements
  • Highlight all not pinned elements
• Menu Help
  • Switch between dark and white theme
• Context click on elements:
  • Add an element with all neighbors to the active diagram
  • Redo adding an element with all neighbors to the active diagram
  • Get informations on the element
  • Enter or edit a comment for an element
  • Supress an element with all children
  • Redo supressing an element with all children
  • Jump to code with when a link is contained in the model (For SAP: adt links have to be activated for Eclipse. For JavaScript: This works currently only when the user adds the paths to the source folder when prompted. The jump may go to the correct line or higher. This is due to a not exact implementation of the logic to determine the line number.)
  • Remove pinning of recently dragged elements
  • Highlight elements or the using or used elements
• Context click on a grouping - It is also possible to:
?v=67C:\DataEigen\Moose2Model2\src
• Press G to force that the grouping is selected
• Pin all elements of this grouping
• Unpin all elements of this grouping
• Context click on pane:
  • (Only in the diagram with all model elements: Toogle the display of element names)
  • Set a diagram active (But not the diagram with all elements)
  • Start and Stop Force-directed graph
  • Jump to other diagram
• Save information to generate a diagram to file
  • Specify a workfolder first. These folder contains all diagrams which belong to the same model
  • Save the generation information for the displayed diagram. It be stored in a file with extension .m2m and similar name.
  • Read the generation information from an .m2m file. You should have all required model data loaded before. A diagram with identical name is created.
  • Import xml files from the old Smalltalk version of Moose2Model.
  • Please note that no warning is yet raised when information is lost due to wrong handling.

Header

• Display the diagram which is displayed and which is active.
• Unsaved changes are marked with a bullet point behind the name of a diagram.

Diagram with all elements

A diagram with all elments is always displayed. It can be animated as a force-directed graph. This works well for small models. The main intention of this application is not to make force-directed graph, so other tools might work better here.

Circuit Diagram for Software

• Code is displayed as orange box
• Data is displayed as blue circle
• Persistent data is displayed as green circle
• Groupings are indicated by a dashed box and include all elements contained in them
• Elements can be commented