Merge pull request #156 from statelyai/andarist/simulation-refactor

Use upfront simulation mode

cypress/integration/inspector.spec.ts

@@ -7,13 +7,35 @@ describe('Inspector', () => {
     cy.inspectMachine(
       createMachine({
         id: 'my_inspected_machine',
-        initial: 'a',
-        states: {
-          a: {},
-        },
       }),
     );
 
     cy.getCanvas().contains('my_inspected_machine');
   });
+
+  it('should list events sent to an inspected machine', () => {
+    cy.visitInspector();
+
+    cy.inspectMachine(createMachine({})).then((service) => {
+      service.send({ type: 'MY_EVENT' });
+
+      cy.findByRole('tab', { name: 'Events' }).realClick();
+      cy.findByRole('tabpanel', { name: 'Events' }).contains('MY_EVENT');
+    });
+  });
+
+  it('should not come with the RESET button', () => {
+    cy.visitInspector();
+
+    cy.inspectMachine(
+      createMachine({
+        id: 'my_inspected_machine',
+      }),
+    );
+
+    // wait for the canvas being ready
+    cy.getCanvas().contains('my_inspected_machine');
+
+    cy.findByRole('button', { name: 'RESET' }).should('not.exist');
+  });
 });

cypress/support/commands.ts

@@ -4,12 +4,7 @@ import '@testing-library/cypress/add-commands';
 import 'cypress-localstorage-commands';
 import 'cypress-real-events/support';
 import { inspect, Inspector } from '@xstate/inspect';
-import {
-  createMachine,
-  interpret,
-  InterpreterFrom,
-  StateMachine,
-} from 'xstate';
+import { interpret, InterpreterFrom, StateMachine } from 'xstate';
 import { state } from './state';
 import { Mutation, Query } from '../../src/graphql/schemaTypes.generated';
 
@@ -72,7 +67,7 @@ const visitInspector = () => {
     const inspector = inspect({
       iframe: () =>
         window.parent.document.querySelector<HTMLIFrameElement>('.aut-iframe'),
-      url: Cypress.config('baseUrl')!,
+      url: `${Cypress.config('baseUrl')!}?inspect`,
     })!;
     state('@@viz/inspector', inspector);
   });

src/ActorsPanel.tsx

@@ -100,7 +100,7 @@ export const ActorsPanel: React.FC = () => {
                   simActor.send({ type: 'SERVICE.FOCUS', sessionId });
                 }}
               >
-                {serviceData?.machine.id ?? '(machine)'}
+                {serviceData!.machine.id ?? '(machine)'}
               </Link>{' '}
               ({sessionId})
             </Text>

src/App.tsx

@@ -38,6 +38,7 @@ import { useInterpretCanvas } from './useInterpretCanvas';
 
 function App() {
   const paletteService = useInterpret(paletteMachine);
+  // don't use `devTools: true` here as it would freeze your browser
   const simService = useInterpret(simulationMachine);
   const machine = useSelector(simService, (state) => {
     return state.context.currentSessionId

src/CanvasPanel.tsx

@@ -18,7 +18,7 @@ import {
 } from './canvasMachine';
 import { toDirectedGraph } from './directedGraph';
 import { Graph } from './Graph';
-import { useSimulation } from './SimulationContext';
+import { useSimulation, useSimulationMode } from './SimulationContext';
 import { theme } from './theme';
 import { CanvasPanelHeader } from './CanvasPanelHeader';
 
@@ -45,6 +45,8 @@ export const CanvasPanel: React.FC = () => {
     getShouldEnableZoomInButton,
   );
 
+  const simulationMode = useSimulationMode();
+
   return (
     <ChakraProvider theme={theme}>
       <Box display="grid" gridTemplateRows="3rem 1fr">
@@ -95,14 +97,16 @@ export const CanvasPanel: React.FC = () => {
               variant="secondary"
             />
           </ButtonGroup>
-          <Button
-            size="sm"
-            margin={2}
-            onClick={() => simService.send('MACHINES.RESET')}
-            variant="secondary"
-          >
-            RESET
-          </Button>
+          {simulationMode === 'visualizing' && (
+            <Button
+              size="sm"
+              margin={2}
+              onClick={() => simService.send('MACHINES.RESET')}
+              variant="secondary"
+            >
+              RESET
+            </Button>
+          )}
         </HStack>
       </Box>
     </ChakraProvider>

src/EventsPanel.tsx

@@ -163,7 +163,7 @@ export const EventsPanel: React.FC = () => {
   const rawEvents = state.context!.events;
   const nextEvents = useSelector(
     sim,
-    (state) => selectMachine(state)?.state?.nextEvents,
+    (state) => selectMachine(state)?.state.nextEvents,
     (a, b) => JSON.stringify(a) === JSON.stringify(b),
   );