color mark in connection tree

packages/web/src/appobj/AppObjectCore.svelte

@@ -20,6 +20,7 @@
   export let expandIcon = undefined;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
+  export let colorMark = null;
 
   $: isChecked = checkedObjectsStore && $checkedObjectsStore.find(x => module.extractKey(data) == module.extractKey(x));
 
@@ -86,6 +87,9 @@
   {:else}
     <FontIcon {icon} />
   {/if}
+  {#if colorMark}
+    <FontIcon style={`color:${colorMark}`} icon="icon square" />
+  {/if}
   {title}
   {#if statusIcon}
     <span class="status">

packages/web/src/appobj/AppObjectGroup.svelte

@@ -13,6 +13,7 @@
   export let module;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
+  export let passProps;
 
   let isExpanded = true;
 
@@ -61,6 +62,7 @@
       {checkedObjectsStore}
       on:objectClick
       {disableContextMenu}
+      {passProps}
     />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectList.svelte

@@ -14,6 +14,7 @@
   export let expandIconFunc = undefined;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
+  export let passProps;
 
   export let groupFunc = undefined;
 
@@ -75,6 +76,7 @@
       {groupFunc}
       {disableContextMenu}
       {filter}
+      {passProps}
     />
   {/each}
 {:else}
@@ -92,6 +94,7 @@
       {disableContextMenu}
       {filter}
       isExpandedBySearch={childrenMatched.includes(data)}
+      {passProps}
     />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -21,6 +21,7 @@
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let isExpandedBySearch = false;
+  export let passProps;
 
   let isExpanded = false;
 
@@ -50,6 +51,7 @@
     {checkedObjectsStore}
     {module}
     {disableContextMenu}
+    {passProps}
   />
 
   {#if (isExpanded || isExpandedBySearch) && subItemsComponent}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -31,6 +31,7 @@
   import { getLocalStorage } from '../utility/storageCache';
 
   export let data;
+  export let passProps;
 
   let statusIcon = null;
   let statusTitle = null;
@@ -198,6 +199,7 @@
   statusIcon={statusIcon || engineStatusIcon}
   statusTitle={statusTitle || engineStatusTitle}
   {extInfo}
+  colorMark={passProps?.connectionColorFactory({ conid: data._id })}
   menu={getContextMenu}
   on:click={handleConnect}
   on:click