Add a toggle of log and tracing

src/components.ts

@@ -391,3 +391,22 @@ export const Search = styled.input`
     box-shadow: 0 0 0 2px var(--primary);
   }
 `;
+
+
+const playSymbol = String.fromCharCode(parseInt("25B6",16))
+const
+  pauseSymbol = String.fromCharCode(parseInt("25A0",16))
+
+export function RunButton(config: Spec) {
+  NodeButton({
+    text:`${playSymbol} Run`,
+    ...config
+  })
+}
+
+export function PauseButton(config: Spec) {
+  NodeButton({
+    text:`${pauseSymbol} Pause`,
+    ...config
+  })
+}

src/index.ts

@@ -1,14 +1,10 @@
 import {
   CompositeName,
-  createEffect,
   createEvent,
   createStore,
   Effect,
   Event,
   forward,
-  guard,
-  merge,
-  sample,
   Store,
   Unit,
   step,
@@ -25,17 +21,17 @@ import {
   FilesMap,
   Inspector,
   Kind,
-  LogMeta,
   Options,
   StoreCreator,
-  Trace,
   StoreMeta,
-  StackTrace,
-  TraceStoreChange,
-  TraceEventTrigger,
-  TraceEffectRun,
 } from './types.h';
 import { Root } from './view';
+import {
+  traceEffectRun,
+  traceEventTrigger,
+  traceStoreChange
+} from "./tabs/trace";
+import { createLogRecordFx}  from "./tabs/log";
 
 const $files = createStore<FilesMap>({}, { serialize: 'ignore' });
 
@@ -51,39 +47,6 @@ const effectAdd = createEvent<EffectCreator>();
 const effectTriggered = createEvent<{ sid: string }>();
 const $effects = createStore<Record<string, EffectMeta>>({}, { serialize: 'ignore' });
 
-const $logs = createStore<LogMeta[]>([], { serialize: 'ignore' });
-
-const traceStoreChange = createEvent<TraceStoreChange>();
-const traceEventTrigger = createEvent<TraceEventTrigger>();
-const traceEffectRun = createEvent<TraceEffectRun>();
-const traceAdd = merge([traceStoreChange, traceEventTrigger, traceEffectRun]);
-
-const traceFinished = createEvent();
-
-const $traces = createStore<StackTrace[]>([], { serialize: 'ignore' });
-const $currentTrace = createStore<StackTrace>({ time: 0, traces: [] }, { serialize: 'ignore' });
-
-$currentTrace.on(traceAdd, ({ time, traces }, trace) => ({
-  time: time ? time : Date.now(),
-  traces: [...traces, trace],
-}));
-
-guard({
-  source: $currentTrace,
-  clock: traceAdd,
-  filter: ({ traces }) => traces.length === 1,
-}).watch(() => queueMicrotask(traceFinished));
-
-const moveTrace = sample({
-  source: $currentTrace,
-  clock: traceFinished,
-});
-
-$traces.on(moveTrace, (stackTraces, newTrace) => [...stackTraces, newTrace]);
-$currentTrace.reset(moveTrace);
-
-// $traces.watch((t) => console.log('traces', t));
-
 $stores
   .on(storeAdd, (map, payload) => ({
     ...map,
@@ -173,26 +136,10 @@ $files.on(effectAdd, (map, { name, file }) => {
   return map;
 });
 
-let id = 1e3;
-const nextId = () => (++id).toString(36);
-
-type CreateRecord = Pick<LogMeta, 'name' | 'kind' | 'payload'>;
-
-const createRecordFx = createEffect<CreateRecord, LogMeta>({
-  handler({ name, kind, payload }) {
-    return {
-      id: nextId(),
-      kind,
-      name,
-      payload,
-      datetime: new Date(),
-    };
-  },
-});
 
 forward({
   from: eventTriggered,
-  to: createRecordFx.prepend(({ name, params }) => ({
+  to: createLogRecordFx.prepend(({ name, params }) => ({
     kind: 'event',
     name,
     payload: params,
@@ -201,15 +148,13 @@ forward({
 
 forward({
   from: storeUpdated,
-  to: createRecordFx.prepend(({ name, value }) => ({
+  to: createLogRecordFx.prepend(({ name, value }) => ({
     kind: 'store',
     name,
     payload: value,
   })),
 });
 
-$logs.on(createRecordFx.doneData, (logs, record) => [record, ...logs]);
-
 function graphite(unit: Unit<any>): Node {
   return (unit as any).graphite;
 }
@@ -276,7 +221,7 @@ export function createInspector(options: Options = {}): Inspector | undefined {
 
   document.body.append(root);
 
-  using(root, () => Root($stores, $events, $effects, $logs, $files, $traces, options));
+  using(root, () => Root($stores, $events, $effects, $files, options));
   using(root, StyledRoot);
 
   return { root };
@@ -373,7 +318,7 @@ export function addEffect(
 
   forward({
     from: [effectRun, effectDone, effectFail],
-    to: createRecordFx,
+    to: createLogRecordFx,
   });
 }
 

src/tabs/log/index.ts

@@ -0,0 +1,2 @@
+export { createLogRecordFx}  from "./model";
+export { Logs } from './view';

src/tabs/log/model.ts

@@ -0,0 +1,44 @@
+import {createEvent, createStore, guard, createEffect} from "effector";
+import { persist } from 'effector-storage/session'
+
+import {LogMeta} from "../../types.h";
+
+
+const log = createEvent<LogMeta>();
+export const isLogEnabledToggle = createEvent();
+export const logCleared = createEvent();
+
+export const $logs = createStore<LogMeta[]>([], {serialize: 'ignore'});
+export const $isLogEnabled = createStore(false);
+
+type CreateRecord = Pick<LogMeta, 'name' | 'kind' | 'payload'>;
+
+let id = 1e3;
+const nextId = () => (++id).toString(36);
+
+export const createLogRecordFx = createEffect<CreateRecord, LogMeta>({
+  handler({ name, kind, payload }) {
+    return {
+      id: nextId(),
+      kind,
+      name,
+      payload,
+      datetime: new Date(),
+    };
+  },
+});
+
+$isLogEnabled.on(isLogEnabledToggle, value => !value)
+$logs
+  .on(log, (logs, record) => [record, ...logs])
+  .reset(logCleared);
+
+guard({
+  clock: createLogRecordFx.doneData,
+  filter: $isLogEnabled,
+  target: log
+})
+
+persist({
+  store: $isLogEnabled,
+})

src/logs.ts → src/tabs/log/view.ts

@@ -1,7 +1,7 @@
 import { Store, createStore, createEvent, combine, Event } from 'effector';
 import { list, h } from 'forest';
 
-import { LogMeta, Kind, Options } from './types.h';
+import { Kind, Options } from '../../types.h';
 import {
   NodeList,
   Node,
@@ -10,20 +10,26 @@ import {
   Panel,
   Checkbox,
   Input,
-  NodeButton,
-} from './components';
-import { ObjectView } from './object-view';
-import { createJsonSetting, createSetting } from './setting';
-import { trimDomain } from './trim-domain';
+  NodeButton, RunButton, PauseButton,
+} from '../../components';
+import { ObjectView } from '../../object-view';
+import { createJsonSetting, createSetting } from '../../setting';
+import { trimDomain } from '../../trim-domain';
 
 const defaultKinds: Kind[] = ['event', 'store'];
 const kindSetting = createJsonSetting<Kind[]>('filter-kinds', defaultKinds);
 const textSetting = createSetting('filter-text', '');
 
-export function Logs($logs: Store<LogMeta[]>, hotKeyClear: Event<void>, options: Options) {
+import {
+  $logs,
+  $isLogEnabled,
+  isLogEnabledToggle,
+  logCleared,
+} from './model'
+
+export function Logs(options: Options) {
   const toggleKind = createEvent<Kind>();
   const filterChanged = createEvent<string>();
-  const clearClicked = createEvent<MouseEvent>();
 
   const $kinds = createStore(kindSetting.read(), { serialize: 'ignore' });
   const $filterText = createStore(textSetting.read(), { serialize: 'ignore' });
@@ -35,7 +41,7 @@ export function Logs($logs: Store<LogMeta[]>, hotKeyClear: Event<void>, options:
     )
     .watch(kindSetting.write);
   $filterText.watch(textSetting.write);
-  $logs.on(clearClicked, () => []).on(hotKeyClear, () => []);
+
 
   Panel(() => {
     h('span', { text: 'Show: ' });
@@ -65,9 +71,18 @@ export function Logs($logs: Store<LogMeta[]>, hotKeyClear: Event<void>, options:
 
     NodeButton({
       text: 'Clear',
-      handler: { click: clearClicked },
+      handler: { click: logCleared },
       attr: { title: 'Press CTRL+L to clear logs' },
     });
+
+    RunButton({
+      visible: $isLogEnabled.map(value => !value),
+      handler: { click: isLogEnabledToggle }
+    })
+    PauseButton({
+      visible: $isLogEnabled,
+      handler: { click: isLogEnabledToggle },
+    })
   });
 
   NodeList(() => {

src/tabs/trace/index.ts

@@ -0,0 +1,7 @@
+export {
+  traceEffectRun,
+  traceEventTrigger,
+  traceStoreChange
+} from "./model";
+
+export {Traces} from './view'

src/tabs/trace/model.ts

@@ -0,0 +1,54 @@
+import {createEvent, createStore, guard, merge, sample} from "effector";
+import { persist } from 'effector-storage/session'
+import {
+  StackTrace,
+  TraceEffectRun,
+  TraceEventTrigger,
+  TraceStoreChange
+} from "../../types.h";
+
+export const traceStoreChange = createEvent<TraceStoreChange>();
+export const traceEventTrigger = createEvent<TraceEventTrigger>();
+export const traceEffectRun = createEvent<TraceEffectRun>();
+const traceAdd = createEvent<TraceStoreChange | TraceEventTrigger | TraceEffectRun>();
+const traceFinished = createEvent();
+export const traceCleared = createEvent();
+
+export const $traces = createStore<StackTrace[]>([]);
+const $currentTrace = createStore<StackTrace>({ time: 0, traces: [] });
+export const $isTraceEnabled = createStore(false);
+export const traceEnableToggled = createEvent<void>();
+
+$isTraceEnabled.on(traceEnableToggled, value => !value)
+$traces.on([traceCleared], () => []);
+
+$currentTrace.on(traceAdd, ({ time, traces }, trace) => ({
+  time: time ? time : Date.now(),
+  traces: [...traces, trace],
+}));
+
+
+guard({
+  clock:  merge([traceStoreChange, traceEventTrigger, traceEffectRun]),
+  filter: $isTraceEnabled,
+  target: traceAdd
+})
+
+guard({
+  source: $currentTrace,
+  clock: traceAdd,
+  filter: ({ traces }) => traces.length === 1,
+}).watch(() => queueMicrotask(traceFinished));
+
+const moveTrace = sample({
+  clock: traceFinished,
+  source: $currentTrace,
+});
+
+$traces.on(moveTrace, (stackTraces, newTrace) => [...stackTraces, newTrace]);
+$currentTrace.reset(moveTrace);
+
+
+persist({
+  store: $isTraceEnabled,
+})