> For the complete documentation index, see [llms.txt](https://evomimic.gitbook.io/map-book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://evomimic.gitbook.io/map-book/dahn-human-experience-of-the-map/dahn-visualizers/node-visualizers.md).

# Node Visualizers

Copyright (c) 2022, this book is offered to the world under Creative Commons license CC BY-NC-SA 4.0

DAHN's *node* *visualizers* present various aspects of an individual holon within the *canvas viewing area*. *Node visualizers* are type-specific. By default, DAHN includes a ***Holon Node Visualizer**.* Additional *node visualizers* (for the various sub-types of Holon) can be contributed to the DAHN V-Space by HI developers. When DAHN encounters a holon to present, the *DAHN selector function* searches the DAHN V-Space for any *node visualizers* available for that holon's specific type. If a *node visualizer* is not available specifically for that holon type, the *selector function* continues up the type hierarchy until it finds a *node visualizer* (ultimately, reaching the *Holon Node Visualizer* if no type-specific node visualizers are discovered). The actual algorithm used by the DAHN selector function considers additional factors beyond just the holon type hierarchy. Refer to the [#dahn-selector-function](#dahn-selector-function "mention") section for more information.

The mockups and discussion in this section describe DAHN's default *Holon Node Visualizer*.

The *Holon Node Visualizer* has the following ***presentation states***:

* *collapsed* -- this state requires minimal screen real-estate&#x20;
* *collapsed-selected* -- same as collapsed, but with a visual indication that the node is currently selected by the human agent (in the mockups provided here, selection is depicted via a yellow glow around the node).
* *expanded* -- this state shows details of the node and allows interaction with the node
* *expanded-selected* -- same as expanded, but with a visual indication that the node is currently selected by the human agent&#x20;

While in the *expanded state*, the visualizer supports two modes:

* *read-mode* -- allows human agent to view, but not modify, information about the holon
* *edit-mode* -- allows human agent to both view and modify holon information (subject to access control restrictions).

{% hint style="info" %}
Note that the mode just refers to a state of the visualizer. Whether or not any given human agent has permission to view and or modify any particular information element is determined by the *MAP Security Model*.
{% endhint %}

The following figure shows the holon node visualizer in different presentation states:

![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2Frgmd0RMbOQ6IMLggRjR6%2Fimage.png?alt=media\&token=b85799c4-171f-472d-8ce0-4e632366e240)

The two small rectangles on the right side of the figure show the *holon node visualizer* in each of its two collapsed presentation states. The left-side of the figure shows the *holon node visualizer* in its *expanded-selected state* and *read-mode* within the *DAHN canvas visualizer*. The yellow glow around the holon membrane indicates this holon is currently selected.

In its *expanded state*, the *Holon Node Visualizer* layout contains three sections: *Title Block*, *Node Action Bar* and *Node Viewing Area*. The enclosing rounded rectangle represents the border or *membrane* of the holon.&#x20;

The *node action bar* presents the following operations for this holon:

![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2F4imCJxfOGtU2cGuvyN7E%2Fimage.png?alt=media\&token=ba93ae92-2b9f-48e0-b0dd-1e58961415f3)

As noted in the section on [Foundations -- Holons, Memes, Resources, Agents and Services and Agent Spaces](/map-book/map-foundations.md#holonic-structure-layer-0), Koestler characterized holons as having two aspects -- *inward facing* and *outward facing*. This insight is directly reflected in the *Holon Node Visualizer's* design. The *Node Action Bar's **Inside*****&#x20;menu** allows different aspects of the *interior* of the holon to be displayed within the *node viewing area* (i.e., inside the holon's visual membrane)*.* The ***Outside*****&#x20;menu** allows the external relationships this holon has with other holons to be viewed. This is accomplished by first shrinking the *Holon Node Visualizer* to its collapsed state and then showing its interconnections to other holon types using a *graph visualizer*.

* ***Type Icon*** -- shows the type of holon. Clicking on the *Type Icon* allows the human agent to select a different node visualizer (if available) and also get more information about the holon type for this node. Selecting the About \<type> option causes a *Schema Viewer* for that Type to be displayed in the Node Viewing Area that shows the properties, actions & relationships defined for that Type.
* ***Level*** -- allows the human agent to navigate up and down the holarchy. This is explained further in the section on [#holon-graph-visualizers](#holon-graph-visualizers "mention")
* ***Outside*** -- allows the human agent to select one or more of the exterior relationship types associated with this holon. Note that the list of relationships to choose from is determined from the *L0 holon descriptor*. After selecting the desired relationship types, the *holon node visualizer* shrinks to its *collapsed* state within the *canvas viewing area.* Additionally, *holon nodes* or *holon collection nodes* are connected via lines to the (now collapsed) holon node for each of the selected relationship types.  See [#holon-graph-visualizers](#holon-graph-visualizers "mention") for details.
* ***Inside*** -- allows the human agent to select from a menu of available options for viewing the interior aspects of the holon within the *node viewing area* (i.e., *inside* the holon's membrane). These include:
  * ***Properties*** -- displays the *properties* of this holon (and embedded holons) within the *node viewing area.* Note that the list of properties to display is determined from the *L0 holon descriptor*.&#x20;
  * ***Metrics*** -- displays various metrics associated with this holon within the *node viewing area*
  * ***Events*** -- shows the history of events associated with this holon within the *node viewing area*
  * ***Children*** -- shows the child holons of this holon within its *node viewing area*&#x20;
* ***Edit*** (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FJjTuWkvuMCsEKN2nvu02%2Fimage.png?alt=media\&token=a7d750b9-c224-4427-96eb-41e4910ae6ae))(only visible while in *read-mode*) -- Allows the human agent to switch to *edit-mode* in order to edit the properties of this Holon Node. This button is only active if the agent has permission to edit this holon.
* ***Submit*** (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FO3vqJVFsP6FSKdBWj66E%2Fimage.png?alt=media\&token=879d7e42-65e3-421c-a0b7-28b009262c64)) (only visible while in *edit-mode*) -- Allows the human agent to submit the changes they have made to this holon's properties. If accepted, the changes are persisted, a *modify-event* is added to the holon's *event log* and the node is switched back to *read-mode*.
* ***Cancel*** (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FWGFm0ONQxUw8JhkpMpCr%2Fimage.png?alt=media\&token=54a7dff6-03f3-4c21-8d79-f8bdb88f933f)) (only visible while in *edit-mode*) -- Allows the human agent to revert the state of the holon's properties to the values they had before the agent began editing. Swtiches mode back to *read-mode*.
* ***Actions*** (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FMiYJKjeRE7MqQQUFXaG4%2Fimage.png?alt=media\&token=3a008d9b-b38b-46e0-89b0-b8051fd60ea1)) -- allows the human agent to select from the list of permitted actions offered by this holon. Upon selecting an action, the human agent may be prompted to enter additional information to guide the execution of that action. The list of actions to display is determined from the *L0 holon descriptor*. If there is insufficient screen real estate to show buttons for all actions, a *More Actions* drop menu is displayed containing the remaining actions. &#x20;

By default, when a holon is encountered, its *node viewing area* displays that holon's ***Properties View***. Selecting *metrics* or *events* or *children* from the *Interior menu* switches the view within the *node viewing area* to show the holon's metrics, events, or child graph, respectively. This default behavior for a given holon type can be changed by navigating to the desired view (e.g., the metrics view) and clicking on the Pin icon (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FkWHPW7y7WHR0PD28lYIP%2Fimage.png?alt=media\&token=0f6f845b-5066-498a-a69b-cb3c936bb960)).

An example of a holon being displayed in *Edit-Mode* of the *Properties View* of DAHN's *holon node* visualizer is shown below:

![Example Holon Node: Resource:Book:Emerging World](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2Fej4Vjki5F7hVdE72dtqe%2Fimage.png?alt=media\&token=53791aa8-ce84-4bfe-88c1-3f83558c7aa1)

In this example, the holon being presented is the book [Emerging World](https://rogerpbriggs.org/books) authored by Roger Briggs. Its holon type is *Book* which is a sub-type of *Resource*.&#x20;

For the purposes of this example, the *L0 Holon Descriptor* for the *Book* holon type, lists (say) at least three *actions* (*get*, *review*, *curate*) and six properties: *short name*, *full name*, *format*, *brief description*, *URL* and *publication date*. The *DAHN Selector Function* will dynamically select a *property visualizer* for each property as described in the [#property-visualizers](#property-visualizers "mention") section.

#### Holon Node Visualizer Personalization Controls

The following personalization options are offered by the *Holon Node Visualizer*:

* ***Action Button Order and Visibility*** -- By default, the order in which the *action buttons* are displayed (left-to-right on the *node action bar*, top-to-bottom within the *More Actions* drop menu) is determined *adaptively* based on *salience* and *affinity* as described in the [Broken mention](broken://pages/eb7lycq9TXMrTROw2KOE) section. This ordering can be over-ridden by the human agent by grabbing the visualizer handle (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2F9n5HBR5u9CLrhshFvulj%2Fimage.png?alt=media\&token=da536dd0-7571-4800-aec0-288c7d9a3312)) and moving the action button to a different position in the list (including to/from the *More Actions* list).&#x20;
* ***Property Order and Visibility*** -- Likewise, the default order (top-to-bottom) and visibility of each property is also determined *adaptively*. This ordering can be over-ridden by the human agent by grabbing the *visualizer handle* (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2F9n5HBR5u9CLrhshFvulj%2Fimage.png?alt=media\&token=da536dd0-7571-4800-aec0-288c7d9a3312)) and moving the property up or down in the form. Moving it to the ![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FGbCOo7VIFK3ybC8Hx44E%2Fimage.png?alt=media\&token=f8c0751c-810a-4fb1-b57f-c252ba117b3b)region will hide that property. Clicking on the ![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FmKqUT5ZaGXo2RFPfJUsS%2Fimage.png?alt=media\&token=f90c228e-cc09-4eb8-ba63-4aaa910873fb)button will show the list of currently hidden properties and allow them to be made visible by dragging their handle into the desired position on the form.&#x20;
* ***Property Visualizer*** -- In some cases, more than one property visualizer may be available in the DAHN P-Space for a given property. Clicking on the *visualizer handle* (![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2F9n5HBR5u9CLrhshFvulj%2Fimage.png?alt=media\&token=da536dd0-7571-4800-aec0-288c7d9a3312)), as opposed to dragging it, will show the list of available visualizers and allow the human agent to select one.
* ***Holon Visualizer*** -- depending upon the holon type of the node being displayed, alternate node visualizers may be available. If so, clicking on the personalization control next to the Properties View title will show the list of available alternate node-level visualizers. Clicking on a different visualizer will switch the view of the holon to the view offered by that visualizer.

These personalization actions affect not only the current view for this human agent, but also influence the default presentation for other agents. This is described further in the [Broken mention](broken://pages/eb7lycq9TXMrTROw2KOE) section.&#x20;

#### Viewing Related Holons

While visiting a holon, the human agent may be curious to know what navigational paths are available to them from that node, i.e., to know how this holon is related to other holons. As shown in the following diagram, in our (simplified) example, the *Book* resource types can participate in four kinds of external relationships: (1) *authored by*, (2) *memes*, (3) *reviews* and (4) *available from*. These are visible under the *Outside* drop menu.

![](https://777163467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgr-A9gty1QVUBTbFyp%2Fuploads%2FWlXTIGMvevi4eoHQnkTk%2Fimage.png?alt=media\&token=e69fd2e6-b376-46c4-9c2a-e1816af28a8b)

The drop menu allows one or more of the available relationships to be selected for viewing. In the above figure, the *authored by*, *memes*, and *reviews* relationship types have been selected.

Once the agent has indicated what relationships they want to see, the *DAHN Canvas* switches to the *Holon Graph View*. &#x20;

**Copyright (c) 2022, this book is offered to the world under Creative Commons license** [**CC BY-NC-SA 4.0**](https://creativecommons.org/licenses/by-nc-sa/4.0/)
