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:13 UTC
[superset] branch examples-gallery created (now 61938b1)
This is an automated email from the ASF dual-hosted git repository.
suddjian pushed a change to branch examples-gallery
in repository https://gitbox.apache.org/repos/asf/superset.git.
at 61938b1 fix jpg webpack config
This branch includes the following new commits:
new 88cba8e feat(explore): add section for example images in viz type control
new 61938b1 fix jpg webpack config
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[superset] 02/02: fix jpg webpack config
Posted by su...@apache.org.
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 61938b1791899db78f1f259740ba78676cc6a9ea
Author: David Aaron Suddjian <aa...@gmail.com>
AuthorDate: Thu Jul 1 00:18:44 2021 -0700
fix jpg webpack config
---
superset-frontend/webpack.config.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js
index 2fafc3a..fa1b83d 100644
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@@ -384,7 +384,7 @@ const config = {
},
/* for css linking images (and viz plugin thumbnails) */
{
- test: /\.(png|jpg)$/,
+ test: /\.(png)$/,
issuer: {
exclude: /\/src\/assets\/staticPages\//,
},
@@ -395,7 +395,7 @@ const config = {
},
},
{
- test: /\.(png|jpg)$/,
+ test: /\.(png)$/,
issuer: {
test: /\/src\/assets\/staticPages\//,
},
[superset] 01/02: feat(explore): add section for example images in
viz type control
Posted by su...@apache.org.
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>