feat: Save / Load result functionality

Resolves #30 and #24

package.json

@@ -89,4 +89,4 @@
     "build": "yarn build:clean && yarn typescript:build",
     "prepublishOnly": "yarn build"
   }
-}
+}

src/panel/file-system.ts

@@ -0,0 +1,34 @@
+import { hiddenFileAnchorId } from '../selectors';
+import { RunContext } from './machine';
+
+export function saveFile(storyName: string, current: RunContext) {
+  const anchor = document.getElementById(hiddenFileAnchorId);
+
+  if (anchor) {
+    anchor.setAttribute(
+      'href',
+      'data:text/json,' + encodeURIComponent(JSON.stringify(current, null, 2)),
+    );
+    anchor.setAttribute('download', `${storyName}.json`);
+    anchor.click();
+  }
+}
+
+export function readFile(
+  e: React.FormEvent<HTMLInputElement>,
+  callback: (context: RunContext, storyFile: string) => void,
+) {
+  const reader = new FileReader();
+  const { files } = e.currentTarget;
+
+  if (files && files.length) {
+    reader.readAsText(files[0]);
+    reader.onload = ({ target }) => {
+      if (target) {
+        const context: RunContext = JSON.parse(target.result as string);
+        const [storyName] = files[0].name.split('.json');
+        callback(context, storyName);
+      }
+    };
+  }
+}

src/panel/machine.ts

@@ -9,6 +9,8 @@ export type MachineEvents =
   | { type: 'FINISH'; results: TaskGroupResult[] }
   | { type: 'PIN' }
   | { type: 'UNPIN' }
+  | { type: 'SAVE' }
+  | { type: 'LOAD_FROM_FILE'; storyName: string; pinned: Nullable<RunContext> }
   | { type: 'SET_VALUES'; copies: number; samples: number };
 
 export type RunContext = {
@@ -134,6 +136,38 @@ const machine: MachineType = Machine<MachineContext, MachineSchema, MachineEvent
                   };
                 }),
               },
+              SAVE: {
+                internal: true,
+                target: 'idle',
+                // Only allow saving when there are results
+                cond: (context): boolean => {
+                  return context.current.results != null;
+                },
+                actions: assign((context) => {
+                  return {
+                    ...context,
+                    message: 'Result saved',
+                  };
+                }),
+              },
+              LOAD_FROM_FILE: {
+                internal: true,
+                target: 'idle',
+                actions: assign(
+                  (context, event): MachineContext => {
+                    const message: Nullable<string> = event.pinned
+                      ? `Loaded pinned result: ${event.storyName}`
+                      : null;
+                    return {
+                      ...context,
+                      message,
+                      pinned: event.pinned,
+                      storyName: event.storyName,
+                      current: event.pinned || context.current,
+                    };
+                  },
+                ),
+              },
               UNPIN: {
                 internal: true,
                 target: 'idle',

src/panel/task-result/parts.tsx

@@ -13,13 +13,13 @@ export const Section = styled.div`
     border-bottom-left-radius: var(--result-border-radius);
     border-bottom-right-radius: var(--result-border-radius);
   }
-` as any;
+`;
 
 export const Heading = styled.h4`
   font-weight: bold;
-` as any;
+`;
 
-export const Content = styled.div`` as any;
+export const Content = styled.div``;
 
 // @ts-ignore
 export const Note = styled.div`
@@ -32,46 +32,57 @@ export const Note = styled.div`
     margin-right: 1ch;
     content: 'ℹ️';
   }
-` as any;
+`;
 
 export const ResultValue = styled.code`
   /* font-family: 'Courier'; */
-` as any;
+`;
 
 export const ResultScale = styled.code`
   /* slightly smaller margin that other elements */
   margin-left: var(--halfGrid);
-` as any;
+`;
 
 export const ValueLozenge = styled.code<{
+  hasWarningIcon?: boolean;
   type: 'positive' | 'negative' | 'warning' | 'info' | 'faint' | 'raw';
   width?: 'fill' | 'inherit';
 }>`
+  ${({ hasWarningIcon = true }) =>
+    !hasWarningIcon &&
+    `&:before {
+      content: '⚠️';
+      margin-right: 1ch;
+    }`};
   padding: calc(var(--grid) / 2) var(--grid);
   border-radius: var(--result-border-radius);
   color: ${(props) => props.theme.color.light};
   font-weight: bold;
   font-size: small;
-  background-color: ${({ type, theme }) =>
-    type === 'positive'
-      ? theme.color.positive
-      : type === 'negative'
-      ? theme.color.negative
-      : type === 'warning'
-      ? theme.color.warning
-      : type === 'info'
-      ? theme.color.seafoam
-      : type === 'faint'
-      ? theme.color.medium
-      : theme.color.purple};
-` as any;
+  background-color: ${({ type, theme }) => {
+    switch (type) {
+      case 'positive':
+        return theme.color.positive;
+      case 'negative':
+        return theme.color.negative;
+      case 'faint':
+        return theme.color.medium;
+      case 'warning':
+        return theme.color.warning;
+      case 'info':
+        return theme.color.seafoam;
+      default:
+        return theme.color.purple;
+    }
+  }};
+`;
 
 export const Table = styled.table`
   width: 100%;
-` as any;
+`;
 
-export const TitleCell = styled.td`` as any;
+export const TitleCell = styled.td``;
 
 export const ValueCell = styled.td`
   text-align: right;
-` as any;
+`;

src/panel/task-result/timed-result.tsx

@@ -5,8 +5,6 @@ import { ExpandingResult } from './expanding-result';
 import * as Parts from './parts';
 import getChange from '../../util/get-change';
 
-const warningIcon = <span>⚠️</span>;
-
 function getDiff({ result, pinned }: { result: TimedResult; pinned: Nullable<TimedResult> }) {
   if (!pinned) {
     return 0;
@@ -79,8 +77,10 @@ function Variance({ result }: { result: TimedResult }) {
           <tr>
             <Parts.TitleCell>Standard deviation</Parts.TitleCell>
             <Parts.ValueCell>
-              <Parts.ValueLozenge type={wasStable ? 'positive' : 'negative'}>
-                {wasStable ? null : warningIcon}
+              <Parts.ValueLozenge
+                hasWarningIcon={wasStable}
+                type={wasStable ? 'positive' : 'negative'}
+              >
                 {toFixed(result.variance.standardDeviation)}
               </Parts.ValueLozenge>
             </Parts.ValueCell>