@pandacss/studio 0.0.0-dev-20230613163214

package/src/components/analyzer/get-report-infos-from.ts

@@ -0,0 +1,80 @@
+import type { ReportItemJSON } from '@pandacss/types'
+import { analysisData } from '../../lib/analysis-data'
+import { getReportItem, type SearchableReportItemAttributes } from '../../lib/get-report-item'
+
+export const getReportInfosFrom = (params: SearchableReportItemAttributes) => {
+  let byTokenName: Array<ReportItemJSON['id']> = []
+  let byCategory: Array<ReportItemJSON['id']> = []
+  let byPropName: Array<ReportItemJSON['id']> = []
+  let byInstanceName: Array<ReportItemJSON['id']> = []
+  let byFilepath: Array<ReportItemJSON['id']> = []
+  let hasParam = false
+
+  if (params.value) {
+    byTokenName =
+      analysisData.details.globalMaps.byTokenName[
+        params.value as keyof typeof analysisData.details.globalMaps.byTokenName
+      ] ?? []
+    hasParam = true
+  }
+
+  if (params.category) {
+    byCategory =
+      analysisData.details.globalMaps.byCategory[
+        params.category as keyof typeof analysisData.details.globalMaps.byCategory
+      ] ?? []
+    hasParam = true
+  }
+
+  if (params.propName) {
+    byPropName =
+      analysisData.details.globalMaps.byPropertyName[
+        params.propName as keyof typeof analysisData.details.globalMaps.byPropertyName
+      ] ?? []
+    hasParam = true
+  }
+
+  if (params.from) {
+    byInstanceName =
+      analysisData.details.globalMaps.byInstanceName[
+        params.from as keyof typeof analysisData.details.globalMaps.byInstanceName
+      ] ?? []
+    hasParam = true
+  }
+
+  if (params.filepath) {
+    byFilepath = analysisData.details.byFilepath[params.filepath as keyof typeof analysisData.details.byFilepath] ?? []
+    hasParam = true
+  }
+
+  return {
+    params,
+    hasParam,
+    byTokenName: byTokenName.map(getReportItem),
+    byCategory: byCategory.map(getReportItem),
+    byPropName: byPropName.map(getReportItem),
+    byInstanceName: byInstanceName.map(getReportItem),
+    byFilepath: byFilepath.map(getReportItem),
+    reportItemList: combineIntersections(byTokenName, byCategory, byPropName, byInstanceName, byFilepath).map(
+      getReportItem,
+    ),
+  }
+}
+function combineIntersections<T>(...lists: Array<T[]>) {
+  return lists.reduce((acc, current) => {
+    if (!acc.length) return current
+
+    if (!current.length) return acc
+
+    return intersection(acc, current)
+  }, [] as T[])
+}
+function intersection<T = any>(left: Array<T>, right: Array<T>) {
+  const _intersection = new Set()
+  for (const elem of right) {
+    if (left.includes(elem)) {
+      _intersection.add(elem)
+    }
+  }
+  return Array.from(_intersection) as Array<T>
+}

package/src/components/analyzer/quick-tooltip.tsx

@@ -0,0 +1,15 @@
+import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'
+import type { ReactElement, ReactNode } from 'react'
+
+export const QuickTooltip = ({ children, tooltip }: { children: ReactElement; tooltip: ReactNode }) => {
+  return (
+    <Tooltip openDelay={0} closeDelay={100} positioning={{ placement: 'bottom-start', gutter: 20 }}>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <Portal>
+        <TooltipPositioner>
+          <TooltipContent>{tooltip}</TooltipContent>
+        </TooltipPositioner>
+      </Portal>
+    </Tooltip>
+  )
+}

package/src/components/analyzer/report-item-columns.tsx

