[Plugin] EXPLAIN/PROFILE Visualization #1537

GnaneshKunal · 2022-12-28T12:11:07Z

FT.EXPLAIN/FT.EXPLAINCLI visualization

FT.PROFILE

GRAPH.EXPLAIN

GRAPH.PROFILE

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx

redisinsight/ui/src/packages/ri-explain/src/Node.tsx

as well.

…plain commands

merge main

…-explain-plugin

src/Explain.tsx - Detect redisearch cluster profile and select the appropriate parser. src/parser.ts - Add redisearch cluster profile parsing and also track parentIds which can be used to add hover support later.

redisinsight/ui/src/packages/ri-explain/src/parser.ts

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx

redisinsight/ui/src/packages/ri-explain/src/Node.tsx

- Use "Records Produced" for graph

- Highlight time based on execution time

- Use outline instead of border to apply the box edge styling outside the box. - Add different profiling time for redisgraph PROFILE.

graph/search query.

rsergeenko · 2023-01-23T10:14:31Z

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

+          className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+          onClick={onDropDownViewClick}
+        >
+          {isOpen && profileOptions.length > 1 && canCommandProfile && !summaryText && (


can be profileOptions length less than 2?

Removed the check. profileOptions will always have 2 elements (PROFILE and EXPLAIN).

rsergeenko · 2023-01-23T10:15:18Z

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx

          activeResultsMode={activeResultsMode}
          resultsMode={resultsMode}
          onQueryOpen={() => onQueryOpen(id)}
+          onQueryProfile={(profileType: ProfileQueryType) => {


could you please move this to the separate function?

We are using a prop function of the component here. Are you suggesting we can define the function inside the component?

yes, just a function inside the component
smth like that:

const handleQueryProfile = (profileType: ProfileQueryType) => {} ... onQueryProfile={handleQueryProfile}

rsergeenko · 2023-01-23T10:18:10Z

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

+    }
+  })
+
+  const canCommandProfile = isCommandAllowedForProfile(query.split(' ')[0].toLowerCase())


I think it's better to move (' ')[0].toLowerCase() to the isCommandAllowedForProfile to not duplicate this everywhere in future
and it will be enough just use isCommandAllowedForProfile(query) in the condition below

rsergeenko · 2023-01-23T10:20:17Z

redisinsight/ui/src/pages/workbench/constants.ts

+
+const ALLOWED_PROFILE_COMMANDS = [...SEARCH_COMMANDS, ...GRAPH_COMMANDS]
+
+export function isCommandAllowedForProfile(cmd: string) {


we use arrow functions almost anywhere instead of function declaration , can you change it?
also, could you please add unit tests to each functions?

rsergeenko · 2023-01-23T10:20:56Z

redisinsight/ui/src/pages/workbench/utils.ts

+  }
+
+  return null
+}


please add unit tests for generateGraphProfileQuery, generateSearchProfileQuery, generateProfileQueryForCommand

rsergeenko · 2023-01-23T10:37:58Z

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

+        <div className={cx(styles.dropdownOption, styles.dropdownProfileOption)}>
+          <EuiIcon
+            className={styles.iconDropdownOption}
+            type={'visTagCloud'}


do not need {''} here just double quoutes

- Add unit tests for profile/explain commands generator - Use arrow functions

…same.

rsergeenko · 2023-01-23T14:07:09Z

redisinsight/ui/src/pages/workbench/constants.ts

