Nasaearth 15 sync pin selection

src/components/app.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
+import { initializeNeoPlugin } from "../models/plugin-state";
 import { isNonEmbedded } from "../utils/embed-check";
-import { initializeNeoPlugin } from "../utils/codap-utils";
 import { TabContainer } from "./tabs/tab-container";
 import { Provider } from "./ui/provider";
 

src/models/data-manager.ts

@@ -10,7 +10,7 @@ import {
   sendMessage,
 } from "@concord-consortium/codap-plugin-api";
 import { decodePng } from "@concord-consortium/png-codec";
-import { kChartGraphName, kDataContextName, kMapPinsCollectionName, kXYGraphName } from "../data/constants";
+import { kChartGraphName, kDataContextName, kMapPinsCollectionName, kXYGraphName  } from "../data/constants";
 import { createOrUpdateGraphs, createOrUpdateDateSlider, createOrUpdateMap, addConnectingLinesToGraph,
   addRegionOfInterestToGraphs, updateGraphRegionOfInterest, updateLocationColorMap, rescaleGraph
 } from "../utils/codap-utils";

src/models/plugin-state.ts

@@ -1,28 +1,67 @@
-import { getAllItems, IResult } from "@concord-consortium/codap-plugin-api";
-import { makeAutoObservable } from "mobx";
+import { addDataContextChangeListener, getAllItems, getCaseByID, getCaseBySearch, getSelectionList, initializePlugin,
+  IResult, sendMessage  } from "@concord-consortium/codap-plugin-api";
+import { makeAutoObservable, reaction } from "mobx";
 import {
-  kPinColorAttributeName, kPinDataContextName, kPinLatAttributeName, kPinLongAttributeName
+  kDataContextName,
+  kInitialDimensions,
+  kMapPinsCollectionName,
+  kPinColorAttributeName, kPinDataContextName, kPinLatAttributeName, kPinLongAttributeName,
+  kPluginName,
+  kVersion
 } from "../data/constants";
+import { createOrUpdateMap, createSelectionList, deleteSelectionList, updateSelectionList } from "../utils/codap-utils";
 import { NeoDataset } from "./neo-types";
 
-interface IMapPin {
+export interface IMapPin {
   color: string;
   id: string;
   lat: number;
   long: number;
 }
 
+export interface ILocationCase {
+  label: string;
+  pinColor: string;
+}
+
 export function pinLabel(pin: IMapPin) {
   return `${pin.lat.toFixed(2)}, ${pin.long.toFixed(2)}`;
 }
 
+
 class PluginState {
   neoDataset: NeoDataset | undefined;
   neoDatasetName = "";
   pins: IMapPin[] = [];
+  selectedPins: IMapPin[] = [];
+  selectedCases: any[] =[];
 
   constructor() {
     makeAutoObservable(this);
+    // Reaction to changes in selectedPins from MapPinDataContext
+    reaction(
+      () => this.selectedPins,
+      (selectedPins) => {
+        this.handleSelectionChange(
+          selectedPins,
+          kDataContextName,
+          kMapPinsCollectionName,
+          (pin) => `label == ${pinLabel(pin)}`
+        );
+      }
+    );
+    // Reaction to changes in selectedCases NEOPluginDataContext
+    reaction(
+      () => this.selectedCases,
+      (selectedCases) => {
+        this.handleSelectionChange(
+          selectedCases,
+          kPinDataContextName,
+          kMapPinsCollectionName,
+          (sCase) => `pinColor == ${sCase.pinColor}`
+        );
+      }
+    );
   }
 
   setNeoDataset(neoDataset: NeoDataset | undefined) {
@@ -45,6 +84,124 @@
       });
     }
   }
