Add observations to timestamp detail in preparation for tomorrow

src/pages/visualizer/ConversionObservationsTable.tsx

@@ -0,0 +1,44 @@
+import { Table } from '@mantine/core';
+import { ReactNode } from 'react';
+import { TradingState } from '../../models.ts';
+import { formatNumber } from '../../utils/format.ts';
+import { SimpleTable } from './SimpleTable.tsx';
+
+export interface ConversionObservationsTableProps {
+  conversionObservations: TradingState['observations']['conversionObservations'];
+}
+
+export function ConversionObservationsTable({ conversionObservations }: ConversionObservationsTableProps): ReactNode {
+  const rows: ReactNode[] = [];
+  for (const [product, observation] of Object.entries(conversionObservations)) {
+    rows.push(
+      <Table.Tr key={product}>
+        <Table.Td>{product}</Table.Td>
+        <Table.Td>{formatNumber(observation.bidPrice)}</Table.Td>
+        <Table.Td>{formatNumber(observation.askPrice)}</Table.Td>
+        <Table.Td>{formatNumber(observation.transportFees)}</Table.Td>
+        <Table.Td>{formatNumber(observation.exportTariff)}</Table.Td>
+        <Table.Td>{formatNumber(observation.importTariff)}</Table.Td>
+        <Table.Td>{formatNumber(observation.sunlight)}</Table.Td>
+        <Table.Td>{formatNumber(observation.humidity)}</Table.Td>
+      </Table.Tr>,
+    );
+  }
+
+  return (
+    <SimpleTable
+      label="conversion observations"
+      columns={[
+        'Product',
+        'Bid price',
+        'Ask price',
+        'Transport fees',
+        'Export tariff',
+        'Import tariff',
+        'Sunlight',
+        'Humidity',
+      ]}
+      rows={rows}
+    />
+  );
+}

src/pages/visualizer/PlainValueObservationsTable.tsx

@@ -0,0 +1,23 @@
+import { Table } from '@mantine/core';
+import { ReactNode } from 'react';
+import { TradingState } from '../../models.ts';
+import { formatNumber } from '../../utils/format.ts';
+import { SimpleTable } from './SimpleTable.tsx';
+
+export interface PlainValueObservationsTableProps {
+  plainValueObservations: TradingState['observations']['plainValueObservations'];
+}
+
+export function PlainValueObservationsTable({ plainValueObservations }: PlainValueObservationsTableProps): ReactNode {
+  const rows: ReactNode[] = [];
+  for (const product of Object.keys(plainValueObservations)) {
+    rows.push(
+      <Table.Tr key={product}>
+        <Table.Td>{product}</Table.Td>
+        <Table.Td>{formatNumber(plainValueObservations[product])}</Table.Td>
+      </Table.Tr>,
+    );
+  }
+
+  return <SimpleTable label="plain value observations" columns={['Product', 'Value']} rows={rows} />;
+}

src/pages/visualizer/TimestampDetail.tsx

@@ -4,9 +4,11 @@ import { ScrollableCodeHighlight } from '../../components/ScrollableCodeHighligh
 import { AlgorithmDataRow } from '../../models.ts';
 import { useStore } from '../../store.ts';
 import { formatNumber } from '../../utils/format.ts';
+import { ConversionObservationsTable } from './ConversionObservationsTable.tsx';
 import { ListingsTable } from './ListingsTable.tsx';
 import { OrderDepthTable } from './OrderDepthTable.tsx';
 import { OrdersTable } from './OrdersTable.tsx';
+import { PlainValueObservationsTable } from './PlainValueObservationsTable.tsx';
 import { PositionTable } from './PositionTable.tsx';
 import { ProfitLossTable } from './ProfitLossTable.tsx';
 import { TradesTable } from './TradesTable.tsx';
@@ -63,6 +65,14 @@ export function TimestampDetail({
         <Title order={5}>Orders</Title>
         {<OrdersTable orders={orders} />}
       </Grid.Col>
+      <Grid.Col span={{ xs: 12, sm: 4 }}>
+        <Title order={5}>Plain value observations</Title>
+        <PlainValueObservationsTable plainValueObservations={state.observations.plainValueObservations} />
+      </Grid.Col>
+      <Grid.Col span={{ xs: 12, sm: 8 }}>
+        <Title order={5}>Conversion observations</Title>
+        <ConversionObservationsTable conversionObservations={state.observations.conversionObservations} />
+      </Grid.Col>
       <Grid.Col span={{ xs: 12, sm: 6 }}>
         <Title order={5}>Sandbox logs</Title>
         {sandboxLogs ? (