Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix: ExecutedQueryCell auto scropll to top during execution #1033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Oct 6, 2022
Merged

fix: ExecutedQueryCell auto scropll to top during execution #1033

merged 1 commit into from
Oct 6, 2022

Conversation

jczhong84
Copy link
Collaborator

@jczhong84 jczhong84 commented Oct 6, 2022 •
edited
Loading

Issue:
the scroll bar in the "show query" window keeps resetting to its top position when the query is actively running.

Cause:
Although we used useMemo for ThemedCodeHighlightWithMark's prop highlightRanges, but it depends on highlightRange, which will be recreated every time when passed from its parent, which leads to re-render

                queryExecution={queryExecution}
                highlightRange={
                    statementExecution && {
                        from: statementExecution.statement_range_start,
                        to: statementExecution.statement_range_end,
                    }
                }
                changeCellContext={changeCellContext}
            />

Another option tried is to memoize this highlightRange on its parent component

const highlightRange = useMemo(()=>statementExecution && {
                        from: statementExecution.statement_range_start,
                        to: statementExecution.statement_range_end,
                    }, [statementExecution])

but the problem is this statementExecution will change every time as it gets from below selector, which has a map operator to create a new object every time.

    createSelector(
        queryExecutionSelector,
        (state) => state.queryExecutions.statementExecutionById,
        (queryExecution, statementExecutionById) =>
            queryExecution?.statement_executions?.map(
                (id) => statementExecutionById[id]
            ) ?? []
    );

Fix
So in the end, we'd like to do a deep compare for highlightRange in ExecutedQueryCell.tsx to fix it.

@czgu czgu merged commit 011bb92 into pinterest:master Oct 6, 2022
czgu added a commit that referenced this pull request Oct 24, 2022
@meowcodes @jczhong84
@baumandm @czgu
fix: rebase (#1059)
e5bee25 
* fix: disable json parsing by default (#1025)

* fix: schedule owner not update (#1027)

* fix: Replace cronjs-matcher with cron-parser (#1028)

* fix: disable autocomplete for exact matches (#1029)

* fix: Increase CodeMirror hint z-index above modals (#1030)

Fixes the QueryEditor's autocomplete on the Snippet editor modal, which has a z-index of 300.

* fix: table column auto completion not work sometimes (#1026)

* fix: table column auto comletion not work sometimes

* prefetch all tables

* remove unused imports

* use getTableByName

* add back table warning annotations

* remove return await

* ignore table not exist warnings

* use await

* feat: add formatted transpile view (#1031)

* fix: ExecutedQueryCell auto scropll to top during execution (#1033)

* refactor: QueryEditor to functional component (#1032)

* refactor: QueryEditor to functional component

* update format options type

* fix linter warnings

* useMemo

* docs: add instruction on init_db (#1034)

* docs: add instruction on init_db

* comment

* fix: query editor issues after refactor (#1035)

* feat: Add syntax highlight/copy to markdown code (#1039)

* feat: Add syntax highlight/copy to markdown code

* remove extra space

* add jinja2, python, sh support to templating

* feat: syntax highlighting for templated queries (#1040)

* feat: syntax highlighting for templated queries

* remove comment

* fix test

* fix: codemirror starts with a wrong height (#1041)

* fix: formatQuery isn't using the latest ref (#1042)

* ui: keep the search string when switching the search type (#1043)

* ui: keep the search string when switching the search type

* comment

* fix: QueryComposer additional buttons nested right (#1044)

Fixes issues with the Transpile Query submenu appearing under the sidebar

* fix: template variable type change and big numbers (#1046)

* fix: variable type change

* show error for big numbers

* remove unused vars

* move to helper.ts

* fix: Update Google OAuth Version (#1057)

* test: dummy PR to test if pytest pass

* test

* update workflow

* bump version to latest

* fix test

* bump version

* added space back

* feat: dag exporter ui update (#1024)

* feat: dag exporter ui update

* update yarn.lock

* address comments

* feat: update base and demo dag exporter (#1038)

* feat: add query engine validation for dag exporter (#1045)

#1045

* Revert "rebase master onto dag-v2 (#1047)" (#1049)

This reverts commit 792376e.

* address comments from PR 1045 (#1051)

* address comments of PR 1045

* add type

* nullable

* ui: update dag exporter (#1050)

#1050

* Revert "ui: update dag exporter (#1050)" (#1055)

This reverts commit 793c08b.

* ui update

#1056

Co-authored-by: J.C. Zhong <[email protected]>
Co-authored-by: Dave Bauman <[email protected]>
Co-authored-by: czgu <[email protected]>
Co-authored-by: J.C. Zhong <[email protected]>
@jczhong84 jczhong84 deleted the fix/scroll branch January 19, 2023 04:39
lilyli9 pushed a commit to lilyli9/querybook that referenced this pull request Jan 26, 2023
chore(release): 0.30.0 [skip ci]
54c8860 
## [0.30.0](https://github.expedia.biz/eg-analytics-platform/querybook/compare/0.29.1...0.30.0) (2022-10-18)

### Features

* add formatted transpile view (pinterest#1031) ([b5120ed](https://github.expedia.biz/eg-analytics-platform/querybook/commit/b5120edb82250c71a9f1a2bf9ff0663da462d93a))
* Add syntax highlight/copy to markdown code (pinterest#1039) ([c78fd7f](https://github.expedia.biz/eg-analytics-platform/querybook/commit/c78fd7f18d93ce753665426ec4e92fe149a2d147))
* Merge branch 'upstream' ([c84b843](https://github.expedia.biz/eg-analytics-platform/querybook/commit/c84b843d17103993c67b483be6a3a2cb4ecce7e1))
* syntax highlighting for templated queries (pinterest#1040) ([12346ea](https://github.expedia.biz/eg-analytics-platform/querybook/commit/12346ea0ed93e5f9890ee5e453eacf9690f0eaa6))

### Bug Fixes

* codemirror starts with a wrong height (pinterest#1041) ([a2d7463](https://github.expedia.biz/eg-analytics-platform/querybook/commit/a2d746364478016badc769be470da8d556fb8dd8))
* ExecutedQueryCell auto scropll to top during execution (pinterest#1033) ([011bb92](https://github.expedia.biz/eg-analytics-platform/querybook/commit/011bb92435dd6d59a85afb57041fecbdd548f096))
* formatQuery isn't using the latest ref (pinterest#1042) ([7f02f09](https://github.expedia.biz/eg-analytics-platform/querybook/commit/7f02f0993cfba4756731e559d3b4fddd0204043f))
* query editor issues after refactor (pinterest#1035) ([3faf4bb](https://github.expedia.biz/eg-analytics-platform/querybook/commit/3faf4bb7e588b6ed76c5aa1eafaf9f81827859fd))
* table column auto completion not work sometimes (pinterest#1026) ([72bd343](https://github.expedia.biz/eg-analytics-platform/querybook/commit/72bd343dd5b39fee8fa4d093069d839167539b9f))
rohan-sh1 pushed a commit to CAI-TECHNOLOGIES/cai-ext-db-explorer that referenced this pull request Feb 28, 2023
@jczhong84
fix: ExecutedQueryCell auto scropll to top during execution (pinteres…
f0d98a5 
…t#1033)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@czgu czgu czgu approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jczhong84 @czgu