@@ -0,0 +1,52 @@
+import type { ReportItemJSON } from '@pandacss/types'
+import { panda } from '../../../styled-system/jsx'
+import { ReportItemOpenInEditorLink, UtilityLink } from './report-item-link'
+import { QuickTooltip } from './quick-tooltip'
+
+export const reportItemColumns = [
+  {
+    header: '#',
+    accessor: 'id',
+    cell: (item: ReportItemJSON) => <panda.span onClick={() => console.log(item)}>{item.id}</panda.span>,
+  },
+  { header: 'from', accessor: 'from', cell: (item: ReportItemJSON) => <UtilityLink from={item.from} /> },
+  {
+    header: 'category',
+    accessor: 'category',
+    cell: (item: ReportItemJSON) => <UtilityLink category={item.category} />,
+  },
+  {
+    header: 'property name',
+    accessor: 'propName',
+    cell: (item: ReportItemJSON) => <UtilityLink propName={item.propName} />,
+  },
+  {
+    header: 'token name',
+    accessor: 'value',
+    cell: (item: ReportItemJSON) => {
+      return (
+        <panda.div display="flex" alignItems="center">
+          {!item.isKnown && (
+            <QuickTooltip
+              tooltip={
+                <panda.span p="2" bgColor="white" border="1px solid rgba(0, 0, 0, 0.1)">
+                  unknown token
+                </panda.span>
+              }
+            >
+              <panda.span mr="2" userSelect="none">
+                {'❌'}
+              </panda.span>
+            </QuickTooltip>
+          )}
+          <UtilityLink value={item.value} />
+        </panda.div>
+      )
+    },
+  },
+  {
+    header: 'filepath',
+    accessor: 'filepath',
+    cell: (item: ReportItemJSON) => <ReportItemOpenInEditorLink withRange {...item} />,
+  },
+] as const // TODO satisifes Column[]

package/src/components/analyzer/report-item-link.tsx

@@ -0,0 +1,98 @@
+import type { ReportItemJSON } from '@pandacss/types'
+import { panda } from '../../../styled-system/jsx'
+import { styledLink } from '../../../styled-system/patterns'
+import { analysisData } from '../../lib/analysis-data'
+import {
+  getReportItem,
+  getUtilityLink,
+  getReportRange,
+  getReportRelativeFilePath,
+  openReportItemInEditor,
+  type SearchableReportItemAttributes,
+} from '../../lib/get-report-item'
+import { ExternalIcon } from './external-icon'
+import { QuickTooltip } from './quick-tooltip'
+import { TextWithCount } from './text-with-count'
+import { TruncatedText } from './truncated-text'
+
+export const ReportItemLink = (reportItem: Partial<ReportItemJSON>) => {
+  const value = String(reportItem.value)
+  const withTokenName = analysisData.details.globalMaps.byTokenName[value] ?? []
+  const count = withTokenName?.filter((id) => getReportItem(id)?.propName === reportItem.propName)?.length
+
+  return (
+    <panda.a className={styledLink({})} href={getUtilityLink(reportItem)}>
+      <TextWithCount count={count}>
+        {reportItem.propName}.<TruncatedText text={value} />
+      </TextWithCount>
+    </panda.a>
+  )
+}
+
+const mapsByReportItemAttribute = {
+  propName: analysisData.details.globalMaps.byPropertyName,
+  value: analysisData.details.globalMaps.byTokenName,
+  category: analysisData.details.globalMaps.byCategory,
+  from: analysisData.details.globalMaps.byInstanceName,
+  filepath: analysisData.details.byFilepath,
+}
+
+/** Takes a single search param */
+export const UtilityLink = (search: SearchableReportItemAttributes) => {
+  const value = search.value ?? search.propName ?? search.category ?? search.filepath ?? search.from
+
+  let list: number[] | undefined
+  if (search.value) {
+    list = mapsByReportItemAttribute.value[String(search.value)]
+  } else if (search.propName) {
+    list = mapsByReportItemAttribute.propName[search.propName]
+  } else if (search.category) {
+    list = mapsByReportItemAttribute.category[search.category]
+  } else if (search.filepath) {
+    list = mapsByReportItemAttribute.filepath[search.filepath]
+  } else if (search.from) {
+    list = mapsByReportItemAttribute.from[search.from]
+  }
+
+  return (
+    <panda.a
+      className={styledLink({ color: String(value).endsWith('!') ? 'red.400' : undefined })}
+      href={getUtilityLink(search)}
+    >
+      <TextWithCount count={(list ?? []).length}>
+        <TruncatedText text={String(value)} />
+      </TextWithCount>
+    </panda.a>
+  )
+}
+
+export const ReportItemOpenInEditorLink = ({ withRange, ...reportItem }: ReportItemJSON & { withRange?: boolean }) => {
+  return (
+    <panda.div display="flex" alignItems="center">
+      <panda.a
+        className={styledLink({ alignSelf: 'flex-start', mr: '2' })}
+        href={getUtilityLink({ filepath: reportItem.filepath })}
+      >
+        {getReportRelativeFilePath(reportItem.filepath)}
+        {withRange ? getReportRange(reportItem) : ''}
+      </panda.a>
+      <QuickTooltip
+        tooltip={
+          <panda.span p="2" bgColor="white" border="1px solid rgba(0, 0, 0, 0.1)">
+            Click to open in editor
+          </panda.span>
+        }
+      >
+        <panda.div
+          pos="relative"
+          maxW="14px"
+          flexShrink={0}
+          cursor="pointer"
+          onClickCapture={() => openReportItemInEditor(reportItem)}
+        >
+          <ExternalIcon />
+        </panda.div>
+      </QuickTooltip>
+    </panda.div>
+  )
+}

