Cytoscape switch contain

imports/cyto/elements.tsx

@@ -1,11 +1,12 @@
 import { useDeep } from '@deep-foundation/deeplinks/imports/client';
 import json5 from 'json5';
 import { useMemo } from 'react';
-import { useInsertingCytoStore, useShowFocus, useShowTypes } from '../hooks';
+import { useInsertingCytoStore, useShowFocus, useShowTypes, useShowContain } from '../hooks';
 
 export function useCytoElements(ml, _links, cy, spaceId) {
   const [showTypes, setShowTypes] = useShowTypes();
   const [showFocus, setShowFocus] = useShowFocus();
+  const [showContain, setShowContain] = useShowContain();
   const [insertingCyto, setInsertingCyto] = useInsertingCytoStore();
   const deep = useDeep();
 
@@ -46,6 +47,8 @@ export function useCytoElements(ml, _links, cy, spaceId) {
       _symbol = ml.byTo[link?.type_id]?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Symbol'))?.value?.value;
     }
 
+    const isNotShowContainLinks = !showContain && _type === 'type:Contain';
+
     // const parent = link?._applies?.find(q => q.includes('query-'));
 
     const element = {
@@ -64,7 +67,7 @@ export function useCytoElements(ml, _links, cy, spaceId) {
       },
       selectable: false,
       classes: [
-        'link-node',
+        isNotShowContainLinks ? 'link-disabled' : 'link-node',
         ...(focus ? ['focused'] : ['unfocused']),
       ].join(' '),
 
@@ -137,8 +140,26 @@ export function useCytoElements(ml, _links, cy, spaceId) {
     if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value) {
       _symbol = link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value;
     }
+
+    const isNotShowContainLinks = !showContain && _type === 'type:Contain';
+
     if (!!cy) {
       if ((isFocusSpace && showFocus) || !isFocusSpace) {
+        if(isNotShowContainLinks) {
+          if (link.to_id) {
+            if (ml?.byId?.[link.to_id] && _elements[link.to_id] && ml?.byId?.[link.from_id] && _elements[link.from_id]) {
+              elements.push({
+                data: { id: `${link.id}-from-to-not-contain`, source: `${link.from_id}`, target: `${link.to_id}`, link },
+                selectable: false,
+                classes: [
+                  'link-from-to-not-contain',
+                  ...(focus ? ['focused'] : ['unfocused'])
+                ].join(' '),
+              });
+            }
+          }
+          continue
+        };
         if (link.from_id) {
           if (ml?.byId?.[link.from_id] && _elements[link.from_id]) {
             elements.push({

imports/cyto/menu.tsx

@@ -4,7 +4,7 @@ import { useDeep } from "@deep-foundation/deeplinks/imports/client";
 import copy from "copy-to-clipboard";
 import { useState, useEffect, useMemo } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useSpaceId, useShowTypes, useLayout, useContainer, useShowExtra, useShowFocus, usePromiseLoader, useTraveler, useMediaQuery, useAutoFocusOnInsert, useBreadcrumbs, useReserved } from "../hooks";
+import { useSpaceId, useShowTypes, useLayout, useContainer, useShowExtra, useShowFocus, usePromiseLoader, useTraveler, useMediaQuery, useAutoFocusOnInsert, useBreadcrumbs, useReserved, useShowContain } from "../hooks";
 import { useCytoEditor } from "./hooks";
 import { IoExitOutline } from 'react-icons/io5';
 import { PackagerInterface } from "../packager-interface/packager-interface";
@@ -34,6 +34,7 @@ export function CytoMenu({
   const [extra, setExtra] = useShowExtra();
   const [focus, setFocus] = useShowFocus();
   const [traveler, setTraveler] = useTraveler();
+  const [showContain, setShowContain] = useShowContain();
   const [reserved, setReserved] = useReserved();
   const [breadcrumbs, setBreadcrumbs] = useBreadcrumbs();
   const deep = useDeep();
@@ -146,6 +147,12 @@ export function CytoMenu({
           </FormLabel>
           <Switch id='breadcrumbs-switch' isChecked={breadcrumbs} onChange={() => setBreadcrumbs(!breadcrumbs)}/>
         </FormControl>
+        <FormControl display='flex' alignItems='center'>
+          <FormLabel htmlFor='animation-layout-switch' mb='0' fontSize='sm' mr='0.25rem'>
+            show contain
+          </FormLabel>
+          <Switch id='animation-layout-switch' isChecked={showContain} onChange={() => setShowContain(!showContain)}/>
+        </FormControl>
         {/* <FormControl display='flex' alignItems='center'>
           <FormLabel htmlFor='reserved switch' mb='0' fontSize='sm' mr='0.25rem'>
             reserved

imports/cyto/stylesheets.tsx

@@ -75,6 +75,12 @@ export function useCytoStylesheets(): any {
         'underlay-shape': 'ellipse',
       }
     },
+    {
+      selector: '.link-from-to-not-contain',
+      style: {
+        'target-arrow-shape': 'triangle-tee',
+      }
+    },
     {
       selector: '.link-to',
       style: {

imports/hooks.tsx

@@ -85,6 +85,9 @@ export function useCytoViewport<S extends { pan: { x: number; y: number; }; zoom
 export function useShowFocus() {
   return useQueryStore<any>('show-focus', false);
 };
+export function useShowContain() {
+  return useQueryStore<any>('show-contain', true);
+};
 export function useBreadcrumbs() {
   return useQueryStore<any>('breadcrumbs', false);
 };