chore(explore): Visual updates to explore datasource panel #20317

lyndsiWilliams · 2022-06-08T18:47:21Z

SUMMARY

Made the following visual updates to the explore datasource panel:

Changed "Dataset" to "Chart Source"
- Increased font size to 14px
Removed "More dataset related options" tooltip
Moved inner collapse icon to the right by 8px
Removed outer dataset icon when panel is collapsed
Changed icon to ConsoleSqlOutlined when chart source is a Query
User sees beginning of SQL query when chart source is a Query

SCREENSHOTS

When chart source is a Query:

When chart source is not a Query:

Collapsed panel (no longer has an icon):

TESTING INSTRUCTIONS

Go to explore by opening any chart
Observe the visual updates

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

lyndsiWilliams · 2022-06-08T19:10:06Z

/testenv up

github-actions · 2022-06-08T19:10:49Z

@lyndsiWilliams Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2022-06-08T19:10:50Z

@lyndsiWilliams Ephemeral environment creation failed. Please check the Actions logs for details.

lyndsiWilliams · 2022-06-08T19:24:17Z

/testenv up

github-actions · 2022-06-08T19:26:28Z

@lyndsiWilliams Ephemeral environment spinning up at http://34.220.2.187:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

codecov · 2022-06-08T19:55:37Z

Codecov Report

Merging #20317 (6fab57f) into master (d3670f1) will decrease coverage by 0.01%.
The diff coverage is 25.00%.

❗ Current head 6fab57f differs from pull request most recent head 31dfdd2. Consider uploading reports for the commit 31dfdd2 to get more accurate results

@@            Coverage Diff             @@
##           master   #20317      +/-   ##
==========================================
- Coverage   66.61%   66.59%   -0.02%     
==========================================
  Files        1733     1734       +1     
  Lines       64953    64998      +45     
  Branches     6858     6873      +15     
==========================================
+ Hits        43268    43287      +19     
- Misses      19929    19952      +23     
- Partials     1756     1759       +3

