Fix memo

Author: raycashmore

frameworks/python/streamlit/README.md

@@ -4,6 +4,36 @@ An example showing integration of [Streamlit](https://streamlit.io/) (Python) wi
 
 It extends the Stock Peers example from the Streamlit app gallery: https://demo-stockpeers.streamlit.app/
 
+## Try it on your machine
+
+1. Start a virtual environment and get the dependencies (requires [uv](https://github.com/astral-sh/uv)):
+
+   ```sh
+   $ uv venv
+
+   $ source .venv/bin/activate
+
+   $ uv sync
+   ```
+
+2. Build the client bridge
+
+   ```sh
+   $ cd openfin_bridge_component/frontend
+  
+   $ npm install
+  
+   $ npm run build
+   ```
+
+3. Start the app:  
+
+   (From the root directory)  
+
+   ```sh
+   $ streamlit run streamlit_app.py
+   ```
+
 ## How it works
 
 This project demonstrates a bidirectional communication bridge between a Python Streamlit application and the OpenFin platform using the FDC3 Interop API. The integration enables seamless data sharing between Streamlit and other OpenFin applications.
@@ -89,32 +119,3 @@ The `context.ts` helper module handles bidirectional mapping:
 - The OpenFin runtime is not a direct dependency but is expected to be running when the app is launched in an OpenFin container
 - The app gracefully handles cases where OpenFin is not available (e.g., when running in a standard browser)
 
-## Try it on your machine
-
-1. Start a virtual environment and get the dependencies (requires [uv](https://github.com/astral-sh/uv)):
-
-   ```sh
-   $ uv venv
-
-   $ source .venv/bin/activate
-
-   $ uv sync
-   ```
-
-2. Build the client bridge
-
-   ```sh
-   $ cd openfin_bridge_component/frontend
-  
-   $ npm install
-  
-   $ npm run build
-   ```
-
-3. Start the app:  
-
-   (From the root directory)  
-
-   ```sh
-   $ streamlit run streamlit_app.py
-   ```

frameworks/python/streamlit/openfin_bridge_component/frontend/src/main.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react"
+import React, { useEffect, useRef } from "react"
 import { createRoot } from "react-dom/client"
 import { Streamlit, withStreamlitConnection } from "streamlit-component-lib"
 import { mapInbound, mapOutbound, hashContext } from './helpers/context';
@@ -9,16 +9,10 @@ type Args = {
   data?: any
 }
 
-function useStableJson<T>(value: T): string {
-  // Recompute JSON only when necessary to keep useEffect deps stable
-  return useMemo(() => JSON.stringify(value ?? null), [value])
-}
-
 const SUPPRESSION_WINDOW_MS = 900 // ignore self-echo within this window
 
 function Bridge({ args }: { args: Args }) {
   const groupRef = useRef<any>(null)
-  const argsJson = useStableJson(args)
   const lastOutboundHashRef = useRef<string | null>(null)
   const lastOutboundAtRef = useRef<number>(0)
 
@@ -84,8 +78,7 @@ function Bridge({ args }: { args: Args }) {
 
   // Outbound broadcast when args change
   useEffect(() => {
-    const parsed: Args = JSON.parse(argsJson)
-    const ctx = mapOutbound(parsed?.eventType, parsed?.data)
+    const ctx = mapOutbound(args?.eventType, args?.data)
     if (!ctx || !groupRef.current) return
     try {
       // Record hash & timestamp for self-echo suppression on next inbound
@@ -95,7 +88,7 @@ function Bridge({ args }: { args: Args }) {
     groupRef.current
       .setContext(ctx)
       .catch((e: any) => console.error("[OpenFinBridge] setContext error", e))
-  }, [argsJson])
+  }, [JSON.stringify(args)])
 
   return null
 }

frameworks/react/workspace/src/views/monitor.tsx

@@ -168,12 +168,12 @@ export function Monitor() {
 				<table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0 }}>
 					<thead>
 						<tr style={{ background: "#f5f7fa" }}>
-							<th style={{ textAlign: "left", padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }}>Ticker</th>
-							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }}>Price</th>
-							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }}>Change</th>
-							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }}>%</th>
-							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }}>Volume</th>
-							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }}>Day Range</th>
+							<th style={{ textAlign: "left", padding: "8px 12px", borderBottom: "1px solid #e5e7eb", color: "#888" }}>Ticker</th>
+							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb", color: "#888" }}>Price</th>
+							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb", color: "#888" }}>Change</th>
+							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb", color: "#888" }}>%</th>
+							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb", color: "#888" }}>Volume</th>
+							<th style={{ textAlign: "right", padding: "8px 12px", borderBottom: "1px solid #e5e7eb", color: "#888" }}>Day Range</th>
 						</tr>
 					</thead>
 					<tbody>