React write to chart with runTrackedMutations

[stvdo]

Good afternoon,

I created a simple React plugin which retrieves entities from the information store via the geospatial search api. I can show those items on a OS map.

The next step I would archive is to add those entities also on the chart. I tried to implement the runTrackedMutations but without success, https://i2group.github.io/notebook-sdk/guide/tutorials/mutation-plugin.html.

Please can you help me with a working example of this functionality in React? Or maybe I should just create a 'normal' plugin, because I am not a React specialist:)

[Anthony-Johnson-i2]

Hi Steven have you checked out the samples that go with the tutorials?

https://github.com/i2group/notebook-sdk/tree/main/samples

That has working code you can look at or run which might help.

Cheers

[stvdo]

Hi Anthony,

I checked the examples, but there is no example how to add entities on the chart in React. In the React example they only show how to read selected entities from the chart. Entities are added to the chart only in the basic plugin in the entrypoint.js.

And I am struggling to convert that example into React.

for (const event of eventData) { const startDateTime = mutations.valueFactory.createZonedDateTime( event.dateTime, getTimeZone(api.allTimeZones, event.timeZoneId), false );

      const eventRecord = mutations.addEntityRecord({
        itemType: eventEntityType,
        properties: {
          [eventTypePropertyType.id]: event.type,
          [startDateTimePropertyType.id]: startDateTime,
        },
      });

      const personSeenRecord = personLookup.get(event.wasSeen);

      if (personSeenRecord === undefined) {
        throw new Error(`Person matching ${event.wasSeen} is missing`);
      }

      mutations.addLinkRecord({
        itemType: observedLinkType,
        fromEnd: eventRecord,
        toEnd: personSeenRecord,
        linkDirection: 'with',
      });

      mutations.selection.add(eventRecord);
    }

[Tim-Mawson-i2]

Hi @sdorresteijn88, Where are you calling runTrackedMutation? I'd probably expect that to be called in response to a button click, in the React component?

e.g.

const handleClick = () => {
  api.runTrackedMutation((application, mutations) => {
    mutations.addEntityRecord(...);
  });
};

return <button onClick={handleClick} />

[stvdo]

Hi Tim,

Thanks for your response. Finally I'll use it in the onCreate event of Leaflet Draw. But for now a simple working example where you can add a person to the canvas (https://github.com/i2group/notebook-sdk/blob/main/samples/mutation-plugin/entrypoint.js) would be great.

Attached the setup with just a button and the on click handler.

src.zip

[Tim-Mawson-i2]

Thanks for your suggestion. I'll add something to our backlog to enhance our React/Angular/Vue examples to show how mutation might be integrated with UI components.

[stvdo]

That would be great! Can you also give an estimate in terms of planning? This is in connection with a demo that is planned soon, where I would like to show the power of the plugins.

[Tim-Mawson-i2]

I'm not able to give a time frame for when we'd be able to introduce new examples. The snippet I gave:

const handleClick = () => {
  api.runTrackedMutation((application, mutations) => {
    mutations.addEntityRecord(...);
  });
};

return <button onClick={handleClick} />

shows how you could call runTrackedMutation within a click handler. The files you attached seem to contain the right idea (albeit commented out)

[Tim-Mawson-i2]

@sdorresteijn88 I've thrown together a quick example of using the mutation API in a react app, based on the existing SDK react example:

mutation-react-plugin.zip

[stvdo]

Thanks a lot Tim, this is very helpful!