Fetching all the children of a picked node or link

[arashkav]

When we get the object from a FlowmapLayerPickingInfo object, we can not see all the building blocks of the picked object at the highest granularity.

I can see the children but those children themselves might have other children. Is there any function that wen can call and gives us all the nodes that creating a clustered node or the origins/destination of a clustered link?

[ilyabo]

Yes, I think what you are looking for is ClusterIndex.expandCluster()

You should be able to get access to the clusterIndex in a click/hover listener by calling flowmapLayer.state?.dataProvider.getSelectors().getClusterIndex().

[arashkav]

Wonderful! Thanks...

[AlexGodbehere]

@ilyabo sorry for resurrecting this old thread, but is this still the recommended approach? When I try to call the following:

onClick: (e) => {
    console.log(e.layer.state.dataProvider.getSelectors().getClusterIndex())
},

I get:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'flows')
    at FlowmapSelectors.getFlowsFromProps (@flowmap__gl_layers.js?v=18610e13:3584:54)
    at dependenciesChecker (@flowmap__gl_layers.js?v=18610e13:2995:37)
    at memoized (@flowmap__gl_layers.js?v=18610e13:2930:20)
    at dependenciesChecker (@flowmap__gl_layers.js?v=18610e13:2995:37)
    at memoized (@flowmap__gl_layers.js?v=18610e13:2930:20)
    at dependenciesChecker (@flowmap__gl_layers.js?v=18610e13:2995:37)
    at memoized (@flowmap__gl_layers.js?v=18610e13:2930:20)
    at dependenciesChecker (@flowmap__gl_layers.js?v=18610e13:2995:37)
    at FlowmapSelectors.memoized [as getClusterIndex] (@flowmap__gl_layers.js?v=18610e13:2930:20)
    at onClick (Map.vue:120:71)

What am I missing here? When I log e.layer.state.dataProvider.getSelectors() I get this:

[ilyabo]

Try this:

dataProvider.selectors.getClusterIndex(
      dataProvider.flowmapState,
      dataProvider.flowmapData
)

[AlexGodbehere]

@ilyabo That worked, thanks, but I now get an error with .expandCluster()

@flowmap__gl_layers.js?v=5ba454c6:3111 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'zoom')

Looking at the source code it expects a cluster. I tried:

const cluster = e.layer.state?.dataProvider.selectors.getClusterIndex(
    e.layer.state?.dataProvider.flowmapState,
    e.layer.state?.dataProvider.flowmapData
);

console.log(cluster.expandCluster(cluster))

But it returns [undefined]. Any ideas?

[AlexGodbehere]

Giving some context may help. I'm using FlowMap via a MapboxOverlay:

map.value.once('load', () => {
  map.value.getCanvas().style.cursor = 'crosshair'
  // Create the Deck.gl overlay
  deckOverlay.value = new MapboxOverlay({
    interleaved: false,
    layers: [],
  })
  map.value.addControl(deckOverlay.value)
})

// Create the layer
const deckLayer = new FlowmapLayer({
  id: 'flowmap',
  data: {
    locations: this.locations,
    flows: this.flows,
  },
  darkMode: true,
  colorScheme: 'Grayish',
  highlightColor: '#ffc04b',
  maxTopFlowsDisplayNumber: 1000,
  fadeOpacityEnabled: false,
  pickable: true,
  onClick: (e) => {
    if (e.object.type === 'flow') {
      this.filterFlow(e)
    }
    else {
      // XXX - The aim is to get all of the locations under the clustered location

      const cluster = e.layer.state?.dataProvider.selectors.getClusterIndex(
        e.layer.state?.dataProvider.flowmapState,
        e.layer.state?.dataProvider.flowmapData
      );
      console.log(cluster)
    }
  },
  getLocationId: (loc) => loc.id,
  getLocationLat: (loc) => loc.lat,
  getLocationLon: (loc) => loc.lon,
  getFlowOriginId: (flow) => flow.origin,
  getFlowDestId: (flow) => flow.dest,
  getFlowMagnitude: (flow) => flow.count,
  getLocationName: (loc) => loc.name,
}),

// Add this to Deck
deckOverlay.value.setProps({
  layers: [deckLayer],
})

[AlexGodbehere]

Managed to solve this. Here is the solution if anyone else comes across this:

onHover: (e) => {

  let ids       = []
  let originIds = []
  let destIds   = []

  const dataProvider = e?.layer.state?.dataProvider

  if (dataProvider) {
    const clusterIndex = dataProvider?.selectors.getClusterIndex(dataProvider.flowmapState, dataProvider.flowmapData)

    if (clusterIndex && e.object) {

      // 🌍 Handling Location Nodes
      if (e.object.type === 'location') {
        const possibleCluster = clusterIndex.getClusterById?.(e.object.id)
        if (possibleCluster) {
          ids = clusterIndex.expandCluster(possibleCluster)
        }
        else {
          ids = [e.object.id]
        }
      }

      // ✈️ Handling Flows
      if (e.object.type === 'flow') {
        const flow = e.object.flow

        // Handle Origin
        const originCluster = clusterIndex.getClusterById?.(flow.origin)
        if (originCluster) {
          originIds = clusterIndex.expandCluster(originCluster)
        }
        else {
          originIds = [flow.origin]
        }

        // Handle Destination
        const destCluster = clusterIndex.getClusterById?.(flow.dest)
        if (destCluster) {
          destIds = clusterIndex.expandCluster(destCluster)
        }
        else {
          destIds = [flow.dest]
        }
      }
    }
  }
}