Flag	Coverage Δ
javascript	`51.50% <25.00%> (-0.02%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
.../explore/components/ExploreViewContainer/index.jsx	`52.84% <ø> (ø)`
...re/components/controls/DatasourceControl/index.jsx	`72.09% <0.00%> (-0.75%)`	⬇️
...d/src/explore/components/DatasourcePanel/index.tsx	`69.33% <100.00%> (-0.41%)`	⬇️
...gin-chart-echarts/src/Timeseries/transformProps.ts	`54.76% <0.00%> (-3.58%)`	⬇️
...d/plugins/plugin-chart-echarts/src/utils/series.ts	`84.40% <0.00%> (-3.10%)`	⬇️
...lugin-chart-echarts/src/Timeseries/transformers.ts	`50.00% <0.00%> (-0.40%)`	⬇️
...ashboard/components/gridComponents/ChartHolder.jsx	`57.77% <0.00%> (-0.18%)`	⬇️
...perset-frontend/src/dashboard/containers/Chart.jsx	`75.00% <0.00%> (ø)`
...et-frontend/src/components/Chart/ChartRenderer.jsx	`54.23% <0.00%> (ø)`
...frontend/plugins/plugin-chart-echarts/src/types.ts	`100.00% <0.00%> (ø)`
... and 11 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d3670f1...31dfdd2. Read the comment docs.

pkdotson · 2022-06-08T20:41:00Z

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

+          )}
+          {isValidDatasourceType ? (
+            /* Add a tooltip only for long dataset names */
+            !isMissingDatasource && datasource.sql.length > 25 ? (


curious here why datasource.sql.length have to be greater than 25?

This was how it was initially set, I just added the query route. I'm also not sure why 25 haha. It's for long dataset names to get a tooltip.

can we make this value a constant then?

hughhhh · 2022-06-08T21:53:32Z

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

+          ) : (
+            <Icons.DatasetPhysical className="datasource-svg" />
+          )}
+          {isValidDatasourceType ? (


we need to check if the datasource.type is DatasourceType.Query here, if so then show the image in sql as the name

I changed this to be a strict check for just Query in this commit 😁

zhaoyongjie · 2022-06-09T10:24:21Z

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -327,7 +321,7 @@ export default function DataSourcePanel({
          placeholder={t('Search Metrics & Columns')}
        />
        <div className="field-selections">
-          {isValidDatasourceType && showInfoboxCheck() && (
+          {datasource.type === DatasourceType.Query && showInfoboxCheck() && (


I have added a type guard at here. We can define more type guard to handle different type of datasources.

zhaoyongjie · 2022-06-09T10:25:14Z

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

-          <Icons.DatasetPhysical className="dataset-svg" />
-          {/* Add a tooltip only for long dataset names */}
-          {!isMissingDatasource && datasource.name.length > 25 ? (
+          {datasource.type === DatasourceType.Query ? (


same before

…pes from DatasourceTypes options

eschutho · 2022-08-01T19:57:37Z

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

-    datasource.type === DatasourceType.SlTable ||
-    datasource.type === DatasourceType.SavedQuery ||
-    datasource.type === DatasourceType.Query;
+  const dataSourceIsQuery = datasource?.type === DatasourceType.Query;


can we duck type this instead?

lyndsiWilliams · 2022-08-02T00:09:01Z

This got copied into this feature branch: #20281

github-actions · 2022-08-02T00:09:23Z

Ephemeral environment shutdown and build artifacts deleted.

Visual updates to explore datasource panel

bd3b6a9

superset-github-bot bot added the preset-io label Jun 8, 2022

pull-request-size bot added the size/M label Jun 8, 2022

superset-github-bot bot added the Superset-Community-Partners Preset community partner program participants label Jun 8, 2022

lyndsiWilliams removed the Superset-Community-Partners Preset community partner program participants label Jun 8, 2022

Temporarily make Query icon visible

64f4181

Remove Query icon visibility

7c07534

pkdotson reviewed Jun 8, 2022

View reviewed changes

Removed isValidDatasourceType check

6fab57f

hughhhh reviewed Jun 8, 2022

View reviewed changes

zhaoyongjie reviewed Jun 9, 2022

View reviewed changes

Adjusts conditional logic approach to be extensible for additional ty…

31dfdd2

…pes from DatasourceTypes options

pull-request-size bot added size/L and removed size/M labels Jun 13, 2022

eschutho reviewed Aug 1, 2022

View reviewed changes

lyndsiWilliams closed this Aug 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(explore): Visual updates to explore datasource panel #20317

chore(explore): Visual updates to explore datasource panel #20317

lyndsiWilliams commented Jun 8, 2022

lyndsiWilliams commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

lyndsiWilliams commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

codecov bot commented Jun 8, 2022 •

edited

Loading

pkdotson Jun 8, 2022

lyndsiWilliams Jun 8, 2022 •

edited

Loading

eschutho Jun 10, 2022

hughhhh Jun 8, 2022 •

edited

Loading

lyndsiWilliams Jun 8, 2022

zhaoyongjie Jun 9, 2022

zhaoyongjie Jun 9, 2022

eschutho Aug 1, 2022

lyndsiWilliams commented Aug 2, 2022

github-actions bot commented Aug 2, 2022

chore(explore): Visual updates to explore datasource panel #20317

chore(explore): Visual updates to explore datasource panel #20317

Conversation

lyndsiWilliams commented Jun 8, 2022

SUMMARY

SCREENSHOTS

When chart source is a Query:

When chart source is not a Query:

Collapsed panel (no longer has an icon):

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

lyndsiWilliams commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

lyndsiWilliams commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

codecov bot commented Jun 8, 2022 • edited Loading

Codecov Report

pkdotson Jun 8, 2022

Choose a reason for hiding this comment

lyndsiWilliams Jun 8, 2022 • edited Loading

Choose a reason for hiding this comment

eschutho Jun 10, 2022

Choose a reason for hiding this comment

hughhhh Jun 8, 2022 • edited Loading

Choose a reason for hiding this comment

lyndsiWilliams Jun 8, 2022

Choose a reason for hiding this comment

zhaoyongjie Jun 9, 2022

Choose a reason for hiding this comment

zhaoyongjie Jun 9, 2022

Choose a reason for hiding this comment

eschutho Aug 1, 2022

Choose a reason for hiding this comment

lyndsiWilliams commented Aug 2, 2022

github-actions bot commented Aug 2, 2022

codecov bot commented Jun 8, 2022 •

edited

Loading

lyndsiWilliams Jun 8, 2022 •

edited

Loading

hughhhh Jun 8, 2022 •

edited

Loading