7.9 SDL: Filtering in dataSource fetch for UIViewChartMetricsHistogram

I have an asset details page built on a UIViewComponent with a data source that gets a single asset record based on the page’s ID. This loads correctly and I can populate attributes/metrics with the asset’s record data.

I want to build a histogram with one of the fields (a collection of child types) on this asset. I’m using a UIViewChartMetricsHistogram component as the child component, as discussed and debugged in a previous post.

Now, I want my histogram’s data source to fetch and filter where a field in the child type matches a parameter - whether that’s a record.data... parameter or a params / pageParams ID, I don’t really have a preference as long as one works. I’ve scoured Community, Slack, API documentation, and other app repos to no avail. I think the crux of my problem has to do with this line from the UIViewChartMetricsHistogram API, but I don’t know how to get around it.

This means that the "autoLoadData" config does nothing for this component,
and the method onRenderDataLoaded, while still triggered be every render,
won't mean that the data for this component is fully loaded.

Any recommendations?

For Clarity: by “as long as one works”, the problem I’ve been running in to is that the dataSource for the child component (histogram) doesn’t populate its filter criteria with pageParams.id, record.data.id, etc.

What have you tried so far? What does your configuration look like?

I’ve tried permutations of:

  • Including/excluding autoLoadData at the parent component and the child component
  • Filtering by my child dataSource on id == '{{ pageParams.id }}', id == '{{ params.id }}', and id == '{{ record.data.id }}'
  • Including/excluding a data field on the parent component like:
  {
    "redux": true,
    "record": true,
    "c3type": "AircraftLevelSummary",
    "c3function": "get",
    "c3arguments": {
      "obj": {
        "id": "{{ pageParams.id }}"
      }
    }
  }
  • a range of other things I don’t recall, but could give yes’s and no’s to

My histogram dataSource looks like this:

{
    "collection": true,

    "c3type": "AircraftLevelDetails",
    "c3function": "fetch",
    "c3arguments": {
      "spec": {
        "filter": "uniqueAircraftIdentifier == '{{ params.id }}'",
        "limit": -1
      }
    },

    "responseSelector": "objs"
  }

With that filter line removed, my (unfiltered) data returns in the correct form for me to make the histogram. Any dynamic content in that filter line doesn’t get populated.

The curious part for me in trying to debug this is that when I throw browser breakpoints into the load/render process for any SDL components I have (e.g. UIViewSDLTileGrid used elsewhere on the page), I see the appropriate page parameters on the parent type showing up in this before data.load() gets called – which makes sense, since the component is a part of the page and those params are required for my other components to fetch/filter correctly. I would think that should trickle down to the UIViewChartMetricsHistogram, but those fields don’t exist on this before the data load occurs… thus, I’m not surprised that my API call is sending something like this and not getting any data back:

{"spec":{"filter":"uniqueAircraftIdentifier == ''","limit":-1}}
                   where my param should be... ^^

What I cannot explain is why that is happening, or how to fix it.

Is that the histogramDataSource or the itemsDataSource? I think only the items data source should be doing a fetch, the histogram data source should be calling a different API that returns a HistogramEvaluationResult.

Keep in mind that only components that mix UIReactBase can use UIDataRedux data sources.

What kind of component is the parent component?

The parent is a UiLayoutSideMenu component, which mixes UIReactPage. I’ve already been down the rabbit hole of trying to get the parent’s dataSource to work, only to learn that the "redux": true field was necessary at that level :smiley:

This child component is in components, not children, for the same reason.

UIReactPage pages currently don’t propagate their params to child non-UIReactBase components (due to significant architectural differences). This is a known limitation and there are potential workarounds entailing traversing to the page (e.g. parent.params.id—untested though), but at this point you might want to re-evaluate whether you really need a UIReactPage or if a normal UIViewPage would be sufficient for your use case.

Can UIViewPages coexist in the same Application as UIReactPages?

I tried the parent.params.id route and it seems like it could work for something like a dynamicTitle but doesn’t appear to propagate out to the dataSource (which, in answer to your earlier question, is the itemsDataSource) so I’m not sure that workaround will work.

However, when I tried re-wickering everything around a UIViewPage and the 7.8 constructs, I got an error saying that only UIReactBase components could be called from a UiViewComponentRef. Now I want to make sure this is even possible before I invest time in debugging it.

Yes

Correct, UIReactBase.children is an array of UiViewComponentRef, and only UIReactBase components can be referenced there. Double check you’re not trying to render a non-UIReactBase component in children, which shouldn’t be an issue if you’re not using UIReactPage/UIReactBase since that field won’t exist.