-export function isCommandAllowedForProfile(cmd: string) {
-  return ALLOWED_PROFILE_COMMANDS.includes(cmd)
+export const isCommandAllowedForProfile = (query: string) => {
+  return ALLOWED_PROFILE_COMMANDS.includes(query.split(' ')[0].toLowerCase())


could you also add some check like
query?.split(' ')?.[0]?.toLowerCase() or query && ALLOWED_PROFILE_COMMANDS.includes(...) just to avoid some errors

rsergeenko · 2023-01-23T14:07:33Z

redisinsight/ui/src/pages/workbench/utils.spec.ts

+]
+
+describe('generateGraphProfileQuery', () => {
+


please, remove empty line

rsergeenko · 2023-01-23T14:07:42Z

redisinsight/ui/src/pages/workbench/utils.spec.ts

+]
+
+describe('generateSearchProfileQuery', () => {
+


rsergeenko · 2023-01-23T14:08:06Z

redisinsight/ui/src/pages/workbench/utils.ts


-function generateGraphProfileQuery(query: string, type: ProfileQueryType) {
-  return [`graph.${type}`, ...query.split(' ').slice(1)].join(' ')
+export function generateGraphProfileQuery(query: string, type: ProfileQueryType) {


could you also change here to arrow function?

rsergeenko · 2023-01-23T14:08:11Z

redisinsight/ui/src/pages/workbench/utils.ts

 }

-function generateSearchProfileQuery(query: string, type: ProfileQueryType) {
+export function generateSearchProfileQuery(query: string, type: ProfileQueryType) {


rsergeenko · 2023-01-23T14:10:13Z

redisinsight/ui/src/pages/workbench/utils.ts


-function generateSearchProfileQuery(query: string, type: ProfileQueryType) {
+export function generateSearchProfileQuery(query: string, type: ProfileQueryType) {
  const commandSplit = query.split(' ')


also, add checks to be sure that we cover null value of query

- #1537 (comment)

rsergeenko

looks good, please resolve conflict

rsergeenko

lgtm, changed target branch to feature/RI-3726_profile_explain
all bugfix please create from this branch (feature/RI-3726_profile_explain) with name starts fe/bugfix/RI-XXXX

we have pipelines to run tests from branches
fe/feature/** and fe/bugfix/** (will run FE tests)
feature/** (will run all tests after approve on circle ci)

This reverts commit fc31b41.

This reverts commit 58a0ccc.

Add draft implementation of FT.EXPLAIN/FT.EXPLAINCLI vizualization.

9045d09

GnaneshKunal requested a review from ViktarStarastsenka December 28, 2022 12:11

GnaneshKunal self-assigned this Dec 28, 2022

egor-zalenski reviewed Dec 29, 2022

View reviewed changes

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx Outdated Show resolved Hide resolved

redisinsight/ui/src/packages/ri-explain/src/Node.tsx Outdated Show resolved Hide resolved

redisinsight/ui/src/packages/ri-explain/src/Node.tsx Outdated Show resolved Hide resolved

GnaneshKunal added 4 commits December 29, 2022 20:04

Add support for ft.profile (plain version) and scrollbar functionality

2878b55

as well.

Add support for ft.profile (non-clustered version) visualization

3c92f20

Remove semicolons

57604ef

Center profile info

843df8a

GnaneshKunal marked this pull request as ready for review January 5, 2023 05:48

egor-zalenski and others added 8 commits January 5, 2023 14:06

Merge branch 'main' into ri-explain-plugin

96f48c9

#RI-3726 - Prepare for vizualizations for Graph and FT profile and ex…

26f7264

…plain commands

#RI-3726 - Prepare for vizualizations for Graph and FT profile and ex…

9e47c5c

…plain commands

Merge pull request #1560 from RedisInsight/main

3ea6c44

merge main

Merge remote-tracking branch 'origin/ri-explain-plugin' into build/ri…

4cf3ede

…-explain-plugin

Merge pull request #1561 from RedisInsight/build/ri-explain-plugin

154ac45

Add support for redisearch cluster profile.

405ac84

src/Explain.tsx - Detect redisearch cluster profile and select the appropriate parser. src/parser.ts - Add redisearch cluster profile parsing and also track parentIds which can be used to add hover support later.

Add support for GRAPH.EXPLAIN and GRAPH.PROFILE

398e6e8

github-advanced-security bot found potential problems Jan 8, 2023

View reviewed changes

redisinsight/ui/src/packages/ri-explain/src/parser.ts Fixed Show fixed Hide fixed

Dump regex for simple parsing of size and time

e135c33

egor-zalenski reviewed Jan 9, 2023

View reviewed changes

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx Outdated Show resolved Hide resolved

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx Outdated Show resolved Hide resolved

redisinsight/ui/src/packages/ri-explain/src/Node.tsx Outdated Show resolved Hide resolved

Remove semicolons and fix ternary operator lint

9d7d921

egor-zalenski previously approved these changes Jan 10, 2023

View reviewed changes

GnaneshKunal added 2 commits January 11, 2023 18:22

Add support for hovering for search queries

fd4e151

Add proper recursive redisgraph PROFILE/EXPLAIN level parser

7085375

GnaneshKunal dismissed egor-zalenski’s stale review via 7085375 January 14, 2023 02:04

GnaneshKunal added 4 commits January 14, 2023 09:07

- Suffix time with 'ms'

7569daf

- Use "Records Produced" for graph

- Edge width should depend on record size.

5b2b181

- Highlight time based on execution time

Highlight ancestors on child node hover

7c38d91

Calculate total execution time for redisgraph profile

4732c09

GnaneshKunal requested a review from egor-zalenski January 15, 2023 17:29

GnaneshKunal added 4 commits January 17, 2023 18:53

Parse tags and display them in snippet region if available

d8b3889

- Calculate edge size using log.

5d54e87

- Use outline instead of border to apply the box edge styling outside the box. - Add different profiling time for redisgraph PROFILE.

Merge branch 'main' into ri-explain-plugin

fae5e99

Add ability to run a profile/explain right from the query card tab of

3e20c4f

graph/search query.

rsergeenko reviewed Jan 23, 2023

View reviewed changes

GnaneshKunal added 2 commits January 23, 2023 19:24

Fix comments - #1537 (review)

fc31b41

- Add unit tests for profile/explain commands generator - Use arrow functions

- Move queryProfile to parent and create a new telement event on the …

f770a43

…same.

rsergeenko reviewed Jan 23, 2023

View reviewed changes

- Add null checks for generate profile command functions

9d2e65c

- #1537 (comment)

rsergeenko previously approved these changes Jan 24, 2023

View reviewed changes

Merge remote-tracking branch 'origin/main' into ri-explain-plugin

3904a0e

GnaneshKunal dismissed rsergeenko’s stale review via 3904a0e January 24, 2023 11:10

rsergeenko changed the base branch from main to feature/RI-3726_profile_explain January 24, 2023 11:14

rsergeenko approved these changes Jan 24, 2023

View reviewed changes

GnaneshKunal added 2 commits January 25, 2023 07:32

Switch back to compactBox layout

c05bdde

Wrap info data for large texts

eb75d62

GnaneshKunal merged commit 6355f4c into feature/RI-3726_profile_explain Jan 25, 2023

GnaneshKunal added a commit that referenced this pull request Jan 31, 2023

Revert "Fix comments - #1537 (review)"

58a0ccc

This reverts commit fc31b41.

GnaneshKunal added a commit that referenced this pull request Feb 6, 2023

Revert "Revert "Fix comments - #1537 (review)""

172fc39

This reverts commit 58a0ccc.

egor-zalenski deleted the ri-explain-plugin branch March 17, 2023 11:08


		const ALLOWED_PROFILE_COMMANDS = [...SEARCH_COMMANDS, ...GRAPH_COMMANDS]

		export function isCommandAllowedForProfile(cmd: string) {

		]

		describe('generateGraphProfileQuery', () => {

		]

		describe('generateSearchProfileQuery', () => {

[Plugin] EXPLAIN/PROFILE Visualization #1537

[Plugin] EXPLAIN/PROFILE Visualization #1537

Uh oh!

Conversation

GnaneshKunal commented Dec 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

FT.EXPLAIN/FT.EXPLAINCLI visualization

FT.PROFILE

GRAPH.EXPLAIN

GRAPH.PROFILE

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rsergeenko left a comment

Choose a reason for hiding this comment

Uh oh!

rsergeenko left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

GnaneshKunal commented Dec 28, 2022 •

edited

Loading

rsergeenko left a comment •

edited

Loading