Fixed resize bug, trading view listens to intents

Author: robmoffat

directory/sail.json

@@ -22,7 +22,19 @@
                 {
                     "src": "/static/example-apps/tradingview/tradingview-icon.png"
                 }
-            ]
+            ],
+            "interop": {
+                "intents": {
+                    "listensFor": {
+                        "ViewChart": {
+                            "contexts": [
+                                "fdc3.instrument"
+                            ],
+                            "displayName": "View Chart"
+                        }
+                    }
+                }
+            }
         }
     ],
     "message": "OK"

src/client/grid/grid.tsx

@@ -114,6 +114,7 @@ export const Content = ({
             }}
           />
         </div>
+        <div className={styles.resizeBaffle} />
         <div className={styles.contentBody}>
           {panel.url ? <AppSlot panel={panel} /> : <div />}
         </div>

src/client/grid/gridstate.ts

@@ -1,8 +1,8 @@
 import { GridItemHTMLElement, GridStack, GridStackElement, GridStackWidget } from "gridstack"
 import { ReactElement } from "react"
-import ReactDOM from 'react-dom';
 import { AppPanel, ClientState } from "../state/clientState"
 import { createRoot } from 'react-dom/client';
+import * as styles from "./styles.module.css";
 
 
 const TRASH_DROP = "trash";
@@ -89,7 +89,8 @@ export class GridsStateImpl implements GridsState {
             {
                 removable: "#" + TRASH_DROP,
                 acceptWidgets: true,
-                margin: '1'
+                margin: '1',
+                cellHeight: '70px'
             },
             e as GridStackElement
         )
@@ -104,6 +105,12 @@ export class GridsStateImpl implements GridsState {
                     this.cs.updatePanel(panel)
                 }
             }
