Trigger event on semantic-* component data loading and pass query results to external template

[gspinaci]

Hello!

I am using the <mp-event-proxy> element to capture the Component.Loaded event when a <semantic-*> component (in my specific case a <semantic-table>, but I will most certainly use a <semantic-map> component in the next iterations).

My Intention is to pass the result of the query to an external element, namely <mp-event-target-template-render>.

This is my configuration:

<mp-event-proxy id='on-load-archipelago-data' on-event-source='archipelago-data' proxy-event-type='Component.TemplateUpdate' proxy-targets='["sidebar"]' data='{"msg": "{{bindings}}"}'></mp-event-proxy>
<semantic-table
id="archipelago-data"
query='
    PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/>
    PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
    PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

    SELECT ?bw_id ?start_date ?end_date WHERE {

        ?bw crm:P1_is_identified_by ?id_node.
        ?id_node rdfs:label ?bw_id.

        ?bw rdfs:label ?name.

        ?bw crm:P108i_was_produced_by ?prod.
        ?prod a crm:E12_Production.
        ?prod crm:P4_has_time-span ?prod_date.
        ?prod_date crm:P82a_begin_of_the_begin ?start_date.

        optional{
            ?bw crm:P13i_was_destroyed_by ?desc.
            ?desc a crm:E6_Destruction.
            ?desc crm:P4_has_time-span ?dest_date.
            ?dest_date crm:P82b_end_of_the_end ?end_date
        }
    } limit 10'>
</semantic-table>

<mp-event-target-template-render id='sidebar' template='{{> sidebar_tmpl}}'>
    <template id='sidebar_tmpl'>
        {{#if msg}}<strong>{{msg}}</strong>{{/if}}
    </template>
</mp-event-target-template-render>

This is working, but the only data I'm able to pass are strings.

See the result here:

I have also tried front-end debugging with Google Chrome and Firefox, but I'm not finding any clue about variable names or how to handle it.

Is there something I'm missing right now?

P.S. I have also tried with <mp-event-trigger> specifying the event type as Component.Loaded, but it is not working.

[aindlq]

1. The problem is with data='{"msg": "{{bindings}}"}. I think you misunderstood the way it works:

  /**
   * Data that will be sent to all targets instead of the original event's data
   */
  data?: object;

https://github.com/researchspace/researchspace/blob/master/src/main/web/components/events/EventProxy.ts#L69

You don't need to use data attribute here.

2. It seems that semantic-table doesn't send the actual result with Component.Loaded event, see https://github.com/researchspace/researchspace/blob/master/src/main/web/components/semantic/table/SemanticTable.ts#L256

Try to change that to something like:

    const loading = this.querying
      .map(SparqlClient.select(props.query, { context: context.semanticContext }))
      .onValue((res) => {
        if (this.props.id) {
          trigger({ eventType: BuiltInEvents.ComponentLoaded, source: this.props.id, data: {result: res} });
        }
        this.setState({ data: res, isLoading: false })
      })
      .onError((error) => this.setState({ isLoading: false, error }));

3. Just a reminder, you can add {{log this}} anywhere in the client-side template and see what is available in current scope in the browser console. https://handlebarsjs.com/guide/builtin-helpers.html#log

[gspinaci]

Brilliant, it is working!

I wasn't thinking of passing data when within the trigger function like this. Also, I spent some time trying to understand how to handle it from the end of the stream.

Thank you very much!