[broadcast] Drafts scripting Gephi Lite

Details:
- Drafts a new broadcasting feature, that allows scripting Gephi Lite
  from another browser window / tab
- Drafts two actions to feed Gephi Lite and to update appearance state

Author: jacomyal

src/core/Initialize.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useCallback, useEffect } from "react";
+import { FC, PropsWithChildren, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useKonami from "react-use-konami";
 
@@ -7,6 +7,7 @@ import { extractFilename } from "../utils/url";
 import { WelcomeModal } from "../views/graphPage/modals/WelcomeModal";
 import { appearanceAtom } from "./appearance";
 import { parseAppearanceState } from "./appearance/utils";
+import { useBroadcast } from "./broadcast/useBroadcast";
 import { useGraphDatasetActions, useImportActions } from "./context/dataContexts";
 import { filtersAtom } from "./filters";
 import { parseFiltersState } from "./filters/utils";
@@ -32,6 +33,8 @@ export const Initialize: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const { openModal } = useModal();
   const { importFile } = useImportActions();
   const { resetGraph } = useGraphDatasetActions();
+  const [broadcastID, setBroadcastID] = useState<string | null>(null);
+  useBroadcast(broadcastID);
 
   useKonami(
     () => {
@@ -82,17 +85,20 @@ export const Initialize: FC<PropsWithChildren<unknown>> = ({ children }) => {
     let graphFound = false;
     let showWelcomeModal = true;
     const url = new URL(window.location.href);
+    const broadcastID = url.searchParams.get("broadcast");
+    setBroadcastID(broadcastID);
 
     // If query params has new
     // => empty graph & open welcome modal
-    if (url.searchParams.has("new")) {
+    if (url.searchParams.has("new") || broadcastID) {
       resetGraph();
       graphFound = true;
       url.searchParams.delete("new");
       window.history.pushState({}, "", url);
+      showWelcomeModal = false;
     }
 
-    // If query params has file (or gexf although it's deprecated)
+    // If query params has file (or GEXF, although it's deprecated)
     // => try to load the file
     if (!graphFound && (url.searchParams.has("file") || url.searchParams.has("gexf"))) {
       if (!url.searchParams.has("file") && url.searchParams.has("gexf"))
@@ -157,7 +163,15 @@ export const Initialize: FC<PropsWithChildren<unknown>> = ({ children }) => {
    * => run the initialize function
    */
   useEffect(() => {
-    initialize();
+    initialize().catch((error) => {
+      console.error(error);
+      notify({
+        type: "error",
+        title: t("error.title"),
+        message: t("error.message"),
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialize]);
 
   return (

src/core/broadcast/actions.ts

@@ -0,0 +1,43 @@
+import Graph from "graphology";
+import { SerializedGraph } from "graphology-types";
+
+import { appearanceAtom } from "../appearance";
+import { AppearanceState } from "../appearance/types";
+import { resetStates } from "../context/dataContexts";
+import { graphDatasetActions } from "../graph";
+import { importStateAtom } from "../graph/import";
+import { initializeGraphDataset } from "../graph/utils";
+import { resetCamera } from "../sigma";
+import { Producer, asyncAction, producerToAction } from "../utils/producers";
+
+/**
+ * Actions:
+ * ********
+ */
+const importGraph = asyncAction(async (data: SerializedGraph, title?: string) => {
+  if (importStateAtom.get().type === "loading") throw new Error("A file is already being loaded");
+  importStateAtom.set({ type: "loading" });
+  try {
+    const graph = Graph.from(data);
+    if (title) graph.setAttribute("title", title);
+
+    const { setGraphDataset } = graphDatasetActions;
+    resetStates(false);
+    setGraphDataset({ ...initializeGraphDataset(graph) });
+    resetCamera({ forceRefresh: true });
+  } catch (e) {
+    importStateAtom.set({ type: "error", message: (e as Error).message });
+    throw e;
+  } finally {
+    importStateAtom.set({ type: "idle" });
+  }
+});
+
+const updateAppearance: Producer<AppearanceState, [Partial<AppearanceState>]> = (newState) => {
+  return (state) => ({ ...state, ...newState });
+};
+
+export const broadcastActions = {
+  importGraph,
+  updateAppearance: producerToAction(updateAppearance, appearanceAtom),
+};

src/core/broadcast/types.ts

@@ -0,0 +1,23 @@
+import { SerializedGraph } from "graphology-types";
+
+import { AppearanceState } from "../appearance/types";
+
+interface BaseBroadcastMessage {
+  action: string;
+  payload: unknown;
+}
+
+export interface ImportGraphBroadcastMessage extends BaseBroadcastMessage {
+  action: "importGraph";
+  payload: {
+    title?: string;
+    graph: SerializedGraph;
+  };
+}
+
+export interface UpdateAppearanceBroadcastMessage extends BaseBroadcastMessage {
+  action: "updateAppearance";
+  payload: Partial<AppearanceState>;
+}
+
+export type BroadcastMessage = ImportGraphBroadcastMessage | UpdateAppearanceBroadcastMessage;

src/core/broadcast/useBroadcast.tsx

@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { TypeGuardError, assert } from "typia";
+
+import { useNotifications } from "../notifications";
+import { broadcastActions } from "./actions";
+import { BroadcastMessage } from "./types";
+
+const MESSAGE_READY = "ready";
+const MESSAGE_ACTION_ENDED = "action-ended";
+
+export function useBroadcast(broadcastID?: string | null) {
+  const { t } = useTranslation();
+  const { notify } = useNotifications();
+
+  useEffect(() => {
+    if (!broadcastID) return;
+
+    const channel = new BroadcastChannel(broadcastID);
+    channel.onmessage = ({ isTrusted, data }) => {
+      if (!isTrusted) {
+        notify({
+          type: "warning",
+          title: t("broadcast.title", { id: broadcastID }),
+          message: t("broadcast.untrusted_message"),
+        });
+      }
+
+      // Validate data type:
+      try {
+        const { action, payload } = assert<BroadcastMessage>(data);
+        switch (action) {
+          case "importGraph":
+            broadcastActions
+              .importGraph(payload.graph, payload.title)
+              .then(() => {
+                channel.postMessage({ message: MESSAGE_ACTION_ENDED, action });
+              })
+              .catch(() => {
+                notify({
+                  type: "error",
+                  title: t("broadcast.title", { id: broadcastID }),
+                  message: t("error.unknown"),
+                });
+              });
+            break;
+          case "updateAppearance":
+            broadcastActions.updateAppearance(payload);
+            channel.postMessage({ message: MESSAGE_ACTION_ENDED, action });
+            break;
+          default:
+            notify({
+              type: "warning",
+              title: t("broadcast.title", { id: broadcastID }),
+              message: t("broadcast.unimplemented_message", { type: action }),
+            });
+        }
+      } catch (e) {
+        if (e instanceof TypeGuardError)
+          notify({
+            type: "error",
+            title: t("broadcast.title", { id: broadcastID }),
+            message: (
+              <>
+                {t("broadcast.wrongly_shaped_message")}
+                <br />
+                {e + ""}
+              </>
+            ),
+          });
+      }
+    };
+    channel.postMessage({ message: MESSAGE_READY });
+
+    return () => {
+      channel.close();
+    };
+  }, [broadcastID, notify, t]);
+}

src/core/utils/producers.ts

@@ -3,7 +3,7 @@ import { WritableAtom } from "./atoms";
 export type Reducer<T> = (v: T) => T;
 
 export type Action<Args extends unknown[] = []> = (...args: Args) => void;
-export type AsyncAction<Args extends unknown[]> = (...args: Args) => Promise<void>;
+export type AsyncAction<Args extends unknown[] = []> = (...args: Args) => Promise<void>;
 
 /**
  * A short function to help automatically type an AsyncAction Args generic.

src/hooks/useKeyboardShortcuts.ts

@@ -1,5 +1,5 @@
 import { omit } from "lodash";
-import { useRef, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 type OptionalKeys = {
   shiftKey?: boolean;

src/locales/dev.json

@@ -764,5 +764,11 @@
       }
     },
     "theme": "Choose a theme"
+  },
+  "broadcast": {
+    "title": "Broadcast {{id}}",
+    "untrusted_message": "Latest message was untrusted. You might want to check the BroadcastChannel setup.",
+    "unimplemented_message": "Messages of type \"{{type}}\" are not implemented yet.",
+    "type_error": "Latest message was not properly typed:"
   }
-}
+}