feat(client): more metadata

client/src/components/CartridgeBadge.tsx

@@ -0,0 +1,66 @@
+import { Badge } from 'react-bootstrap';
+
+function hexToRgb(hex: string) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  };
+}
+
+const badgeStylesCache: {
+  [key: string]: {
+    backgroundColor: string;
+    color: string;
+    marginBottom: number;
+    marginTop: number;
+    fontSize: any;
+  };
+} = {};
+
+function cartridgeBadgeStyles(str: string = '') {
+  if (badgeStylesCache[str]) {
+    return badgeStylesCache[str];
+  }
+
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 6) - hash);
+  }
+  const hex = [];
+  for (let i = 0; i < 3; i++) {
+    let value = (hash >> (i * 8)) & 0xff;
+    hex[i] = ('00' + value.toString(16)).substr(-2);
+  }
+
+  const rgb = hexToRgb(hex.join(''));
+
+  const brightness = Math.round(
+    (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
+  );
+
+  const textColor = brightness > 125 ? 'black' : 'white';
+
+  badgeStylesCache[str] = {
+    backgroundColor: `#${hex.join('')}`,
+    color: textColor,
+    marginTop: 5,
+    marginBottom: 5,
+    fontSize: '.8rem',
+  };
+
+  return badgeStylesCache[str];
+}
+
+type Props = {
+  cartridge: string;
+};
+
+export function CartridgeBadge({ cartridge }: Props) {
+  return (
+    <Badge bg="custom" style={cartridgeBadgeStyles(cartridge)}>
+      {cartridge}
+    </Badge>
+  );
+}

client/src/components/RouteCallResultRenderer.tsx

