@likec4/diagram 1.30.0 → 1.32.0

package/src/{likec4diagram/ui/search → search/components}/ElementsColumn.tsx

@@ -1,13 +1,12 @@
 import {
-  type Fqn,
-  type LikeC4Model,
   ifilter,
   isAncestor,
   nameFromFqn,
   sortParentsFirst,
-  toArray,
 } from '@likec4/core'
-import { cx } from '@likec4/styles/css'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { Fqn } from '@likec4/core/types'
+import { cx, cx as clsx } from '@likec4/styles/css'
 import {
   type RenderTreeNodePayload,
   ActionIcon,
@@ -22,16 +21,16 @@ import {
 } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { IconChevronRight } from '@tabler/icons-react'
-import clsx from 'clsx'
 import * as m from 'motion/react-m'
-import { type KeyboardEventHandler, useCallback, useEffect, useMemo } from 'react'
-import { first, indexBy, isEmpty, only, partition, pipe, prop, reduce } from 'remeda'
-import { IconOrShapeRenderer } from '../../../context/IconRenderer'
-import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { type KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react'
+import { first, isEmpty, only, pipe, reduce } from 'remeda'
+import { IconOrShapeRenderer } from '../../context/IconRenderer'
+import { useDiagram } from '../../hooks/useDiagram'
+import { sortByLabel } from '../../likec4model/useLikeC4ElementsTree'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch, useSearchActor } from '../hooks'
 import { buttonsva } from './_shared.css'
 import * as styles from './ElementsColumn.css'
-import { setPickView, useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput, stopAndPrevent } from './utils'
 import { NothingFound } from './ViewsColum'
 
@@ -58,14 +57,13 @@ function buildNode(
 
 const btn = buttonsva()
 
-export function ElementsColumn() {
+export const ElementsColumn = memo(() => {
+  const model = useLikeC4Model()
   const search = useNormalizedSearch()
-  const model = useLikeC4Model(true)
-
   const data = useMemo(() => {
     const searchTerms = search.split('.')
     let elements
-    if (isEmpty(search) || search === 'kind:') {
+    if (isEmpty(searchTerms) || searchTerms[0] === 'kind:') {
       elements = model.elements()
     } else {
       elements = ifilter(model.elements(), element => {
@@ -122,7 +120,7 @@ export function ElementsColumn() {
   }
 
   return <ElementsTree data={data} handleClick={handleClick} />
-}
+})
 
 const setHoveredNode = () => {}
 
@@ -256,6 +254,7 @@ function ElementTreeNode(
         component={m.button}
         layout
         tabIndex={-1}
+        data-value={element.id}
         className={clsx(btn.root, 'group', 'likec4-element-button')}
         {...views.length > 0 && {
           onClick: (e) => {
@@ -299,7 +298,9 @@ function ElementTreeNode(
 }
 
 function useHandleElementSelection() {
-  const navigateTo = useCloseSearchAndNavigateTo()
+  const diagram = useDiagram()
+  const { searchActorRef } = useSearchActor()
+  // const naviconst { searchActorRef } = useSearchActor(gateTo = useCloseSearchAndNavigateTo()
 
   return useCallback((element: LikeC4Model.Element) => {
     const views = [...element.views()]
@@ -308,14 +309,13 @@ function useHandleElementSelection() {
     }
     const singleView = only(views)
     if (singleView) {
-      navigateTo(singleView.id, element.id)
+      if (singleView.id === diagram.currentView.id) {
+        searchActorRef.send({ type: 'close' })
+      } else {
+        diagram.navigateTo(singleView.id)
+      }
       return
     }
-    const [scoped, others] = partition(views, v => v.viewOf?.id === element.id)
-    setPickView({
-      elementFqn: element.id,
-      scoped,
-      others,
-    })
-  }, [setPickView, navigateTo])
+    searchActorRef.send({ type: 'pickview.open', elementFqn: element.id })
+  }, [])
 }

package/src/search/components/PickView.tsx

@@ -0,0 +1,140 @@
+import type { LikeC4ViewModel } from '@likec4/core/model'
+import type { Fqn } from '@likec4/core/types'
+import { ActionIcon, FocusTrap, Group, ScrollAreaAutosize, Stack, Title } from '@mantine/core'
+import { useWindowEvent } from '@mantine/hooks'
+import { IconX } from '@tabler/icons-react'
+import * as m from 'motion/react-m'
+import { useLikeC4Model } from '../../likec4model'
+import { useSearchActor } from '../hooks'
+import * as styles from './styles.css'
+import { ViewButton } from './ViewsColum'
+
+export function PickView({ elementFqn }: { elementFqn: Fqn }) {
+  const { searchActorRef } = useSearchActor()
+  const element = useLikeC4Model().element(elementFqn)
+  // const pickview = usePickView()
+  // const navigateTo = useCloseSearchAndNavigateTo()
+  // const focusTrapRef = useFocusTrap(!!pickview)
+  // useFocusReturn({
+  //   opened: !!pickview,
+  // })
+  const scoped = [] as LikeC4ViewModel[]
+  const others = [] as LikeC4ViewModel[]
+
+  for (const view of element.views()) {
+    if (view.viewOf === element) {
+      scoped.push(view)
+    } else {
+      others.push(view)
+    }
+  }
+
+  const closePickView = () => {
+    searchActorRef.send({ type: 'pickview.close' })
+  }
+
+  useWindowEvent(
+    'keydown',
+    (event) => {
+      try {
+        if (event.key === 'Escape') {
+          event.stopPropagation()
+          event.preventDefault()
+          closePickView()
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+    },
+    {
+      capture: true,
+    },
+  )
+
+  return (
+    <>
+      <m.div
+        key="pickview-backdrop"
+        className={styles.pickviewBackdrop}
+        onClick={e => {
+          e.stopPropagation()
+          closePickView()
+        }}>
+      </m.div>
+      <m.div
+        key="pickview"
+        initial={{
+          opacity: 0,
+          scale: 0.95,
+          originY: 0,
+          translateX: '-50%',
+          translateY: -20,
+        }}
+        animate={{
+          opacity: 1,
+          scale: 1,
+          translateY: 0,
+        }}
+        exit={{
+          opacity: 0,
+          scale: 0.98,
+          translateY: -20,
+          transition: {
+            duration: 0.1,
+          },
+        }}
+        className={styles.pickview}
+        data-likec4-search-views>
+        <Group px="sm" py="md" justify="space-between">
+          <Title order={2} lh={1}>Select view</Title>
+          <ActionIcon
+            size={'md'}
+            variant="default"
+            onClick={(e) => {
+              e.stopPropagation()
+              closePickView()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Group>
+        <FocusTrap>
+          <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
+            {scoped.length > 0 && (
+              <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
+                <Title order={6} c={'dimmed'}>scoped views of the element</Title>
+                {scoped.map((view, i) => (
+                  <ViewButton
+                    key={view.id}
+                    view={view}
+                    search={''}
+                    loop
+                    mod={{
+                      autofocus: i === 0,
+                    }}
+                  />
+                ))}
+              </Stack>
+            )}
+
+            {others.length > 0 && (
+              <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
+                <Title order={6} c={'dimmed'}>views including this element</Title>
+                {others.map((view, i) => (
+                  <ViewButton
+                    key={view.id}
+                    view={view}
+                    search={''}
+                    loop
+                    mod={{
+                      autofocus: i === 0 && scoped.length === 0,
+                    }}
+                  />
+                ))}
+              </Stack>
+            )}
+          </ScrollAreaAutosize>
+        </FocusTrap>
+      </m.div>
+    </>
+  )
+}

package/src/search/components/SearchByTags.tsx

@@ -0,0 +1,109 @@
+import { css } from '@likec4/styles/css'
+import { HStack } from '@likec4/styles/jsx'
+import { Button } from '@mantine/core'
+import { IconX } from '@tabler/icons-react'
+import { ElementTag } from '../../base/primitives'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch, useUpdateSearch } from '../hooks'
+import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils'
+
+export function SearchByTags() {
+  let tags = useLikeC4Model().tagsSortedByUsage
+  let setSearch = useUpdateSearch()
+  let search = useNormalizedSearch()
+  let countBefore = tags.length
+  if (search.startsWith('#')) {
+    const searchTag = search.slice(1)
+    tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag))
+  }
+  if (tags.length === 0) {
+    return null
+  }
+
+  const isFiltered = tags.length !== countBefore
+
+  return (
+    <HStack
+      css={{
+        gap: 'md',
+        paddingLeft: 48,
+        flexWrap: 'nowrap',
+      }}
+    >
+      <HStack
+        css={{
+          gap: 6,
+          flexWrap: 'wrap',
+          opacity: isFiltered ? 1 : .3,
+          grayscale: isFiltered ? 0 : .9,
+          filter: 'auto',
+          transition: 'fast',
+          _groupHover: {
+            opacity: 1,
+            grayscale: 0,
+          },
+          _groupFocusWithin: {
+            opacity: 1,
+            grayscale: 0,
+          },
+        }}
+      >
+        {tags.map(({ tag }) => (
+          // <Pill
+          //   key={tag}
+          //   data-likec4-tag={tag}
+          //   className={cx(
+          //     likec4tag(),
+          //     css({
+          //       minWidth: 'unset',
+          //       cursor: 'pointer',
+          //     }),
+          //   )}
+          //   onClick={(e) => {
+          //     e.stopPropagation()
+          //     setSearch(`#${tag}`)
+          //   }}
+          //   onRemove={() => {
+          //     setSearch('#')
+          //     moveFocusToSearchInput()
+          //   }}
+          //   withRemoveButton={tag === `${search.slice(1)}`}
+          // >
+          //   <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
+          //   {tag}
+          // </Pill>
+          <ElementTag
+            key={tag}
+            tag={tag}
+            className={css({
+              userSelect: 'none',
+              cursor: 'pointer',
+            })}
+            onClick={(e) => {
+              e.stopPropagation()
+              setSearch(`#${tag}`)
+              // Let react to display filtered elements
+              setTimeout(() => {
+                focusToFirstFoundElement()
+              }, 350)
+            }}
+          />
+        ))}
+      </HStack>
+      {isFiltered && (
+        <Button
+          size="compact-xs"
+          variant="light"
+          onClick={(e) => {
+            e.stopPropagation()
+            setSearch('')
+            moveFocusToSearchInput()
+          }}
+          rightSection={<IconX size={14} />}
+        >
+          Clear
+        </Button>
+      )}
+    </HStack>
+  )
+}

package/src/{likec4diagram/ui/search → search/components}/SearchInput.tsx

@@ -1,4 +1,3 @@
-import { compareNatural } from '@likec4/core'
 import {
   Combobox,
   ComboboxDropdown,
@@ -12,15 +11,15 @@ import {
   Text,
   useCombobox,
 } from '@mantine/core'
-import { useDebouncedValue, useFocusWithin, useIsFirstRender, useWindowEvent } from '@mantine/hooks'
+import { useFocusWithin, useWindowEvent } from '@mantine/hooks'
 import { usePreviousDistinct } from '@react-hookz/web'
 import { IconSearch } from '@tabler/icons-react'
-import { type ReactNode } from 'react'
-import { isString, keys, only } from 'remeda'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
-import * as css from './LikeC4Search.css'
-import { setSearch, useIsPickViewActive, useSearch } from './state'
-import { moveFocusToSearchInput, stopAndPrevent } from './utils'
+import { type ReactNode, memo } from 'react'
+import { keys, only } from 'remeda'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useSearch, useSearchActor } from '../hooks'
+import * as css from './styles.css'
+import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from './utils'
 
 function startingWithKind(search: string) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null
@@ -28,25 +27,34 @@ function startingWithKind(search: string) {
 
 const SEARCH_PREFIXES = ['#', 'kind:']
 
-export function LikeC4SearchInput() {
-  const isPickViewActive = useIsPickViewActive()
-  const likec4model = useLikeC4Model(true)
-  const combobox = useCombobox({
-    scrollBehavior: 'smooth',
-  })
+export const LikeC4SearchInput = memo(() => {
+  const { close, searchActorRef } = useSearchActor()
+  const likec4model = useLikeC4Model()
   const { ref, focused } = useFocusWithin<HTMLInputElement>()
-  const search = useSearch()
+  const [search, setSearch] = useSearch()
   const previous = usePreviousDistinct(search)
-  const isFirstRender = useIsFirstRender()
 
-  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 500 : 2000)
+  // const [isEmptyForSomeTime, cancel] = useDebouncedValue(
+  //   focused ? search : 'rstrs',
+  //   2000,
+  // )
+  // // useF
+  // // const isEmptyForSomeTime = debouncedSearch === ''
+  // useEffect(() => {
+  //   // cancel()
+  // }, [])
+
+  const combobox = useCombobox({
+    scrollBehavior: 'smooth',
+    loop: false,
+  })
 
   useWindowEvent(
     'keydown',
     (event) => {
       try {
         if (
-          !focused && !isPickViewActive && (
+          !focused && (
             event.key === 'Backspace' ||
             event.key.startsWith('Arrow') ||
             event.key.match(/^\p{L}$/u)
@@ -64,20 +72,18 @@ export function LikeC4SearchInput() {
   let isExactMatch = false
 
   switch (true) {
-    case search === '' && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? '')): {
-      options = SEARCH_PREFIXES.map((prefix) => (
-        <ComboboxOption value={prefix} key={prefix}>
-          <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
-          {prefix}
-        </ComboboxOption>
-      ))
-      break
-    }
+    // case search === '' && isEmptyForSomeTime === '': {
+    //   options = SEARCH_PREFIXES.map((prefix) => (
+    //     <ComboboxOption value={prefix} key={prefix}>
+    //       <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
+    //       {prefix}
+    //     </ComboboxOption>
+    //   ))
+    //   break
+    // }
     case search.startsWith('#'): {
       const searchTag = search.toLocaleLowerCase().slice(1)
-      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
-        compareNatural,
-      )
+      const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag))
       isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag
       if (alloptions.length === 0) {
         options = [
@@ -98,7 +104,7 @@ export function LikeC4SearchInput() {
     case search.startsWith('kind:'):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : ''
-      let alloptions = keys(likec4model.$model.specification.elements)
+      let alloptions = keys(likec4model.specification.elements)
       if (term) {
         alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))
         isExactMatch = only(alloptions)?.toLocaleLowerCase() === term
@@ -130,8 +136,8 @@ export function LikeC4SearchInput() {
           combobox.closeDropdown()
           // Let react to display filtered elements
           setTimeout(() => {
-            document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
-          }, 50)
+            focusToFirstFoundElement()
+          }, 350)
         }
       }}
       width={'max-content'}
@@ -149,13 +155,27 @@ export function LikeC4SearchInput() {
           ref={ref}
           id="likec4searchinput"
           placeholder="Search by title, description or start with # or kind:"
+          autoFocus
           tabIndex={0}
           classNames={{
             input: css.input,
           }}
-          size="xl"
+          size="lg"
           value={search}
           leftSection={<IconSearch style={{ width: rem(20) }} stroke={2} />}
+          rightSection={
+            <Input.ClearButton
+              onClick={(e) => {
+                e.stopPropagation()
+                const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch
+                if (search === '' || search === openedWithSearch) {
+                  close()
+                } else {
+                  setSearch('')
+                }
+              }} />
+          }
+          rightSectionPointerEvents="auto"
           onChange={(event) => {
             setSearch(event.currentTarget.value)
             combobox.openDropdown()
@@ -207,6 +227,13 @@ export function LikeC4SearchInput() {
               combobox.closeDropdown()
               return
             }
+            if (
+              e.key === 'ArrowUp' && combobox.dropdownOpened && search === '' && combobox.getSelectedOptionIndex() === 0
+            ) {
+              combobox.closeDropdown()
+              stopAndPrevent(e)
+              return
+            }
             if (
               e.key === 'ArrowDown' && (
                 !combobox.dropdownOpened ||
@@ -217,7 +244,7 @@ export function LikeC4SearchInput() {
             ) {
               combobox.closeDropdown()
               stopAndPrevent(e)
-              document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
+              focusToFirstFoundElement()
               return
             }
           }} />
@@ -232,4 +259,4 @@ export function LikeC4SearchInput() {
       </ComboboxDropdown>
     </Combobox>
   )
-}
+})

package/src/{likec4diagram/ui/search → search/components}/ViewsColum.tsx

@@ -1,8 +1,4 @@
-import {
-  type LikeC4Model,
-  type Tag,
-  isDeploymentView,
-} from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
 import {
@@ -19,11 +15,13 @@ import {
 } from '@mantine/core'
 import { IconStack2, IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import { memo } from 'react'
 import { first } from 'remeda'
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { useCurrentViewId } from '../../hooks/useCurrentViewId'
+import { useDiagram } from '../../hooks/useDiagram'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch } from '../hooks'
 import { buttonsva } from './_shared.css'
-import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput } from './utils'
 import * as styles from './ViewsColumn.css'
 
@@ -33,16 +31,16 @@ export const NothingFound = () => (
   </Box>
 )
 
-export function ViewsColumn() {
-  const search = useNormalizedSearch()
-  let views = [...useLikeC4Model(true).views()]
+export const ViewsColumn = memo(() => {
+  let views = [...useLikeC4Model().views()]
+  let search = useNormalizedSearch()
   if (search) {
     if (search.startsWith('kind:')) {
       views = []
     } else {
       views = views.filter(view => {
         if (search.startsWith('#')) {
-          return view.tags.some((tag: Tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
+          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
         }
         return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
       })
@@ -58,7 +56,7 @@ export function ViewsColumn() {
         if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
           const maxY = (e.target as HTMLElement).getBoundingClientRect().y
           const elementButtons = [...document.querySelectorAll<HTMLButtonElement>(
-            `[data-likec4-search-elements] .likec4-element-button`,
+            `[data-likec4-search-elements] .likec4-focusable`,
           )]
           let elementButton = elementButtons.length > 1
             ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
@@ -95,7 +93,7 @@ export function ViewsColumn() {
       ))}
     </Stack>
   )
-}
+})
 
 const btn = buttonsva()
 
@@ -109,7 +107,8 @@ export function ViewButton(
     & UnstyledButtonProps
     & ElementProps<'button'>,
 ) {
-  const navigateTo = useCloseSearchAndNavigateTo()
+  const diagram = useDiagram()
+  // const navigateTo = useCloseSearchAndNavigateTo()
   const currentViewId = useCurrentViewId()
   const isCurrentView = view.id === currentViewId
   return (
@@ -120,7 +119,7 @@ export function ViewButton(
       {...isCurrentView && { 'data-disabled': true }}
       onClick={(e) => {
         e.stopPropagation()
-        navigateTo(view.id)
+        diagram.navigateTo(view.id)
       }}
       onKeyDown={createScopedKeydownHandler({
         siblingSelector: '[data-likec4-view]',
@@ -131,12 +130,12 @@ export function ViewButton(
         onKeyDown: (e) => {
           if (e.nativeEvent.code === 'Space') {
             e.stopPropagation()
-            navigateTo(view.id)
+            diagram.navigateTo(view.id)
           }
         },
       })}>
       <ThemeIcon variant="transparent" className={btn.icon!}>
-        {isDeploymentView(view)
+        {view.isDeploymentView()
           ? <IconStack2 stroke={1.8} />
           : <IconZoomScan stroke={1.8} />}
       </ThemeIcon>