package/src/components/analyzer/section.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren, ReactNode } from 'react'
+import { panda, Stack } from '../../../styled-system/jsx'
+import type { JsxStyleProps } from '../../../styled-system/types'
+
+export const Section = ({
+  title,
+  subTitle,
+  children,
+  ...props
+}: PropsWithChildren<{ title: ReactNode; subTitle?: ReactNode } & JsxStyleProps>) => {
+  return (
+    <Stack p="4" gap="4" w="100%">
+      {title && (
+        <panda.div w="full" display="flex">
+          <panda.h3>{title}</panda.h3>
+          {subTitle}
+        </panda.div>
+      )}
+      <panda.div p="4" w="100%" rounded="md" {...props}>
+        {children}
+      </panda.div>
+    </Stack>
+  )
+}

package/src/components/analyzer/sort-icon.tsx

@@ -0,0 +1,7 @@
+export const SortIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M15.344 17.778a.75.75 0 0 0-.75-.75h-5.16a.75.75 0 0 0 0 1.5h5.16a.75.75 0 0 0 .75-.75zm2.206-4a.75.75 0 0 0-.75-.75H7.204a.75.75 0 0 0 0 1.5H16.8a.75.75 0 0 0 .75-.75zm2.45-4a.75.75 0 0 0-.75-.75H4.75a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 .75-.75zm2-4a.75.75 0 0 0-.75-.75H2.75a.75.75 0 0 0 0 1.5h18.5a.75.75 0 0 0 .75-.75z" />
+    </svg>
+  )
+}

package/src/components/analyzer/text-with-count.tsx

@@ -0,0 +1,28 @@
+import type { PropsWithChildren } from 'react'
+import { panda } from '../../../styled-system/jsx'
+import type { JsxStyleProps } from '../../../styled-system/types'
+
+export const TextWithCount = ({ children, count, ...props }: PropsWithChildren<{ count: number } & JsxStyleProps>) => {
+  return (
+    <panda.div display="inline-flex" alignItems="center" {...props}>
+      <panda.span>{children}</panda.span>
+      <Sup>({count})</Sup>
+    </panda.div>
+  )
+}
+
+const Sup = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  return (
+    <panda.sup
+      fontSize="75%"
+      lineHeight={0}
+      position="relative"
+      top="-0.35em"
+      opacity="0.5"
+      ml="1"
+      className={className}
+    >
+      {children}
+    </panda.sup>
+  )
+}

package/src/components/analyzer/token-search-combobox.tsx

@@ -0,0 +1,39 @@
+import { analysisData } from '../../lib/analysis-data'
+import { getUtilityLink, getReportRelativeFilePath } from '../../lib/get-report-item'
+import { DataCombobox, type DataComboboxProps } from './data-combobox'
+
+const searchList = new Map<string, string>()
+const tokenNames = Object.keys(analysisData.details.globalMaps.byTokenName)
+const propertyNames = Object.keys(analysisData.details.globalMaps.byPropertyName)
+const categories = Object.keys(analysisData.details.globalMaps.byCategory)
+const filepaths = Object.keys(analysisData.details.byFilepath)
+tokenNames.sort().forEach((key) => {
+  searchList.set(key, 'value')
+})
+propertyNames.sort().forEach((key) => {
+  searchList.set(key, 'propName')
+})
+categories.sort().forEach((key) => {
+  searchList.set(key, 'category')
+})
+filepaths.sort().forEach((key) => {
+  searchList.set(getReportRelativeFilePath(key), 'filepath')
+})
+
+export const TokenSearchCombobox = (props: Omit<DataComboboxProps, 'options' | 'onSelect'>) => {
+  return (
+    <DataCombobox
+      placeholder={`Search for a token name (${tokenNames.length}), property name (${propertyNames.length}), category (${categories.length}), file path (${filepaths.length})...`}
+      {...props}
+      options={Array.from(searchList.entries()).map(([key, value]) => ({ label: `[${value}]: ${key}`, value: key }))}
+      onSelect={(option) => {
+        if (!option.value) return
+
+        const type = searchList.get(option.value)
+        if (!type) return
+
+        window.location.href = getUtilityLink({ [type]: option.value })
+      }}
+    />
+  )
+}

