fix(devtools): improve styles and small other fixes

artalar · Oct 10, 2024 · eea2edb · eea2edb
1 parent d5a6283
commit eea2edb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 24 deletions.
diff --git a/packages/devtools/src/Graph.tsx b/packages/devtools/src/Graph.tsx
@@ -94,7 +94,8 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
               }
 
               if (_type === 'highlight' && result) {
-                background = `${ctx.spy(color)}a0`              }
+                background = `${ctx.spy(color)}a0`
+              }
             } catch {}
           }
 
@@ -222,10 +223,11 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
 
   const subscribe = () =>
     clientCtx.subscribe(async (logs) => {
-      const insertStates = new Map<AtomCache, 0 | 1>()
+      // sort causes and insert only from this transaction
+      const insertTargets = new Set<AtomCache>()
       for (let i = 0; i < logs.length; i++) {
         const patch = logs[i]!
-        insertStates.set(patch, 0)
+        insertTargets.add(patch)
         if (patch.proto.isAction) actionsStates.set(patch, patch.state.slice(0))
       }
 
@@ -260,14 +262,14 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
       // 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 (insertTargets.has(cause)) {
           if (cause.cause) insert(cause.cause)
           if (isPass(cause)) list.create(ctx, cause)
-          insertStates.set(cause, 1)
+          insertTargets.delete(cause)
         }
-        if (insertStates.get(patch) === 0) {
+        if (insertTargets.has(patch)) {
           if (isPass(patch)) list.create(ctx, patch)
-          insertStates.set(patch, 1)
+          insertTargets.delete(patch)
         }
       }
       list.batch(ctx, () => {
@@ -316,6 +318,7 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
   const container = (
     <section
       css={`
+        height: 100%;
         max-height: 100%;
         display: flex;
         flex-direction: column;

diff --git a/packages/devtools/src/Graph/reatomFilters.tsx b/packages/devtools/src/Graph/reatomFilters.tsx
@@ -20,7 +20,7 @@ const Filters = z.object({
 })
 type Filters = z.infer<typeof Filters>
 
-const DEFAULT_COLOR = 'rgba(255 255 255 / 50%)'
+const DEFAULT_COLOR = '#BABACF'
 
 const initState: Filters = {
   hoverPreview: true,
@@ -30,7 +30,7 @@ const initState: Filters = {
   list: [{ name: 'private', search: `(^_)|(\._)`, type: 'mismatch', color: DEFAULT_COLOR, readonly: true }],
 }
 const initSnapshot = JSON.stringify(initState)
-const version = 'v15'
+const version = 'v17'
 
 const FilterButton = ({
   isInput,
@@ -40,6 +40,7 @@ const FilterButton = ({
   return (
     // @ts-expect-error
     <Component
+      {...props}
       css={`
         width: 25px;
         height: 20px;
@@ -52,8 +53,8 @@ const FilterButton = ({
         &[disabled] {
           border: 2px solid rgb(21 19 50 / 20%);
         }
+        ${props.css || ''}
       `}
-      {...props}
     />
   )
 }
@@ -149,7 +150,13 @@ export const reatomFilters = (
                   >
                     {filter.name}
                   </th>
-                  <td>
+                  <td
+                    css={`
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    `}
+                  >
                     <FilterButton
                       title="match"
                       aria-label="match"
@@ -171,28 +178,42 @@ export const reatomFilters = (
                       title="highlight"
                       aria-label="highlight"
                       type="color"
-                      style={{ 'font-size': '10px', filter: 'unset' }}
-                      on:click={filter.type.setHighlight}
+                      on:click={(ctx, e) => {
+                        if (ctx.get(filter.type) !== 'highlight') {
+                          filter.type.setHighlight(ctx)
+                          e.preventDefault()
+                        }
+                      }}
                       model:value={filter.color}
-                    >
-                      💡
-                    </FilterButton>
+                      css:border={atom((ctx) => {
+                        const border =
+                          ctx.spy(filter.type) === 'highlight'
+                            ? '2px solid rgb(21 19 50 / 20%)'
+                            : '2px solid transparent'
+
+                        return border
+                      })}
+                      css={`
+                        font-size: 10px;
+                        filter: unset;
+                        border: var(--border);
+                      `}
+                    />
                     <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"
+                      title={atom((ctx) => (ctx.spy(filter.type) === 'off' ? 'enable' : 'disable'))}
+                      aria-label={atom((ctx) => (ctx.spy(filter.type) === 'off' ? 'enable' : 'disable'))}
                       disabled={atom((ctx) => ctx.spy(filter.type) === 'off')}
                       on:click={filter.type.setOff}
                     >
-                      ⊘
+                      {atom((ctx) => (ctx.spy(filter.type) === 'off' ? '▶' : '◼'))}
                     </FilterButton>
                   </td>
                   <td>

diff --git a/packages/devtools/src/ObservableHQ.tsx b/packages/devtools/src/ObservableHQ.tsx
@@ -56,7 +56,7 @@ export const ObservableHQ: FC<{ snapshot: any; actions?: Element }> = ({ snapsho
             update((snapshot = parseAtoms(ctx, snapshot)))
           }}
         >
-          ✈
+          {'{}'}
         </ObservableHQActionButton>
         <ObservableHQActionButton
           title="Log"
@@ -65,7 +65,7 @@ export const ObservableHQ: FC<{ snapshot: any; actions?: Element }> = ({ snapsho
             console.log(isAtom(snapshot) ? ctx.get(snapshot) : snapshot)
           }}
         >
-          ✎
+          📝
         </ObservableHQActionButton>
         <ObservableHQActionButton
           title="Copy"

diff --git a/packages/devtools/src/index.tsx b/packages/devtools/src/index.tsx
@@ -28,7 +28,7 @@ export const _connectDevtools = async (
   let folded: null | { width: string; height: string } = null
   let moved = false
 
-  const viewSwitch = reatomBoolean(false, `${name}.viewSwitch`).pipe(withLocalStorage(`${name}.viewSwitch`))
+  const viewSwitch = reatomBoolean(true, `${name}.viewSwitch`).pipe(withLocalStorage(`${name}.viewSwitch`))
 
   const snapshot = atom<Rec>({}, `${name}.snapshot`).pipe(
     withAssign((target) => ({