@@ -27,7 +27,7 @@ function RouteCallResultRenderer({ result }: Props) {
   }
 
   return (
-    <Accordion defaultActiveKey="basics">
+    <Accordion alwaysOpen>
       <BasicInfo eventKey="basics" result={result} />
       <Renderings eventKey="renderings" result={result} />
       <ViewData eventKey="view-data" result={result} />

client/src/components/renderers/Events.tsx

@@ -3,6 +3,7 @@ import { Accordion } from 'react-bootstrap';
 import JSONPretty from 'react-json-pretty';
 
 import { RouteCallResult } from '../../types';
+import { CartridgeBadge } from '../CartridgeBadge';
 
 type Props = {
   eventKey: string;
@@ -15,7 +16,10 @@ export function Events({ eventKey, result }: Props) {
       <Accordion.Header>Events ({result.events.length})</Accordion.Header>
       <Accordion.Body>
         {result.events.map((event, i) => (
-          <JSONPretty key={i} json={event} />
+          <div key={i}>
+            <CartridgeBadge cartridge={event.calledFrom} />
+            <JSONPretty key={i} json={event} />
+          </div>
         ))}
       </Accordion.Body>
     </Accordion.Item>

client/src/components/renderers/LogMessages.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Accordion, Alert } from 'react-bootstrap';
+import { Accordion, Col, Row } from 'react-bootstrap';
 
 import { RouteCallResult } from '../../types';
+import { CartridgeBadge } from '../CartridgeBadge';
 
 type Props = { eventKey: string; result: RouteCallResult };
 
@@ -12,10 +13,13 @@ export function LogMessages({ eventKey, result }: Props) {
         Message log ({result.messageLog.length})
       </Accordion.Header>
       <Accordion.Body>
-        {result.messageLog.map((message, i) => (
-          <Alert key={i} variant="info">
-            {message}
-          </Alert>
+        {result.messageLog.map(({ cartridge, message }, i) => (
+          <Row key={i} className="py-2 border-bottom">
+            <Col sm={2}>
+              <CartridgeBadge cartridge={cartridge} />
+            </Col>
+            <Col>{message}</Col>
+          </Row>
         ))}
       </Accordion.Body>
     </Accordion.Item>

client/src/components/renderers/Renderings.tsx

@@ -3,6 +3,7 @@ import { Accordion } from 'react-bootstrap';
 import JSONPretty from 'react-json-pretty';
 
 import { RouteCallResult } from '../../types';
+import { CartridgeBadge } from '../CartridgeBadge';
 
 type Props = {
   eventKey: string;
@@ -17,7 +18,10 @@ export function Renderings({ eventKey, result }: Props) {
       </Accordion.Header>
       <Accordion.Body>
         {result.renderings.map((rendering, i) => (
-          <JSONPretty key={i} json={rendering} />
+          <div key={i}>
+            <CartridgeBadge cartridge={rendering.renderedFrom} />
+            <JSONPretty json={rendering} />
+          </div>
         ))}
       </Accordion.Body>
     </Accordion.Item>

client/src/components/renderers/ViewData.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Accordion } from 'react-bootstrap';
+import { Accordion, Col, Row } from 'react-bootstrap';
 import JSONPretty from 'react-json-pretty';
 
 import { RouteCallResult } from '../../types';
+import { CartridgeBadge } from '../CartridgeBadge';
 
 type Props = {
   eventKey: string;
@@ -12,9 +13,21 @@ type Props = {
 export function ViewData({ eventKey, result }: Props) {
   return (
     <Accordion.Item eventKey={eventKey}>
-      <Accordion.Header>View data</Accordion.Header>
+      <Accordion.Header>View data (pdict)</Accordion.Header>
       <Accordion.Body>
-        <JSONPretty json={result.viewData} />
+        {Object.entries(result.viewData).map(
+          ([key, { value, lastUpdateFrom }]) => (
+            <Row key={key} className="py-2 border-bottom">
+              <Col sm={2}>
+                <div>{key}</div>
+                <CartridgeBadge cartridge={lastUpdateFrom} />
+              </Col>
+              <Col>
+                <JSONPretty data={value} />
+              </Col>
+            </Row>
+          )
+        )}
       </Accordion.Body>
     </Accordion.Item>
   );

client/src/types.ts

@@ -1,4 +1,3 @@
-import { Rendering } from '../../types/shared';
 import React from 'react';
 
 export type SelectedRoutes = {
@@ -47,7 +46,45 @@ export type RouteCallResult = {
   httpHeaders: { [key: string]: string };
   renderings: Rendering[];
   view: string;
-  viewData: any;
-  messageLog: string[];
+  viewData: { [key: string]: ViewDataRecord };
+  messageLog: { message: string; cartridge: string }[];
   statusCode: number;
 };
+
+export type PlaygroundConfiguration = {
+  rootDir: string;
+  cartridgesDir: string;
+  cartridgePath: string;
+  apiPort: number;
+};
+
+export type ServerExports = {
+  [key: string]: Function & {
+    public?: boolean;
+  };
+} & {
+  __routes?: { [key: string]: any };
+};
+
+export type ViewDataRecord = {
+  value: any;
+  lastUpdateFrom: string;
+};
+
+export type Rendering = {
+  type: string;
+  subType?: string;
+  view?: string;
+  data?: object | string;
+  page?: string;
+  aspectAttributes?: object;
+  message?: string;
+  renderedFrom: string;
+};
+
+export type RouteStepError = {
+  ErrorText: string;
+  ControllerName: string;
+  CurrentStartNodeName: string;
+  message?: string;
+};

package.json

@@ -19,11 +19,11 @@
     "dev:api": "nodemon -q server/src/index.js",
     "dev:ui": "cd client; yarn start; cd ..",
     "build:ui": "cd client; yarn build; cd ..",
-    "lint": "prettier --check bin server client __tests__ __mocks__ types",
+    "lint": "prettier --check bin server client __tests__ __mocks__",
     "test": "jest",
     "test:watch": "jest --watch",
     "posttest": "npm run format",
-    "format": "prettier --loglevel warn --write bin server client __tests__ __mocks__ types",
+    "format": "prettier --loglevel warn --write bin server client __tests__ __mocks__",
     "semantic-release": "semantic-release",
     "prepare": "husky install; yarn install-deps",
     "install-deps": "cd client; yarn --frozen-lockfile; cd .."