Skip to content

Commit

Permalink
fix(devtools): filters enum
Browse files Browse the repository at this point in the history
  • Loading branch information
@artalar
artalar committed Oct 8, 2024
1 parent c6efa2f commit 0604a16
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 91 deletions.
28 changes: 20 additions & 8 deletions packages/devtools/src/Graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,17 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {

// TODO: reatomFilter
const display = atom((ctx) => {
const isVisible = ctx.spy(filters.list.array).every(({ search, active, include }) => {
if (!ctx.spy(active)) return true
const isVisible = ctx.spy(filters.list.array).every(({ search, type }) => {
const _type = ctx.spy(type)

if (_type === 'off') return true

try {
const result = new RegExp(`.*${ctx.spy(search)}.*`).test(name!)
return include ? result : !result
const result = new RegExp(`.*${ctx.spy(search)}.*`, 'i').test(name!)

if (_type === 'match') return result

return !result
} catch (error) {
return true
}
Expand Down Expand Up @@ -97,7 +102,7 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
>
<button
title="Cause lines"
aria-details="Draw a cause lines"
aria-label="Draw a cause lines"
on:click={handleClick}
css:type={color}
css={`
Expand All @@ -113,7 +118,7 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
</button>
<button
title="Inspector"
aria-details="Open inspector"
aria-label="Open inspector"
on:mouseenter={(ctx: Ctx) => {
if (ctx.get(filters.hoverPreview)) {
inspector.open(ctx, patch)
Expand Down Expand Up @@ -191,16 +196,23 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {

await null

const exludes = ctx
.get(filters.list.array)
.filter(({ type }) => ctx.get(type) === 'exclude')
.map(({ search }) => ctx.get(search))
const isPass = (patch: AtomCache) =>
exludes.every((search) => !new RegExp(`.*${search}.*`, 'i').test(patch.proto.name!))

// fix the case when "cause" appears in the logs after it patch
const insert = (patch: AtomCache) => {
const cause = patch.cause!
if (insertStates.get(cause) === 0) {
if (cause.cause) insert(cause.cause)
list.create(ctx, cause)
if (isPass(cause)) list.create(ctx, cause)
insertStates.set(cause, 1)
}
if (insertStates.get(patch) === 0) {
list.create(ctx, patch)
if (isPass(patch)) list.create(ctx, patch)
insertStates.set(patch, 1)
}
}
Expand Down
176 changes: 98 additions & 78 deletions packages/devtools/src/Graph/reatomFilters.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { parseAtoms, assign, LinkedListAtom, reatomString, Action } from '@reatom/framework'
import { h, hf } from '@reatom/jsx'
import { parseAtoms, assign, LinkedListAtom, reatomString, Action, atom } from '@reatom/framework'
import { h, hf, JSX } from '@reatom/jsx'
import { reatomZod } from '@reatom/npm-zod'
import { z } from 'zod'

Expand All @@ -11,8 +11,7 @@ const Filters = z.object({
z.object({
name: z.string().readonly(),
search: z.string(),
include: z.boolean().readonly(),
active: z.boolean(),
type: z.enum(['match', 'mismatch', 'exclude', 'highlight', 'off']),
readonly: z.boolean().readonly(),
}),
),
Expand All @@ -23,11 +22,28 @@ const initState: Filters = {
hoverPreview: true,
inlinePreview: false,
valuesSearch: '',
list: [{ name: 'private', search: `(^_)|(\._)`, include: false, active: true, readonly: true }],
list: [{ name: 'private', search: `(^_)|(\._)`, type: 'mismatch', readonly: true }],
}

const initSnapshot = JSON.stringify(initState)
const version = 'v12'
const version = 'v13'

const FilterButton = (props: JSX.IntrinsicElements['button']) => (
<button
css={`
width: 25px;
height: 20px;
padding: 0;
margin-right: 5px;
border: 2px solid transparent;
border-radius: 2px;
font-size: 14px;
&[disabled] {
border: 2px solid rgb(21 19 50 / 20%);
}
`}
{...props}
/>
)

export const reatomFilters = (
{
Expand All @@ -54,8 +70,7 @@ export const reatomFilters = (
name: `${name}.filters`,
})

const include = reatomString('', `${name}.include`)
const exclude = reatomString('', `${name}.exclude`)
const newFilter = reatomString('', `${name}.include`)

return assign(filters, {
element: (
Expand All @@ -73,56 +88,22 @@ export const reatomFilters = (
<form
on:submit={(ctx, e) => {
e.preventDefault()
const name = ctx.get(include)
filters.list.create(ctx, {
name,
search: name.toLocaleLowerCase(),
include: true,
active: true,
readonly: false,
})
include.reset(ctx)
}}
css={`
display: inline-flex;
align-items: center;
`}
>
<input
model:value={include}
placeholder="New filter"
css={`
width: 142px;
`}
/>
<button
css={`
width: 70px;
`}
>
include
</button>
</form>
<form
on:submit={(ctx, e) => {
e.preventDefault()
const name = ctx.get(exclude)
const name = ctx.get(newFilter)
filters.list.create(ctx, {
name,
search: name.toLocaleLowerCase(),
include: false,
active: true,
type: 'off',
readonly: false,
})
exclude.reset(ctx)
newFilter.reset(ctx)
}}
css={`
display: inline-flex;
align-items: center;
`}
>
<input
model:value={exclude}
model:value={newFilter}
placeholder="New filter"
css={`
width: 142px;
Expand All @@ -133,44 +114,83 @@ export const reatomFilters = (
width: 70px;
`}
>
exclude
create
</button>
</form>
<div
<table
css={`
display: flex;
flex-direction: column;
gap: 5px;
width: fit-content;
`}
>
{filters.list.reatomMap((ctx, filter) => (
<div
css={`
display: flex;
align-items: center;
gap: 5px;
`}
>
<label
css={`
display: flex;
align-items: center;
gap: 5px;
`}
>
<input model:checked={filter.active} />
{filter.name} ({filter.include ? 'include' : 'exclude'}):
</label>
<input placeholder="RegExp" model:value={filter.search} readonly={filter.readonly} />
<button disabled={filter.readonly} on:click={(ctx) => filters.list.remove(ctx, filter)}>
x
</button>
</div>
))}
</div>
{filters.list.reatomMap((ctx, filter) => {
const id = `${filters.list.__reatom.name}-${filter.name}`
return (
<tr>
<th
scope="row"
css={`
font-weight: normal;
text-align: start;
padding-right: 10px;
`}
>
{filter.name}
</th>
<td>
<FilterButton
title="match"
aria-label="match"
disabled={atom((ctx) => ctx.spy(filter.type) === 'match')}
on:click={filter.type.setMatch}
>
=
</FilterButton>
<FilterButton
title="not match"
aria-label="not match"
disabled={atom((ctx) => ctx.spy(filter.type) === 'mismatch')}
on:click={filter.type.setMismatch}
>
≠
</FilterButton>
<FilterButton
title="exclude"
aria-label="exclude"
disabled={atom((ctx) => ctx.spy(filter.type) === 'exclude')}
style={{ 'font-size': '10px' }}
on:click={filter.type.setExclude}
>
🗑️
</FilterButton>
<FilterButton
title="disable"
aria-label="disable"
disabled={atom((ctx) => ctx.spy(filter.type) === 'off')}
on:click={filter.type.setOff}
>
⊘
</FilterButton>
</td>
<td>
<input id={id} placeholder="RegExp" model:value={filter.search} readonly={filter.readonly} />
<button
title="Remove"
aria-label="Remove filter"
disabled={filter.readonly}
on:click={(ctx) => filters.list.remove(ctx, filter)}
>
x
</button>
</td>
</tr>
)
})}
</table>
<input
title="Search in states"
aria-label="Search in states"
model:value={filters.valuesSearch}
placeholder={'Search in states'}
placeholder="Search in states"
type="search"
css={`
width: 200px;
Expand Down
4 changes: 2 additions & 2 deletions packages/devtools/src/Graph/reatomInspector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export const reatomInspector = ({ filters }: { filters: ReturnType<typeof reatom
<ObservableHQ
snapshot={patchState}
actions={
<ObservableHQActionButton on:click={close} title="Close" aria-details="Close this inspector">
<ObservableHQActionButton on:click={close} title="Close" aria-label="Close this inspector">
x
</ObservableHQActionButton>
}
Expand All @@ -182,7 +182,7 @@ export const reatomInspector = ({ filters }: { filters: ReturnType<typeof reatom
<ObservableHQ
snapshot={patchHistory}
actions={
<ObservableHQActionButton on:click={patchHistory.reset} title="Clear" aria-details="Clear history">
<ObservableHQActionButton on:click={patchHistory.reset} title="Clear" aria-label="Clear history">
🗑️
</ObservableHQActionButton>
}
Expand Down
6 changes: 3 additions & 3 deletions packages/devtools/src/ObservableHQ.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const ObservableHQ: FC<{ snapshot: any; actions?: Element }> = ({ snapsho
>
<ObservableHQActionButton
title="Plain JSON"
aria-details="Convert to plain JSON"
aria-label="Convert to plain JSON"
on:click={(ctx) => {
update((snapshot = parseAtoms(ctx, snapshot)))
}}
Expand All @@ -60,7 +60,7 @@ export const ObservableHQ: FC<{ snapshot: any; actions?: Element }> = ({ snapsho
</ObservableHQActionButton>
<ObservableHQActionButton
title="Log"
aria-details="Log to the console"
aria-label="Log to the console"
on:click={(ctx) => {
console.log(isAtom(snapshot) ? ctx.get(snapshot) : snapshot)
}}
Expand All @@ -69,7 +69,7 @@ export const ObservableHQ: FC<{ snapshot: any; actions?: Element }> = ({ snapsho
</ObservableHQActionButton>
<ObservableHQActionButton
title="Copy"
aria-details="Copy inspected value"
aria-label="Copy inspected value"
on:click={(ctx) => {
const text = JSON.stringify(parseAtoms(ctx, snapshot), null, 2)
navigator.clipboard.writeText(text)
Expand Down

0 comments on commit 0604a16

Please sign in to comment.