@likec4/diagram 1.17.1 → 1.19.0

package/src/xyflow/nodes/shared/Toolbar.tsx

@@ -1,14 +1,16 @@
 import {
   type BorderStyle,
-  defaultTheme,
   type Element,
-  ElementShapes,
   type Fqn,
   type NonEmptyArray,
   type ThemeColor,
-  type ViewChange
+  type ViewChange,
+  defaultTheme,
+  DiagramNode,
+  ElementShapes,
 } from '@likec4/core'
 import {
+  type PopoverProps,
   ActionIcon,
   Box,
   Button,
@@ -25,7 +27,6 @@ import {
   Paper,
   Popover,
   PopoverDropdown,
-  type PopoverProps,
   PopoverTarget,
   rem,
   SegmentedControl,
@@ -34,12 +35,13 @@ import {
   Stack,
   Text,
   Tooltip as MantineTooltip,
-  TooltipGroup
+  TooltipGroup,
 } from '@mantine/core'
 import { IconCheck, IconFileSymlink, IconSelector, IconTransform } from '@tabler/icons-react'
-import { NodeToolbar, type NodeToolbarProps } from '@xyflow/react'
+import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
+import type { MergeExclusive } from 'type-fest'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useUpdateEffect } from '../../../hooks'
 import { stopPropagation } from '../../utils'
 
@@ -53,12 +55,12 @@ const {
 const themedColors = [
   { key: 'primary', value: primary.fill },
   { key: 'secondary', value: secondary.fill },
-  { key: 'muted', value: muted.fill }
+  { key: 'muted', value: muted.fill },
 ] satisfies Array<{ key: ThemeColor; value: string }>
 
 const colors = keys(otherColors).map(key => ({
   key,
-  value: defaultTheme.elements[key].fill
+  value: defaultTheme.elements[key].fill,
 }))
 
 type ThemeColorKey = typeof themedColors[0]['key']
@@ -71,11 +73,11 @@ const Tooltip = MantineTooltip.withProps({
   closeDelay: 150,
   label: '',
   children: null,
-  offset: 4
+  offset: 4,
 })
 
 type ToolbarProps = NodeToolbarProps & {
-  element: Element
+  element: DiagramNode
   onColorPreview: (color: ThemeColor | null) => void
 }
 
@@ -86,21 +88,23 @@ export function CompoundToolbar({
   onColorPreview,
   ...props
 }: ToolbarProps) {
+  const modelRef = DiagramNode.modelRef(element)
+  const deploymentRef = DiagramNode.deploymentRef(element)
   const targets = [element.id] as NonEmptyArray<Fqn>
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
-    enableRelationshipBrowser
+    enableRelationshipBrowser,
   } = useDiagramState(s => ({
-    hasGoToSource: !!s.onOpenSourceElement,
-    enableRelationshipBrowser: s.enableRelationshipBrowser
+    hasGoToSource: !!s.onOpenSource,
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
   }))
 
   const onChange: OnStyleChange = (style) => {
     diagramApi.getState().triggerChangeElementStyle({
       op: 'change-element-style',
       style,
-      targets
+      targets,
     })
   }
 
@@ -117,8 +121,9 @@ export function CompoundToolbar({
         elementBorderStyle={element.style?.border}
         onChange={onChange}
       />
-      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
-      {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
+      {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
+      {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
+      {enableRelationshipBrowser && !!modelRef && <BrowseRelationshipsButton elementId={modelRef} />}
     </Toolbar>
   )
 }
@@ -156,14 +161,16 @@ export function ElementToolbar({
   onColorPreview,
   ...props
 }: ToolbarProps) {
+  const modelRef = DiagramNode.modelRef(element)
+  const deploymentRef = DiagramNode.deploymentRef(element)
   const targets = [element.id] as NonEmptyArray<Fqn>
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
-    enableRelationshipBrowser
+    enableRelationshipBrowser,
   } = useDiagramState(s => ({
-    hasGoToSource: !!s.onOpenSourceElement,
-    enableRelationshipBrowser: s.enableRelationshipBrowser
+    hasGoToSource: !!s.onOpenSource,
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
   }))
   const portalProps = useMantinePortalProps()
 
@@ -171,7 +178,7 @@ export function ElementToolbar({
     diagramApi.getState().triggerChangeElementStyle({
       op: 'change-element-style',
       style,
-      targets
+      targets,
     })
   }
 
@@ -189,8 +196,8 @@ export function ElementToolbar({
         offset={2}
         styles={{
           item: {
-            padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)'
-          }
+            padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)',
+          },
         }}
         {...portalProps}
       >
@@ -234,20 +241,21 @@ export function ElementToolbar({
         onChange={onChange}
         position="right-end"
       />
-      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
-      {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
+      {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
+      {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
+      {enableRelationshipBrowser && !!modelRef && <BrowseRelationshipsButton elementId={modelRef} />}
     </Toolbar>
   )
 }
 
 type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
-  element: Element
+  element: DiagramNode
   isOpacityEditable?: boolean
   onColorPreview: (color: ThemeColor | null) => void
   onChange: OnStyleChange
 }
 
-function GoToSourceButton({ elementId }: { elementId: Fqn }) {
+function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: Fqn }>) {
   const diagramApi = useDiagramStoreApi()
   const portalProps = useMantinePortalProps()
   return (
@@ -258,7 +266,15 @@ function GoToSourceButton({ elementId }: { elementId: Fqn }) {
         color="gray"
         onClick={e => {
           e.stopPropagation()
-          diagramApi.getState().onOpenSourceElement?.(elementId)
+          if (props.elementId) {
+            diagramApi.getState().onOpenSource?.({
+              element: props.elementId,
+            })
+          } else if (props.deploymentId) {
+            diagramApi.getState().onOpenSource?.({
+              deployment: props.deploymentId,
+            })
+          }
         }}>
         <IconFileSymlink stroke={1.8} style={{ width: '70%' }} />
       </ActionIcon>
@@ -317,7 +333,7 @@ function ColorButton({
 function ColorSwatches({
   elementColor,
   onColorPreview,
-  onChange
+  onChange,
 }: {
   elementColor: ThemeColor
   onColorPreview: (color: ThemeColor | null) => void
@@ -392,7 +408,7 @@ function ColorSwatches({
 
 function BorderStyleOption({
   elementBorderStyle = 'dashed',
-  onChange
+  onChange,
 }: {
   elementBorderStyle: BorderStyle | undefined
   onChange: OnStyleChange
@@ -417,14 +433,14 @@ function BorderStyleOption({
         styles={{
           label: {
             paddingTop: 2,
-            paddingBottom: 2
-          }
+            paddingBottom: 2,
+          },
         }}
         data={[
           { label: 'Solid', value: 'solid' },
           { label: 'Dashed', value: 'dashed' },
           { label: 'Dotted', value: 'dotted' },
-          { label: 'None', value: 'none' }
+          { label: 'None', value: 'none' },
         ]}
       />
     </Box>
@@ -433,7 +449,7 @@ function BorderStyleOption({
 
 function OpacityOption({
   elementOpacity = 100,
-  onOpacityChange
+  onOpacityChange,
 }: {
   elementOpacity: number | undefined
   onOpacityChange: (opacity: number) => void
@@ -465,14 +481,14 @@ function BrowseRelationshipsButton({ elementId }: { elementId: Fqn }) {
         onClick={e => {
           e.stopPropagation()
           diagramApi.getState().openOverlay({
-            relationshipsOf: elementId
+            relationshipsOf: elementId,
           })
         }}>
         <IconTransform
           stroke={2}
           style={{
             width: '72%',
-            height: '72%'
+            height: '72%',
           }} />
       </ActionIcon>
     </Tooltip>

package/src/xyflow/types.ts

@@ -1,60 +1,57 @@
-import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPoint } from '@likec4/core'
-import type { Edge, InternalNode, Node, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
-import { isNode } from '@xyflow/react'
-import { isTruthy } from 'remeda'
-import type { Simplify } from 'type-fest'
-
-export type ElementXYFlowNode = Node<{
-  fqn: Fqn
-  element: DiagramNode
-}, 'element'>
-
-export type CompoundXYFlowNode = Node<{
-  fqn: Fqn
-  isViewGroup: boolean
-  element: DiagramNode
-}, 'compound'>
-
-export type XYFlowNode = ElementXYFlowNode | CompoundXYFlowNode
-
-export type InternalXYFlowNode = InternalNode<XYFlowNode>
-
-export namespace XYFlowNode {
-  export function isCompound(node: unknown): node is CompoundXYFlowNode {
-    return isNode(node) && node.type === 'compound'
+import type { BBox, DiagramEdge, DiagramNode, XYPoint } from '@likec4/core'
+import type { Edge as ReactFlowEdge, InternalNode as ReactFlowInternalNode, Node as ReactFlowNode, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
+import type { SetRequired, Simplify } from 'type-fest'
+import type { SharedFlowTypes } from '../overlays/shared/xyflow/_types'
+
+export namespace DiagramFlowTypes {
+
+  export type NodeData = {
+    /**
+     * The DiagramNode backing this node.
+     */
+    element: DiagramNode
   }
-  export function isElement(node: Node): node is ElementXYFlowNode {
-    return isNode(node) && node.type === 'element'
+
+  export type CompoundNodeData = NodeData & {
+    /**
+     * Whether this node is a view group.
+     */
+    isViewGroup: boolean
   }
 
-  export const is = (node: Node): node is XYFlowNode => isCompound(node) || isElement(node)
-}
+  export type ElementNode = SetRequired<ReactFlowNode<
+      SharedFlowTypes.NonEmptyNodeData & NodeData,
+      'element'>,
+    'type'>
 
-export type RelationshipData = {
-  edge: DiagramEdge
-  // if set - edge was changed by user
-  controlPoints: XYPoint[] | null
-  label: null | {
-    bbox: BBox
-    text: string
-  }
-}
+  export type CompoundNode = SetRequired<ReactFlowNode<
+      SharedFlowTypes.NonEmptyNodeData & CompoundNodeData,
+      'compound'>,
+    'type'>
 
-export type RelationshipEdge = Simplify<
-  Edge<RelationshipData, 'relationship'> & {
-    type: 'relationship'
-    // Make field required
-    data: RelationshipData
-  }
->
+  export type Node = ElementNode | CompoundNode
 
-export type XYFlowEdge = RelationshipEdge
+  export type InternalNode = ReactFlowInternalNode<Node>
 
-export namespace XYFlowEdge {
-  export type Data = RelationshipData
+  export type XYFlowInstance = ReactFlowInstance<Node, Edge>
 
-  export const isRelationship = (e: Edge): e is RelationshipEdge => e.type === 'relationship' && isTruthy(e.data)
-}
+  export type XYFlowState = ReactFlowState<Node, Edge>
+
+  export type DiagramEdgeData = {
+    edge: DiagramEdge
+    // if set - edge was changed by user
+    controlPoints: XYPoint[] | null
+    label: null | {
+      bbox: BBox
+      text: string
+    }
+  }
 
-export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>
-export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>
+  export type Edge = Simplify<
+    ReactFlowEdge<DiagramEdgeData, 'relationship'> & {
+      type: 'relationship'
+      // Make field required
+      data: DiagramEdgeData
+    }
+  >
+}

package/src/xyflow/useLayoutConstraints.ts

@@ -1,11 +1,11 @@
-import { invariant, isAncestor, type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
-import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
+import { type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
+import type { NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
 import { useDiagramStoreApi } from '../hooks'
 import { type XYStoreApi } from '../hooks/useXYFlow'
-import type { XYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 
 abstract class Rect {
   static readonly LeftPadding = 40
@@ -60,7 +60,7 @@ class Compound extends Rect {
   public readonly children = [] as Rect[]
 
   constructor(
-    xynode: InternalNode<XYFlowNode>,
+    xynode: DiagramFlowTypes.InternalNode,
     protected readonly parent: Compound | null = null
   ) {
     super()
@@ -74,7 +74,7 @@ class Compound extends Rect {
 
 class Leaf extends Rect {
   constructor(
-    xynode: InternalNode<XYFlowNode>,
+    xynode: DiagramFlowTypes.InternalNode,
     public readonly parent: Compound | null = null
   ) {
     super()
@@ -94,7 +94,7 @@ class Leaf extends Rect {
 }
 
 type NodePositionUpdater = (
-  nodes: Array<{ rect: Rect | Compound; node: InternalNode<XYFlowNode> }>
+  nodes: Array<{ rect: Rect | Compound; node: DiagramFlowTypes.InternalNode }>
 ) => void
 
 export function createLayoutConstraints(
@@ -108,7 +108,7 @@ export function createLayoutConstraints(
     const ancestors = [] as string[]
     const xynode = nodeLookup.get(nodeId)
     let parent = xynode?.parentId
-    let parentNode: InternalNode<XYFlowNode> | undefined
+    let parentNode: DiagramFlowTypes.InternalNode | undefined
     while (parent && (parentNode = nodeLookup.get(parent))) {
       ancestors.push(parentNode.id as NodeId)
       parent = parentNode.parentId
@@ -120,7 +120,7 @@ export function createLayoutConstraints(
     editingNodeIds.flatMap(ancestorsOf)
   )
 
-  const traverse = new Array<{ xynode: InternalNode<XYFlowNode>; parent: Compound | null }>()
+  const traverse = new Array<{ xynode: DiagramFlowTypes.InternalNode; parent: Compound | null }>()
 
   for (const [, xynode] of nodeLookup) {
     if (isNullish(xynode.parentId)) {
@@ -200,7 +200,7 @@ export function createLayoutConstraints(
           })
         }
         return acc
-      }, [] as NodeChange<XYFlowNode>[])
+      }, [] as NodeChange<DiagramFlowTypes.Node>[])
     )
   }
 
@@ -234,7 +234,7 @@ export function createLayoutConstraints(
   }
 }
 
-type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>
+type LayoutConstraints = Required<Pick<ReactFlowProps<DiagramFlowTypes.Node>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>
 /**
  * Keeps the layout constraints (parent nodes and children) when dragging a node
  */

package/src/xyflow/useXYFlowEvents.ts

@@ -1,14 +1,15 @@
+import { DiagramNode } from '@likec4/core'
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
-import { isNonNullish, isTruthy } from 'remeda'
+import { first, isNonNullish, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../hooks/useDiagramState'
-import type { XYFlowEdge, XYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 
 export type XYFlowEventHandlers = Simplify<
   Required<
     Pick<
-      ReactFlowProps<XYFlowNode, XYFlowEdge>,
+      ReactFlowProps<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>,
       | 'onDoubleClick'
       | 'onPaneClick'
       | 'onNodeClick'
@@ -19,8 +20,6 @@ export type XYFlowEventHandlers = Simplify<
       | 'onNodeContextMenu'
       | 'onEdgeContextMenu'
       | 'onPaneContextMenu'
-      | 'onNodeMouseEnter'
-      | 'onNodeMouseLeave'
       | 'onEdgeMouseEnter'
       | 'onEdgeMouseLeave'
     >
@@ -34,10 +33,6 @@ export function useXYFlowEvents() {
 
   const dblclickTimeout = useRef<number>()
 
-  // If we are in focused mode, on edge enter we want to "highlight" the other node
-  // This ref contains the id of this node
-  const hoveredNodeFromOnEdgeEnterRef = useRef('')
-
   return useMemo(() => {
     const dbclickLock = () => {
       if (dblclickTimeout.current !== undefined) {
@@ -123,9 +118,11 @@ export function useXYFlowEvents() {
           nodesSelectable,
           enableElementDetails,
           setLastClickedNode,
-          onOpenSourceElement,
+          onOpenSource,
           openOverlay
         } = diagramApi.getState()
+        const modelRef = DiagramNode.modelRef(xynode.data.element)
+        const deploymentRef = DiagramNode.deploymentRef(xynode.data.element)
         setLastClickedNode(xynode.id)
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
@@ -134,8 +131,16 @@ export function useXYFlowEvents() {
 
         let stopPropagation = false
 
-        if (clickedRecently && !!onOpenSourceElement) {
-          onOpenSourceElement(xynode.data.element.id)
+        if (clickedRecently && !!onOpenSource && (modelRef || deploymentRef)) {
+          if (modelRef) {
+            onOpenSource({
+              element: modelRef
+            })
+          } else if (deploymentRef) {
+            onOpenSource({
+              deployment: deploymentRef
+            })
+          }
           stopPropagation = true
         }
 
@@ -152,7 +157,7 @@ export function useXYFlowEvents() {
               stopPropagation = true
               break
             }
-            case !clickedRecently && focusedNodeId === xynode.id && enableElementDetails: {
+            case !clickedRecently && modelRef && focusedNodeId === xynode.id && enableElementDetails: {
               openOverlay({
                 elementDetails: xynode.data.element.id
               })
@@ -160,7 +165,9 @@ export function useXYFlowEvents() {
               break
             }
           }
-        } else if (enableElementDetails && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick) {
+        } else if (
+          enableElementDetails && modelRef && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick
+        ) {
           openOverlay({
             elementDetails: xynode.data.element.id
           })
@@ -198,6 +205,7 @@ export function useXYFlowEvents() {
           focusedNodeId,
           xystore,
           nodesSelectable,
+          onOpenSource,
           focusOnNode,
           onEdgeClick,
           setLastClickedEdge
@@ -231,6 +239,12 @@ export function useXYFlowEvents() {
             event.stopPropagation()
             return
           }
+        } else if (onOpenSource && !onEdgeClick) {
+          onOpenSource({
+            relation: first(xyedge.data.edge.relations)!
+          })
+          event.stopPropagation()
+          return
         } else if (nodesSelectable) {
           xystore.getState().addSelectedEdges([xyedge.id])
           if (!onEdgeClick) {
@@ -286,33 +300,15 @@ export function useXYFlowEvents() {
           diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
         }
       },
-      onNodeMouseEnter: (_event, xynode) => {
-        hoveredNodeFromOnEdgeEnterRef.current = ''
-        diagramApi.getState().setHoveredNode(xynode.id)
-      },
-      onNodeMouseLeave: (_event, xynode) => {
-        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
-        if (hoveredNodeId === xynode.id) {
-          setHoveredNode(null)
-        }
-      },
-      onEdgeMouseEnter: (_event, { id, source, target }) => {
-        const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState()
+      onEdgeMouseEnter: (_event, { id }) => {
+        const { setHoveredEdge } = diagramApi.getState()
         setHoveredEdge(id)
-        if ((focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
-          const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source
-          setHoveredNode(next)
-        }
       },
       onEdgeMouseLeave: (_event, xyedge) => {
-        const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        const { hoveredEdgeId, setHoveredEdge } = diagramApi.getState()
         if (hoveredEdgeId === xyedge.id) {
           setHoveredEdge(null)
         }
-        if (hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current) {
-          setHoveredNode(null)
-        }
-        hoveredNodeFromOnEdgeEnterRef.current = ''
       }
     }) satisfies XYFlowEventHandlers
   }, [diagramApi])

package/src/xyflow/utils.ts

@@ -4,7 +4,7 @@ import type { InternalNode, Rect, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
-import type { InternalXYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 
 export function toDomPrecision(v: number | null) {
   if (v === null) {
@@ -17,7 +17,7 @@ export function distance(a: XYPosition, b: XYPosition) {
   return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
 }
 
-export const nodeToRect = (nd: InternalXYFlowNode): Rect => ({
+export const nodeToRect = (nd: DiagramFlowTypes.InternalNode): Rect => ({
   x: nd.internals.positionAbsolute.x,
   y: nd.internals.positionAbsolute.y,
   width: nd.measured.width ?? nd.width ?? nd.data.element.width,

package/src/ui/OptionsPanel.css.ts

@@ -1,9 +0,0 @@
-import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars } from '../theme-vars'
-
-export const panel = style({
-  top: fallbackVar(vars.optionsPanel.top, '1rem'),
-  right: fallbackVar(vars.optionsPanel.right, '1rem'),
-  margin: 0,
-  boxShadow: mantine.shadows.xl
-})

package/src/ui/OptionsPanel.tsx

@@ -1,70 +0,0 @@
-import { Card } from '@mantine/core'
-import { useOnSelectionChange } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual as eq } from 'fast-equals'
-import { AnimatePresence, m } from 'framer-motion'
-import { useState } from 'react'
-import { useDiagramState } from '../hooks/useDiagramState'
-import { NodeOptions } from './options/NodeOptions'
-import * as styles from './OptionsPanel.css'
-
-/**
- * @deprecated
- */
-export function OptionsPanel() {
-  const { isFocused, viewId } = useDiagramState(s => ({
-    viewId: s.view.id,
-    isFocused: s.focusedNodeId !== null || s.activeWalkthrough !== null
-  }))
-  const [selected, setSelected] = useState<{
-    nodes: string[]
-    edges: string[]
-  }>({
-    nodes: [],
-    edges: []
-  })
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      const newSelected = {
-        nodes: nodes.map(n => n.id).sort(),
-        edges: edges.map(e => e.id).sort()
-      }
-      if (!eq(selected, newSelected)) {
-        setSelected(newSelected)
-      }
-    }
-  })
-  const { nodes } = selected
-  // const hasAnySelection = !isFocused && (nodes.length > 0 || edges.length > 0)
-  const hasAnySelection = !isFocused && nodes.length > 0
-  return (
-    <AnimatePresence mode="wait">
-      {hasAnySelection && (
-        <m.div
-          key={viewId}
-          initial={{ opacity: 0, scale: 0.85 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{
-            opacity: 0,
-            scale: 0.85
-          }}
-          transition={{ duration: 0.14 }}
-          className={clsx('react-flow__panel', styles.panel)}
-          style={{
-            transformOrigin: 'center right',
-            maxWidth: '320px'
-          }}
-        >
-          <Card shadow="md">
-            {nodes.length > 0 && <NodeOptions selectedNodeIds={nodes} />}
-            {
-              /* nodes.length === 0 && edges.length > 0 && (
-              <EdgeOptions selectedEdgeIds={edges} />
-            ) */
-            }
-          </Card>
-        </m.div>
-      )}
-    </AnimatePresence>
-  )
-}