package/src/components/analyzer/truncated-text.tsx

@@ -0,0 +1,26 @@
+import { panda } from '../../../styled-system/jsx'
+import type { JsxStyleProps } from '../../../styled-system/types'
+import { truncate } from '../../lib/truncate'
+import { QuickTooltip } from './quick-tooltip'
+
+export const TruncatedText = ({
+  text,
+  characters = 24,
+  ...props
+}: { text: string; characters?: number } & JsxStyleProps) => {
+  if (text.length > characters) {
+    return (
+      <QuickTooltip
+        tooltip={
+          <panda.span p="2" bgColor="white" border="1px solid rgba(0, 0, 0, 0.1)">
+            {truncate(text, 80)}
+          </panda.span>
+        }
+      >
+        <panda.span {...props}>{text.substring(0, characters) + '...'}</panda.span>
+      </QuickTooltip>
+    )
+  }
+
+  return text as unknown as JSX.Element
+}

package/src/components/analyzer/utility-details.tsx

@@ -0,0 +1,312 @@
+import {
+  Portal,
+  Select,
+  SelectContent,
+  SelectLabel,
+  SelectOption,
+  SelectPositioner,
+  SelectTrigger,
+} from '@ark-ui/react'
+import { useState } from 'react'
+
+import { css, cx } from '../../../styled-system/css'
+import { Wrap, panda } from '../../../styled-system/jsx'
+import { styledLink } from '../../../styled-system/patterns'
+
+import { analysisData } from '../../lib/analysis-data'
+import { createContext } from '../../lib/create-context'
+import { getFileLink, getReportRelativeFilePath, type SearchableReportItemAttributes } from '../../lib/get-report-item'
+import { TokenSearchCombobox } from './token-search-combobox'
+import { DataCombobox, type DataComboboxOption } from './data-combobox'
+import { DataTable } from './data-table'
+import { getReportInfosFrom } from './get-report-infos-from'
+import { reportItemColumns } from './report-item-columns'
+import { Section } from './section'
+import { TextWithCount } from './text-with-count'
+
+export const UtilityDetails = () => {
+  const search = new URLSearchParams(window.location.search)
+  const initialParams = Object.fromEntries(search.entries()) as SearchableReportItemAttributes
+  const [params, setParams] = useState(initialParams)
+  // console.log({ params, globalMaps: analysisData.details.globalMaps })
+
+  const infos = getReportInfosFrom(params)
+  // console.log(infos)
+
+  return (
+    <panda.div>
+      <panda.div display="flex">
+        <panda.a href="/token-analyzer">
+          <panda.span fontWeight="bold">{'<'} </panda.span>Back
+        </panda.a>
+        <panda.div ml="auto">
+          <TokenSearchCombobox placeholder="Global search" />
+        </panda.div>
+      </panda.div>
+      <panda.div p="4" mt="4">
+        <DetailsProvider value={[infos, setParams]}>
+          <UtilityFilters />
+          <hr />
+          {infos.reportItemList.length ? (
+            <UtilityDetailsContent />
+          ) : !infos.hasParam ? (
+            <panda.div display="flex" justifyContent="center" fontSize="xl" p="16" fontWeight="bold">
+              Use at least one filter
+            </panda.div>
+          ) : (
+            <panda.div display="flex" justifyContent="center" fontSize="xl" p="16" fontWeight="bold">
+              No results
+            </panda.div>
+          )}
+        </DetailsProvider>
+      </panda.div>
+    </panda.div>
+  )
+}
+
+type Infos = ReturnType<typeof getReportInfosFrom>
+const [DetailsProvider, useDetails] = createContext<[Infos, React.Dispatch<React.SetStateAction<Infos['params']>>]>({
+  name: 'UtilityDetailsContext',
+})
+
+const updateSearchParam = (key: string, value: string | undefined) => {
+  const search = new URLSearchParams(window.location.search)
+  if (value === undefined) {
+    search.delete(key)
+  } else {
+    search.set(key, value)
+  }
+  window.history.pushState(Object.fromEntries(search.entries()), '', `${window.location.pathname}?${search.toString()}`)
+}
+
+const uniq = (arr: string[]) => Array.from(new Set(arr))
+const toOption = (value: string | object) =>
+  (typeof value === 'string' ? { value, label: value } : value) as DataComboboxOption
+const toFilepathOption = (filepath: string) => ({ value: filepath, label: getReportRelativeFilePath(filepath) })
+
+const UtilityFilters = () => {
+  const [infos, setParams] = useDetails()
+  const [resetKey, setResetKey] = useState(0)
+
+  const allTokenNames = Object.keys(analysisData.details.globalMaps.byTokenName)
+  const filteredTokenNames = uniq(infos.reportItemList.map((item) => String(item.value)))
+  const tokenNames = filteredTokenNames.length > 0 ? filteredTokenNames : allTokenNames
+
+  const allCategories = Object.keys(analysisData.details.globalMaps.byCategory)
+  const filteredCategories = uniq(infos.reportItemList.map((item) => item.category))
+  const categories = filteredCategories.length > 0 ? filteredCategories : allCategories
+
+  const allPropertyNames = Object.keys(analysisData.details.globalMaps.byPropertyName)
+  const filteredPropertyNames = uniq(infos.reportItemList.map((item) => item.propName))
+  const propertyNames = filteredPropertyNames.length > 0 ? filteredPropertyNames : allPropertyNames
+
+  const allFrom = Object.keys(analysisData.details.globalMaps.byInstanceName)
+  const filteredFrom = uniq(infos.reportItemList.map((item) => item.from))
+  const from = filteredFrom.length > 0 ? filteredFrom : allFrom
+
+  const allFilepath = Object.keys(analysisData.details.byFilepath).map(toFilepathOption)
+  const filteredFilepath = uniq(infos.reportItemList.map((item) => item.filepath)).map(toFilepathOption)
+  const filepath = filteredFilepath.length > 0 ? filteredFilepath : allFilepath
+
+  return (
+    <panda.div mb="4">
+      <panda.h3>Filters</panda.h3>
+      <Wrap key={resetKey}>
+        <DataCombobox
+          label="Token name"
+          options={tokenNames.map(toOption)}
+          onSelect={(e) => {
+            updateSearchParam('value', e.value)
+            return setParams((params) => ({ ...params, ['value']: e.value }))
+          }}
+          defaultValue={String(infos.params.value ?? '')}
+        />
+        <DataCombobox
+          label="Property name"
+          options={propertyNames.map(toOption)}
+          onSelect={(e) => {
+            updateSearchParam('propName', e.value)
+            return setParams((params) => ({ ...params, ['propName']: e.value }))
+          }}
+          defaultValue={String(infos.params.propName ?? '')}
+        />
+        <DataCombobox
+          label="Category"
+          options={categories.map(toOption)}
+          onSelect={(e) => {
+            updateSearchParam('category', e.value)
+            return setParams((params) => ({ ...params, ['category']: e.value }))
+          }}
+          defaultValue={String(infos.params.category ?? '')}
+        />
+        <DataCombobox
+          label="Instance name (from)"
+          options={from.map(toOption)}
+          onSelect={(e) => {
+            updateSearchParam('from', e.value)
+            return setParams((params) => ({ ...params, ['from']: e.value }))
+          }}
+          defaultValue={String(infos.params.from ?? '')}
+        />
+        <DataCombobox
+          label="Filepath"
+          options={filepath.map(toOption)}
+          onSelect={(e) => {
+            updateSearchParam('filepath', e.value)
+            return setParams((params) => ({ ...params, ['filepath']: e.value }))
+          }}
+          defaultValue={String(infos.params.filepath ?? '')}
+        />
+        {infos.hasParam && (
+          <panda.span
+            display="block"
+            alignSelf="flex-end"
+            mt="2"
+            cursor="pointer"
+            userSelect="none"
+            fontSize="lg"
+            fontWeight="bold"
+            onClick={() => {
+              updateSearchParam('value', undefined)
+              updateSearchParam('category', undefined)
+              updateSearchParam('propName', undefined)
+              updateSearchParam('from', undefined)
+              updateSearchParam('filepath', undefined)
+              setParams({})
+              setResetKey((k) => k + 1)
+            }}
+          >
+            [X] Clear filters
+          </panda.span>
+        )}
+      </Wrap>
+    </panda.div>
+  )
+}
+
+const UtilityDetailsContent = () => {
+  const [infos] = useDetails()
+
+  return (
+    <>
+      <ReportItemMatchingFiltersTable {...infos} />
+      <UsedInFiles />
+    </>
+  )
+}
+
+const UsedInFiles = () => {
+  const [infos] = useDetails()
+  const files = uniq(infos.reportItemList.map((item) => item.filepath))
+
+  return (
+    <panda.div>
+      <panda.h3>
+        <TextWithCount count={files.length}>Used in files</TextWithCount>
+      </panda.h3>
+      <panda.div display="flex" flexDirection="column">
+        {files.map((filepath) => (
+          <panda.a
+            mt="1"
+            key={filepath}
+            className={styledLink({})}
+            href={getFileLink({ filepath })}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TextWithCount count={infos.reportItemList.filter((item) => item.filepath === filepath).length}>
+              {getReportRelativeFilePath(filepath)}
+            </TextWithCount>
+          </panda.a>
+        ))}
+      </panda.div>
+    </panda.div>
+  )
+}
+
+const selectOptionClass = css({ padding: '4px 8px', bg: 'white' })
+
+const ReportItemMatchingFiltersTable = (infos: Infos) => {
+  const tokenName = infos.params.value
+  const defaultOption = { label: `matching search filters`, value: 'reportItemList' }
+  const columns = reportItemColumns.filter((col) => (infos.params as any)[col.accessor] === undefined)
+
+  return (
+    <>
+      <Select defaultValue={defaultOption}>
+        {({ selectedOption }) => {
+          const value = (selectedOption?.value ?? defaultOption.value) as keyof Omit<Infos, 'params' | 'hasParam'>
+          // console.log({ value, list: infos[value] })
+
+          return (
+            <Section
+              title={
+                <>
+                  <SelectLabel>By </SelectLabel>
+                  <SelectTrigger>
+                    <button>{selectedOption?.label}</button>
+                  </SelectTrigger>
+                </>
+              }
+              subTitle={
+                <panda.span fontSize="md" fontWeight="bold" ml="auto">
+                  Found ({infos[value].length}) matches{' '}
+                </panda.span>
+              }
+              bg="gray.50"
+            >
+              <DataTable list={infos[value]} columns={columns} />
+              <>
+                <Portal>
+                  <SelectPositioner>
+                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none' }))}>
+                      <SelectOption
+                        className={selectOptionClass}
+                        value={defaultOption.value}
+                        label={defaultOption.label}
+                      />
+                      {infos.params.value && (
+                        <SelectOption
+                          className={selectOptionClass}
+                          label={`token name (${tokenName})`}
+                          value="byTokenName"
+                        />
+                      )}
+                      {infos.params.propName && (
+                        <SelectOption
+                          className={selectOptionClass}
+                          value="byPropName"
+                          label={`property name (${infos.params.propName})`}
+                        />
+                      )}
+                      {infos.params.category && (
+                        <SelectOption
+                          className={selectOptionClass}
+                          value="byCategory"
+                          label={`category (${infos.params.category})`}
+                        />
+                      )}
+                      {infos.params.from && (
+                        <SelectOption
+                          className={selectOptionClass}
+                          value="byInstanceName"
+                          label={`from (${infos.params.from})`}
+                        />
+                      )}
+                      {infos.params.filepath && (
+                        <SelectOption
+                          className={selectOptionClass}
+                          value="byFilepath"
+                          label={`filepath (${getReportRelativeFilePath(infos.params.filepath)})`}
+                        />
+                      )}
+                    </SelectContent>
+                  </SelectPositioner>
+                </Portal>
+              </>
+            </Section>
+          )
+        }}
+      </Select>
+    </>
+  )
+}