TypeError: Cannot read property 'getBoundingClientRect' of undefined about ngx-ui-scroll

[dhilt]

Hey @dabcat! May I ask you to post you code related to the Datasource and reload method implementation? Periodical undefined element issue looks like a kind of race condition... The best help you can make is to create a stackblitz demo of your situation. You may take this one, upgrade ngx-ui-scroll dependency to v0.0.4, throw away pseudo-reload logic from the AppComponent and paste your code instead. If it will have, say, 1/25 reproductivity probability, it will be enough for me. Thanks!

[dabcat]

Seems like you are right, it was race condition which a simple setTimeout fixed... though I still dont understand why exactly.

I simply wrapped adapter.reload into timeout func:

setTimeout(() => this.datasource.adapter.reload(firstOrdinal), 100);

Unfortunately I can't setup stackblitz demo because of the complexity of stream (and app) which feeds the datasource but will try to explain it.

I have a stream of messages which I need to render 50 at a time. I have various filters which are filtering that stream. On ngOnChanges() I'm checking if the stream has changed (component input), and if it is I call this.datasource.adapter.reload(firstOrdinal) which should update rendered elements.

At this point I'm getting error if the new stream has less elements then old, e.g. old one had 50 and new one has 8. Hope this helps ✌️

[dhilt]

@dabcat I'm working on v0.0.5, this new version will have new Workflow engine, the Adapter (and Adapter.reload) will be affected. This update will have to reduce async code complexity. Since we have no repro, I would prefer to concentrate on the next release and there is a great chance that it will solve your issue.

By the way, I think that 100ms delay could be replaced with zero-timeout: setTimeout(() => this.datasource.adapter.reload(firstOrdinal)); is it true?

[dabcat]

@dhilt thanks man, looking forward to test new version.

I tried zero-timeout before anything else and it didn't work, so 100ms seems to do it's job.

Cheers!

[dhilt]

@dabcat v0.0.5-rc has been just released, could you try it in your project? If it does not help, I would ask you to post your Datasource implementation and all other code related to the uiScroll. Thanks!

[dabcat]

@dhilt I tried 0.0.5-rc and it doesn't throw error anymore (without timeout func) but it calculates elements position in the viewport incorrectly... e.g. it scrolls down out of viewport showing empty list so you need to scroll up to view elements.

Again this is solved with setTimeout().

Did you change any of the API's?

[dhilt]

@dabcat No, the API has not been changed, tests also have not been changed (only infrastructure updates). We have more than 100 tests on positions calculations, so without repro and code sources it seems difficult to understand what's wrong. In my experience, list gaps are commonly Datasource implementation issue, so posting the code may help!

[dabcat]

Here is the class and template:

export class LogMessagesListComponent implements OnInit, OnChanges, AfterViewInit {
    @Input('layout-group') layoutGroup: Observable<Array<string>>;
    @Input() players: Observable<IPlayer>;
    @Input('log-entries') logEntries: Array<ILogEntry>;
    @Input('current-point') currentPoint: number;
    @Input('current-index') currentIndex: number;
    @Input('starred-hash-codes') starredHashCodes: Observable<Array<number>>;
    @Input('player-refreshed') playerRefreshed: Observable<boolean>;
    @Input('zoom-step') zoomAggregationStepSize: number;
    @Input('highlight-text') highlight: string;
    @Input() columns: Observable<Array<string>>;
    @Input('height') height: number;
    @Input('tab-refreshed') tabRefreshed: Observable<any>;

    @ViewChildren(LogMessageComponent) logMessages: QueryList<any>;

    public datasource: Datasource;

    constructor(
        private elRef: ElementRef,
        private cogitaDataService: CogitaDataService,
        private laSvc: LogAnalyzerService
    ) { }

    ngOnInit() {
        Observable.fromEvent(window, 'resize')
            .debounceTime(500)
            .subscribe(() => this.setContainerHeight())
    }

    ngOnChanges(changes: SimpleChanges) {
        // console.log(changes)
        if(changes.currentIndex && changes.currentIndex.currentValue) {
            this.datasource.adapter.reload(changes.currentIndex.currentValue);
        } else if(changes.logEntries && !changes.logEntries.isFirstChange()) {
            let firstOrdinal = changes.logEntries.currentValue[0] ? +(changes.logEntries.currentValue[0].ordinal) : undefined;
            firstOrdinal && this.datasource.adapter.reload(firstOrdinal)
        } else if(changes.tabRefreshed && !changes.tabRefreshed.isFirstChange() && changes.tabRefreshed.currentValue.label === 'LOG_MESSAGES_TAB') {
            let firstOrdinal = this.logEntries ? +(this.logEntries[0].ordinal) : undefined;
            firstOrdinal && setTimeout(() => this.datasource.adapter.reload(firstOrdinal), 100)
            this.datasource.adapter.isLoading = false;
        }
    }

    ngAfterViewInit() {
        this.datasourceInit();
        this.setContainerHeight();
    }

    datasourceInit(startIndex?: number) {
        this.datasource = {
            get: (index, count) => {
                const start = Math.max(1, index);
                const end = index + count - 1;
                return (start <= end) ? this.fetchItems(start, count) : Observable.of([]);
            },
            settings: {
                bufferSize: 70,
                padding: 2,
                startIndex: startIndex ? startIndex : undefined
            }
        };
    }

    fetchItems(buffer, count): Observable<any> {
        return this.cogitaDataService.logEntriesRequest$
            .take(1)
            .distinctUntilChanged()
            .switchMap((request) => {
                // console.log(request)
                let newRequest: any = Observable.of({
                    start: buffer,
                    quantity: count,
                    filters: request.filters
                })
                return this.laSvc.createIndexedLogEntriesLoader(newRequest).distinctUntilChanged().map((res: any) => res.list)
            })
    }
....
....

...and the template:

<div class="viewport" [style.height.px]="height" *ngIf="datasource">
    <div *uiScroll="let entry of datasource"
        [class.current-timepoint]="highlightMsg(entry)">
        <div app-log-message
            [columns]="columns"
            [highlight-text]="highlight"
            [entry]="entry" 
            [starred-hash-codes]="starredHashCodes" 
            [players]="players"
            [player-refreshed]="playerRefreshed"
            [layout-group]="layoutGroup"></div>
    </div>
    <app-loader *ngIf="datasource && datasource.adapter && datasource.adapter.isLoading"></app-loader>
</div>

[dhilt]

@dabcat Thanks, I will take o look.

[dhilt]

Closing this per further releases (1.0.0+) have fully refactored scroll engine. If the new version still has a problem, a new issue should be created.