+
+  setSelectedPins(selectedPins: IMapPin[]) {
+    this.selectedPins = selectedPins;
+  }
+
+  setSelectedCases(selectedCases: any[]) {
+    this.selectedCases = selectedCases;
+  }
+
+  async handleSelectionChange<T>(
+    selectedItems: T[], dataContextName: string, collectionName: string, searchQueryFn: (item: T) => string
+  ): Promise<void> {
+    if (selectedItems.length === 0) {
+      deleteSelectionList(dataContextName);
+      return;
+    }
+
+    for (const item of selectedItems) {
+      const searchQuery = searchQueryFn(item);
+      const result = await getCaseBySearch(dataContextName, collectionName, searchQuery);
+
+      if (result.success) {
+        const selectedItemIds = result.values.map((val: any) => val.id);
+        if (selectedItems.length === 1) {
+          createSelectionList(dataContextName, selectedItemIds);
+          return;
+        } else {
+          const updateSelection = await updateSelectionList(dataContextName, selectedItemIds);
+          if (!updateSelection.success) {
+            createSelectionList(dataContextName, selectedItemIds);
+          }
+        }
+      }
+    }
+  }
+}
+
+export async function initializeNeoPlugin() {
+  initializePlugin({ pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions });
+
+  // Create the pin dataset
+  await sendMessage("create", `dataContext`, {
+    name: kPinDataContextName,
+    collections: [
+      {
+        name: "Map Pins",
+        attrs: [
+          { name: kPinLatAttributeName, type: "numeric" },
+          { name: kPinLongAttributeName, type: "numeric" },
+          { name: kPinColorAttributeName, type: "color" }
+        ]
+      }
+    ]
+  });
+
+  // Create map if it doesn't exist
+  await createOrUpdateMap("Map");
+
+  // See if there are any existing pins
+  pluginState.updatePins();
+
+  // Set up a listener for changes to the pin dataset
+  addDataContextChangeListener(kPinDataContextName, notification => {
+    const { operation } = notification.values;
+
+    if (["createCases", "deleteCases", "updateCases"].includes(operation)) {
+      pluginState.updatePins();
+    }
+  });
+  // Set up a listener for pin selection
+  addDataContextChangeListener(kPinDataContextName, async notification => {
+    const { operation, result } = notification.values;
+    if (operation === "selectCases" && result.success) {
+      const selectedPins = await getSelectionList(kPinDataContextName);
+      const selectedPinValues: IMapPin[] = await Promise.all(
+        selectedPins.values.map(async (pin: any) => {
+          const pinItem = await getCaseByID(kPinDataContextName, pin.caseID);
+          if (pinItem.success) {
+            const pinValues = pinItem.values;
+            const pinCase = (pinValues as any).case;
+            return {
+              id: pinCase.id,
+              lat: pinCase.values.pinLat,
+              long: pinCase.values.pinLong,
+              color: pinCase.values.pinColor,
+            };
+          }
+          return null;
+        })
+      );
+      pluginState.setSelectedPins(selectedPinValues);
+    }
+  });
+
+  // Set up a listener for case selection
+  addDataContextChangeListener(kDataContextName, async notification => {
+    const { operation, result } = notification.values;
+    if (operation === "selectCases" && result.success) {
+      const selectedCases = await getSelectionList(kDataContextName);
+      const selectedPinCases = selectedCases.values
+                                .filter((sCase: any) => sCase.collectionName === kMapPinsCollectionName);
+      const selectedCaseValues: any[] = await Promise.all(
+        selectedPinCases.map(async (sCase: any) => {
+          const caseItem = await getCaseByID(kDataContextName, sCase.caseID);
+          if (caseItem.success) {
+            const caseValues = caseItem.values;
+            return {
+              id: caseValues.id,
+              label: caseValues.case.values.label,
+              pinColor: caseValues.case.values.pinColor,
+            };
+          }
+          return null;
+        })
+      );
+      pluginState.setSelectedCases(selectedCaseValues);
+    }
+  });
 }
 
 export const pluginState = new PluginState();

src/utils/codap-utils.ts

@@ -1,47 +1,7 @@
-import { addDataContextChangeListener, codapInterface, initializePlugin, sendMessage
-} from "@concord-consortium/codap-plugin-api";
-import {
-  kPinDataContextName, kPinLatAttributeName, kPinLongAttributeName, kPinColorAttributeName,
-  kPluginName, kInitialDimensions, kVersion,
-  kDataContextName, kMapPinsCollectionName, kOneMonthInSeconds,
-  kMapName, kSliderComponentName, kChartGraphName, kXYGraphName,
-} from "../data/constants";
-import { pluginState } from "../models/plugin-state";
-
-export async function initializeNeoPlugin() {
-  initializePlugin({ pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions });
-
-  // Create the pin dataset
-  await sendMessage("create", `dataContext`, {
-    name: kPinDataContextName,
-    collections: [
-      {
-        name: "Map Pins",
-        attrs: [
-          { name: kPinLatAttributeName, type: "numeric" },
-          { name: kPinLongAttributeName, type: "numeric" },
-          { name: kPinColorAttributeName, type: "color" }
-        ]
-      }
-    ]
-  });
-
-  // Create map if it doesn't exist
-  await createOrUpdateMap("Map");
-
-  // See if there are any existing pins
-  pluginState.updatePins();
-
-  // Set up a listener for changes to the pin dataset
-  addDataContextChangeListener(kPinDataContextName, notification => {
-    const { operation } = notification.values;
-
-    if (["createCases", "deleteCases", "updateCases"].includes(operation)) {
-      pluginState.updatePins();
-    }
-  });
-
-}
+import { codapInterface, sendMessage }
+  from "@concord-consortium/codap-plugin-api";
+import { kOneMonthInSeconds, kMapName, kMapPinsCollectionName, kDataContextName, kSliderComponentName,
+  kChartGraphName, kXYGraphName } from "../data/constants";
 
 export async function createOrUpdateMap(title: string, url?: string): Promise<void> {
   const mapProps: Record<string, any> = {
@@ -209,3 +169,26 @@
                   { colormap: colorMap });
   return updateColorMap;
 };
+
+export const getSelectionList = async (dataContext: string) => {
+  const selectionList = await sendMessage("get", `dataContext[${dataContext}].selectionList`);
+  if (selectionList.success) {
+    return selectionList.values;
+  } else {
+    console.error("Error getting selection list");
+    return [];
+  }
+};
+
+export const deleteSelectionList = async (dataContext: string) => {
+  await sendMessage("create", `dataContext[${dataContext}].selectionList`, []);
+};
+
+export const createSelectionList = async (dataContext: string, selectedCaseIds: string[]) => {
+  await sendMessage("create", `dataContext[${dataContext}].selectionList`, selectedCaseIds);
+};
+
+export const updateSelectionList = async (dataContext: string, selectedCaseIds: string[]) => {
+  const result = await sendMessage("update", `dataContext[${dataContext}].selectionList`, selectedCaseIds);
+  return result;
+};