You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by su...@apache.org on 2021/07/01 07:20:14 UTC
[superset] 01/02: feat(explore): add section for example images in
viz type control
This is an automated email from the ASF dual-hosted git repository.
suddjian pushed a commit to branch examples-gallery
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 88cba8e823abd1bcf3a31eed14f15c8dd16ae1a1
Author: David Aaron Suddjian <aa...@gmail.com>
AuthorDate: Thu Jul 1 00:18:02 2021 -0700
feat(explore): add section for example images in viz type control
---
.../components/controls/VizTypeControl/index.tsx | 52 ++++++++++++++++++++--
1 file changed, 48 insertions(+), 4 deletions(-)
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
index f8a0d52..6c98695 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
@@ -123,6 +123,8 @@ const DEFAULT_ORDER = [
const typesWithDefaultOrder = new Set(DEFAULT_ORDER);
+const THUMBNAIL_GRID_UNITS = 24;
+
export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
function VizSupportValidation({ vizType }: { vizType: string }) {
@@ -223,20 +225,39 @@ const DetailsPane = styled.div`
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
padding: ${({ theme }) => theme.gridUnit * 4}px;
display: grid;
+ grid-template-columns: 50% 50%;
grid-template-rows: auto 1fr;
- overflow: hidden;
+ grid-template-areas:
+ 'viz-name examples-header'
+ 'description examples';
`;
// overflow hidden on the details pane and overflow auto on the description
// (plus grid layout) enables the description to scroll while the header stays in place.
const Description = styled.p`
+ grid-area: description;
+ overflow: auto;
+`;
+
+const Examples = styled.div`
+ grid-area: examples;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
overflow: auto;
+ gap: ${({ theme }) => theme.gridUnit * 4}px;
+
+ img {
+ height: 100%;
+ border-radius: ${({ theme }) => theme.gridUnit}px;
+ border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ }
`;
const thumbnailContainerCss = (theme: SupersetTheme) => css`
cursor: pointer;
- width: ${theme.gridUnit * 24}px;
+ width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
margin: ${theme.gridUnit * 2}px;
img {
@@ -436,7 +457,8 @@ const VizTypeControl = (props: VizTypeControlProps) => {
const labelContent =
mountedPluginMetadata[initialValue]?.name || `${initialValue}`;
- const selectedVizMetadata = mountedPluginMetadata[selectedViz];
+ const selectedVizMetadata: ChartMetadata | undefined =
+ mountedPluginMetadata[selectedViz];
const vizEntriesToDisplay = isSearching
? searchResults
@@ -512,11 +534,33 @@ const VizTypeControl = (props: VizTypeControlProps) => {
/>
<DetailsPane>
- <SectionTitle>{selectedVizMetadata?.name}</SectionTitle>
+ <SectionTitle
+ css={css`
+ grid-area: viz-name;
+ `}
+ >
+ {selectedVizMetadata?.name}
+ </SectionTitle>
<Description>
{selectedVizMetadata?.description ||
t('No description available.')}
</Description>
+ <SectionTitle
+ css={css`
+ grid-area: examples-header;
+ `}
+ >
+ {!!selectedVizMetadata?.exampleGallery?.length && t('Examples')}
+ </SectionTitle>
+ <Examples>
+ {(selectedVizMetadata?.exampleGallery || []).map(example => (
+ <img
+ src={example.url}
+ alt={example.caption}
+ title={example.caption}
+ />
+ ))}
+ </Examples>
</DetailsPane>
</VizPickerLayout>
</UnpaddedModal>