ListGrid.searchForm and implicitCriteria referencing another form

[claudiobosticco]

SmartClient Version: v13.0p_2023-08-29/AllModules Development Only (built 2023-08-29)

Chrome on MacOS

Hello, I'm trying the grid.searchForm feature together with a grid.implicitCriteria which uses a value from another form.

It's almost working in my application, but there's some strange behaviour.

I've modified a sample in the showcase, and it seems that I can replicate at least some of that behaviour.

I've used the tieredFiltering sample as a starting point, and I've created a 2nd form and added an implicitCriteria to the grid, which uses the value of the form:

isc.SearchForm.create({
    ID: "specializedForm",
    numCols: 2,
    width: 800,
    fields: [
        { name:"hemisphereField", type:"radioGroup", title:"Hemisphere", valueMap:["Any", "Northern", "Southern"],
            vertical:false,
            getCriterion: function () {
                var optionHemisphere = this.getValue(),
                    criterion = {},
                    southernCountries = ["Indonesia", "Argentina", "Bolivia", "Australia", "Brasil", "Chile", "Paraguay",
                                         "Ecuador","Mauritius", "Somalia", "Tanzania", "Zambia",
                                         "Peru", "Uruguay", "Angola", "Botswana", "Burundi", "Madagascar", "South Africa",
                                         "Kenya", "Malawi", "Mozambique", "Namibia", "Nauru", "New Zeland", "Congo"];

                if (optionHemisphere && optionHemisphere != "Any") {
                    if (optionHemisphere == "Northern") {
                        criterion = { fieldName:"countryName", operator:"notInSet", value:southernCountries }
                    } else {
                        criterion = { fieldName:"countryName", operator:"inSet", value:southernCountries }
                    }
                }
                return criterion;
            }
        }
    ],
    itemChanged: function (item, newValue) {
        this.submit();
    },
    colWidths: [120, "*"],
    values: {
        hemisphereField:"Any"
    }
});

isc.DynamicForm.create({
    ID: "aForm",
    numCols: 2,
    width: 800,
    fields: [
        { name:"continent", type:"select", title:"Continent", valueMap:["Europe", "North America", "South America", "Asia", "Africa", "Australia/Oceania"], multiple: true}
    ],
    colWidths: [120, "*"]
});

isc.ListGrid.create({
    ID: "countryList",
    width:800, height:224, alternateRecordStyles:true,
    dataSource: worldDS, autoFetchData: true,
    canShowFilterEditor: true,
    searchForm: "specializedForm",
    implicitCriteria: {
        _constructor: "AdvancedCriteria",
        operator: "or",
        criteria:[
            {fieldName: "continent", operator:"inSet", valuePath:"aForm.values.continent"}
        ]
    },
    allowFilterOperators: true,
    alwaysShowOperatorIcon: true,
    fields:[
        {name:"countryName"},
        {name:"continent"},
        {name:"population"},
        {name:"area"},
        {name:"gdp"},
        {name:"independence", width:100}
    ]
});

isc.VStack.create({
    width: "100%",
    membersMargin:10,
    members:[ specializedForm, aForm, countryList ]
})

The behaviour I see is:
- after clicking "try it", 3 fetches and two warnings "refreshData:countryList:A fetch for this component is currently pending, please try again later"
- choose "Southern": 4 fetches
- choose "Northern": 4 fetches
- choose "Southern": 7 fetches
- choose "Europe": 4 fetches
- then selecting other options, in both forms, triggers only one fetch
- but if I remove all the selected options from the 2nd form, and change option in the 1st: 8 fetches

Then if I return to the js code tab, and then click again "try it", I get this error:

14:29:39.887:MUP1:WARN:Log:TypeError: Cannot read properties of null (reading 'getVisibleRows')
Stack from error.stack:
    _3.eval(<no args: exited>) on[ListGrid ID:countryList] @ [no file]:3:18
    Canvas.refreshData(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:4906:37
    _3.<anonymous>(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Grids.js:3446:4
    _3.observation(<no args: exited>) on [FeatureExplorer ID:featureExplorer] @ ISC_Core.js:367:394
    Canvas.fireRuleContextChanged(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:4311:1279
    Canvas._provideRuleContext(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:4307:54
    Canvas.provideRuleContext(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:4295:6
    ListGrid._removeFromRuleScope(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Grids.js:3446:260
    Canvas.prepareForDestroy(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:3344:58
    [c]Class.invokeSuper(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:315:93
    [c]Class.Super(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:307:170
    ListGrid.prepareForDestroy(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Grids.js:1574:6
    Canvas.destroy(<no args: exited>) on[ListGrid ID:countryList] @ ISC_Core.js:3329:52
    [c]Class.destroyGlobals(<no args: exited>) on [Class Class] @ ISC_Core.js:341:452
    ExampleViewer.evalExample(<no args: exited>) on [ExampleViewer ID:featureExplorer_exampleViewer] @ ISC_ExampleViewer.js:96:432
    ExampleViewer.showExample(<no args: exited>) on [ExampleViewer ID:featureExplorer_exampleViewer] @ ISC_ExampleViewer.js:96:61
    ExampleSourcePane.tryEditedCode(<no args: exited>) on [ExampleSourcePane ID:featureExplorer_exampleViewer_exampleSourcePane] @ ISC_ExampleViewer.js:115:2029
    SourceEditor.tryClicked(<no args: exited>) on [SourceEditor ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor] @ ISC_ExampleViewer.js:119:491
    _3.eval(<no args: exited>) on [IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton] @ [no file]:3:35
    StatefulCanvas.handleActivate(<no args: exited>) on [IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton] @ ISC_Foundation.js:242:108
    StatefulCanvas.handleClick(<no args: exited>) on [IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton] @ ISC_Foundation.js:243:13
    [c]EventHandler.bubbleEvent(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:2543:89
    [c]EventHandler.handleClick(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:2351:50
    EventHandler._handleMouseUp(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:2333:11
    [c]EventHandler.handleMouseUp(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:2324:57
    [c]EventHandler.dispatch(_1=>[c]EventHandler.handleMouseUp(), _2=>[object MouseEvent]) on [Class EventHandler] @ ISC_Core.js:2642:122
    HTMLDocument.eval(event=>[object MouseEvent]) @ [no file]:3:123

14:29:39.999:XRP7:WARN:ResultSet:isc_ResultSet_3 (dataSource: worldDS, created by: undefined):Invalid observation: Target is not an object. target: null, methodName: dataChanged, action: 'observer.dataSourceDataChanged(dsRequest,dsResponse)'
14:29:40.130:XRP6:WARN:ResultSet:isc_ResultSet_2 (dataSource: worldDS, created by: undefined):Invalid observation: Target is not an object. target: null, methodName: dataChanged, action: 'observer.dataSourceDataChanged(dsRequest,dsResponse)'

Also, if I use a TreeGrid instead of a ListGrid, I see even more fetches. Actually in my application it starts doing endless fetches, but I couldn't replicate this in the showcase.

[claudiobosticco]

Maybe this is even simpler and more similar to my use case:

isc.DynamicForm.create({
    ID: "form1",
    width: 800,
    fields: [
        {
            name: "government",
            type: "select",
            title: "Government",
            valueMap: ["republic", "constitutional monarchy", "federal republic", "dependent territory of the UK"],
            multiple: true
        }
    ],
    colWidths: [120, "*"]
})

isc.SearchForm.create({
    ID: "form2",
    numCols: 2,
    width: 800,
    fields: [
        {
            name: "continent",
            type: "select",
            title: "Continent",
            valueMap: ["Europe", "North America", "South America", "Asia", "Africa", "Australia/Oceania"]
        }
    ],
    colWidths: [120, "*"]
});

isc.ListGrid.create({
    ID: "countryList",
    width: 800, height: 224, alternateRecordStyles: true,
    dataSource: worldDS, autoFetchData: true,
    canShowFilterEditor: true, filterOnKeypress: true,
    searchForm: "form2",
    implicitCriteria: {
        _constructor: "AdvancedCriteria",
        operator: "or",
        criteria: [
            {fieldName: "government", operator: "inSet", valuePath: "form1.values.government"}
        ]
    },
    allowFilterOperators: true,
    alwaysShowOperatorIcon: true,
    fields: [
        {name: "countryName"},
        {name: "continent"},
        {name: "population"},
        {name: "area"},
        {name: "gdp"},
        {name: "independence", width: 100}
    ]
});

isc.VStack.create({
    width: "100%",
    membersMargin: 10,
    members: [form1, form2, countryList]
})

There are many fetches, for example:

1 - try it -> 3 fetches
2 - open government select -> 2 fetches
3 - choose republic -> 3 fetches
4 - open continent select -> 3 fetches
5 - choose Europe -> 6 fetches
6 - check also North America -> 6 fetches

[Isomorphic]

hi Claudio,

We've fixed the crash you reported (an attempt to respond to RuleContext changes while the grid was in the middle of being destroyed). We also demoted the warning you mentioned to an INFO level log.

You're correct that extra fetches are happening here - it looks like we're still responding to changes in the RuleContext too aggressively / more often than strictly necessary.

We're looking some more into this part and will update here when we have more information.

[Isomorphic]

Quick follow-up - if you retest with the latest build, September 6 or later, you should find the unnecessary-fetches issues also fixed. That is, you should no longer get multiple fetches as formItems lose or receive focus, for example, or get fetches when valuePath items have no value (such as fetches with value: null on initial draw, as noted in another of your reports).

The implementation may yet change, so the behavior isn't yet documented - but please confirm whether it addresses your issues.

Note that, in your sample code, you have multiple: true on the wrong item - your implicitCrit specifies an "inSet" operator, but the "government" item is not multiple: true, so it doesn't return an array.

[claudiobosticco]

SmartClient Version: v13.0p_2023-09-06/AllModules Development Only (built 2023-09-06)

Hello, and thanks for the heads up about the error in the test case.

I still see both the crash and the multiple fetches, maybe I need to wait for tomorrow's build?

[Isomorphic]

hi Claudio,

You may need to clear browser caches - assuming that you've set multiple: true on the government item, we see things working as expected if we paste your code here.

[claudiobosticco]

ok, I was trying with 13.0, not 13.1.

Yes, I can confirm that the test case is working with 13.1, also I don't see the fetch with value null noted here https://forums.smartclient.com/forum...aluepath/page2

please let me know when I can try 13.0, as I can't try 13.1 in my app due to this other problem https://forums.smartclient.com/forum...lds#post270746

[Isomorphic]

We've just ported the necessary changes and you can try them out in today's 13.0 builds, dated September 8, or later ones.

[claudiobosticco]

SmartClient Version: v13.0p_2023-09-18/AllModules Development Only (built 2023-09-18)

I can confirm that it's fixed in 13.0 also, thank you very much

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-04-10/AllModules Development Only (built 2024-04-10)

SmartClient Version: v13.0p_2024-04-10/AllModules Development Only (built 2024-04-10)

Hello, I noticed that I see many unnecessary fetches while playing with this test case:

isc.DynamicForm.create({
    ID: "form1",
    width: 800,
    fields: [
        {
            name: "government",
            type: "select",
            title: "Government",
            valueMap: ["republic", "constitutional monarchy", "federal republic", "dependent territory of the UK"],
            multiple: false
        }
    ],
    colWidths: [120, "*"]
})

isc.SearchForm.create({
    ID: "form2",
    numCols: 2,
    width: 800,
    fields: [
        {
            name: "continent",
            type: "select",
            title: "Continent",
            valueMap: ["Europe", "North America", "South America", "Asia", "Africa", "Australia/Oceania"]
        }
    ],
    colWidths: [120, "*"]
});

isc.ListGrid.create({
    ID: "countryList",
    width: 800, height: 224, alternateRecordStyles: true,
    dataSource: worldDS, autoFetchData: false,
    canShowFilterEditor: true, filterOnKeypress: true,
    searchForm: "form2",
    implicitCriteria: {
        _constructor: "AdvancedCriteria",
        operator: "or",
        criteria: [
            {fieldName: "government", operator: "inSet", valuePath: "form1.values.government"}
        ]
    },
    allowFilterOperators: true,
    alwaysShowOperatorIcon: true,
    fields: [
        {name: "countryName"},
        {name: "continent"},
        {name: "population"},
        {name: "area"},
        {name: "gdp"},
        {name: "independence", width: 100}
    ]
});

isc.VStack.create({
    width: "100%",
    membersMargin: 10,
    members: [form1, form2, countryList]
})

for example when you just open/close the picklists, but also when choosing an option.