+
+            element.classList.remove(styles.resizing)
+        })
+
+        grid.on("resizestart", (_event, element) => {
+            element.classList.add(styles.resizing)
         })
 
         grid.on("removed", (event, items) => {

src/client/grid/styles.module.css

@@ -40,6 +40,22 @@
     padding-right: .2rem;
 }
 
+.resizeBaffle {
+    display: none;
+    position: absolute;
+    top: 2rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: white;
+    z-index: 1000;
+}
+
+.resizing .resizeBaffle {
+    display: block;
+    background-color: #FFFFFF22;
+}
+
 .contentBody {
     position: absolute;
     top: 2rem;

src/client/resolver/resolver.tsx

@@ -192,6 +192,7 @@ export const ResolverPanel = ({
             <div className={styles.resolverPane}>
               {intentsToUse.map((i) => (
                 <LineItemComponent
+                  key={i}
                   li={i}
                   text={i}
                   setState={(a) => {

src/client/state/AppState.ts

@@ -1,9 +1,12 @@
-import { WebConnectionProtocol1Hello } from "@kite9/fdc3-common";
+import { BrowserTypes } from "@kite9/fdc3";
 import { getClientState } from "./clientState"
 import { getServerState } from "./ServerState"
 import { DirectoryApp } from "@kite9/fdc3-web-impl";
 import { v4 as uuid } from 'uuid'
 
+type WebConnectionProtocol1Hello = BrowserTypes.WebConnectionProtocol1Hello
+
+
 interface AppState {
 
     registerAppWindow(window: Window, instanceId: string): void
@@ -21,7 +24,11 @@ class DefaultAppState implements AppState {
     async getDirectoryAppForUrl(identityUrl: string): DirectoryApp {
         const strippedIdentityUrl = identityUrl.replace(/\/$/, "")
         const applications: DirectoryApp[] = await getServerState().getApplications()
-        const firstMatchingApp = applications.find(x => (x.details.url == strippedIdentityUrl) || (x.details.url == identityUrl))
+        const firstMatchingApp = applications.find(x =>
+            (x.details.url == strippedIdentityUrl) ||
+            (x.details.url == identityUrl) ||
+            ((x.details.url.startsWith("/")) && identityUrl.endsWith(x.details.url))    // allows for local urls
+        )
         return firstMatchingApp
     }
 

src/example-apps/tradingview/TradingViewWidget.tsx

@@ -1,30 +1,53 @@
 // TradingViewWidget.jsx
-import { useEffect, useRef, memo } from "react";
+import { getAgent } from "@kite9/fdc3";
+import { useEffect, useRef, memo, useState } from "react";
 
-export function TradingViewWidget() {
+export const TradingViewWidget = () => {
   const container: any = useRef();
 
+  const [state, setState] = useState("MSFT");
+
+  useEffect(() => {
+    getAgent().then((fdc3) => {
+      fdc3.addIntentListener("ViewChart", async (context) => {
+        setState(context?.id?.ticker);
+      });
+    });
+  }, []);
+
   useEffect(() => {
-    const script = document.createElement("script");
+    var script: HTMLScriptElement | null = null;
+
+    script = document.getElementById(
+      "tradingview-widget-script",
+    ) as HTMLScriptElement;
+
+    if (script) {
+      container.current.removeChild(script);
+    }
+
+    script = document.createElement("script");
+    container.current.appendChild(script);
+
+    script!!.id = "tradingview-widget-script";
     script.src =
       "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
     script.type = "text/javascript";
     script.async = true;
     script.innerHTML = `
         {
           "autosize": true,
-          "symbol": "NASDAQ:AAPL",
+          "symbol": "NASDAQ:${state}",
           "interval": "D",
           "timezone": "Etc/UTC",
           "theme": "light",
           "style": "1",
           "locale": "en",
-          "allow_symbol_change": true,
+          "allow_symbol_change": false,
           "calendar": false,
           "support_host": "https://www.tradingview.com"
         }`;
-    container.current.appendChild(script);
-  }, []);
+  }, [state]);
 
   return (
     <div
@@ -47,6 +70,6 @@ export function TradingViewWidget() {
       </div>
     </div>
   );
-}
+};
 
 export default memo(TradingViewWidget);

src/example-apps/tradingview/chart.tsx

@@ -1,11 +1,7 @@
 import { createRoot } from "react-dom/client";
-import { TradingViewWidget } from "./TradingViewWidget";
-import { getAgent } from "@kite9/fdc3";
+import TradingViewWidget from "./TradingViewWidget";
 
 const container = document.getElementById("app");
 const root = createRoot(container!);
-root.render(<TradingViewWidget />);
 
-window.onload = async () => {
-  const fdc3 = await getAgent();
-};
+root.render(<TradingViewWidget />);

src/server/da/SailServerContext.ts

@@ -11,7 +11,8 @@ export enum State { Pending, Open, Closed }
 
 export type SailData = AppIdentifier & {
     socket?: Socket,
-    state: State
+    state: State,
+    url?: string
 }
 
 export class SailServerContext implements ServerContext<SailData> {

src/server/da/initSocketService.ts

@@ -83,13 +83,14 @@ export function initSocketService(httpServer: any, sessions: Map<string, SailFDC
             if (fdc3Server != undefined) {
                 console.log("An app connected: ", userSessionId, appInstanceId)
                 const appInstance = fdc3Server.getServerContext().getInstanceDetails(appInstanceId)
+                const directoryItem = fdc3Server.getServerContext().directory.retrieveAppsById(props.appId)
                 if ((appInstance != undefined) && (appInstance.state == State.Pending)) {
                     appInstance.socket = socket
+                    appInstance.url = directoryItem[0].details.url
                     fdc3ServerInstance = fdc3Server
                     fdc3ServerInstance.serverContext.setAppConnected({ appId: props.appId, instanceId: appInstanceId })
                 } else if (DEBUG_MODE) {
                     console.error("App tried to connect with invalid instance id, allowing connection anyway ", appInstanceId)
-                    const directoryItem = fdc3Server.getServerContext().directory.retrieveAppsById(props.appId)
 
                     fdc3Server?.serverContext.setInstanceDetails(appInstanceId, {
                         appId: props.appId,