You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/06/22 00:54:37 UTC
[incubator-superset] 22/26: [dash builder fix] combine markdown and
slice name, slice picker height (#5165)
This is an automated email from the ASF dual-hosted git repository.
ccwilliams pushed a commit to branch dashboard-builder
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 086034199843c927be621bc7f9461922cb2c71f0
Author: Grace Guo <gr...@airbnb.com>
AuthorDate: Fri Jun 15 11:10:01 2018 -0700
[dash builder fix] combine markdown and slice name, slice picker height (#5165)
* combine markdown code and markdown slice name
* allow dynamic height for slice picker cell
* add word break for long datasource name
---
.../assets/src/dashboard/actions/sliceEntities.js | 4 +-
.../assets/src/dashboard/components/SliceAdder.jsx | 44 +++++++++++++++-------
.../src/dashboard/reducers/getInitialState.js | 1 +
.../dashboard/stylesheets/builder-sidepane.less | 11 +++---
.../src/dashboard/util/dashboardLayoutConverter.js | 10 ++---
superset/models/core.py | 1 +
superset/models/helpers.py | 2 +-
7 files changed, 47 insertions(+), 26 deletions(-)
diff --git a/superset/assets/src/dashboard/actions/sliceEntities.js b/superset/assets/src/dashboard/actions/sliceEntities.js
index b635ea0..516a514 100644
--- a/superset/assets/src/dashboard/actions/sliceEntities.js
+++ b/superset/assets/src/dashboard/actions/sliceEntities.js
@@ -56,7 +56,9 @@ export function fetchAllSlices(userId) {
description: slice.description,
description_markdown: slice.description_markeddown,
viz_type: slice.viz_type,
- modified: slice.modified,
+ modified: slice.modified
+ ? slice.modified.replace(/<[^>]*>/g, '')
+ : '',
};
}
});
diff --git a/superset/assets/src/dashboard/components/SliceAdder.jsx b/superset/assets/src/dashboard/components/SliceAdder.jsx
index 9e68278..ed652c0 100644
--- a/superset/assets/src/dashboard/components/SliceAdder.jsx
+++ b/superset/assets/src/dashboard/components/SliceAdder.jsx
@@ -2,7 +2,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { DropdownButton, MenuItem } from 'react-bootstrap';
-import { List } from 'react-virtualized';
+import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
import SearchInput, { createFilter } from 'react-search-input';
import AddSliceCard from './AddSliceCard';
@@ -42,6 +42,12 @@ const KEYS_TO_SORT = [
const MARGIN_BOTTOM = 16;
const SIDEPANE_HEADER_HEIGHT = 55;
const SLICE_ADDER_CONTROL_HEIGHT = 64;
+const DEFAULT_CELL_HEIGHT = 136;
+
+const cache = new CellMeasurerCache({
+ defaultHeight: DEFAULT_CELL_HEIGHT,
+ fixedWidth: true,
+});
class SliceAdder extends React.Component {
static sortByComparator(attr) {
@@ -133,7 +139,7 @@ class SliceAdder extends React.Component {
});
}
- rowRenderer({ key, index, style }) {
+ rowRenderer({ key, index, style, parent }) {
const { filteredSlices, selectedSliceIdsSet } = this.state;
const cellData = filteredSlices[index];
const isSelected = selectedSliceIdsSet.has(cellData.slice_id);
@@ -160,19 +166,28 @@ class SliceAdder extends React.Component {
// we must use a custom drag preview within the List because
// it does not seem to work within a fixed-position container
useEmptyDragPreview
+ // List library expect style props here
+ // actual style should be applied to nested AddSliceCard component
+ style={{}}
>
{({ dragSourceRef }) => (
- <AddSliceCard
- innerRef={dragSourceRef}
- style={style}
- sliceName={cellData.slice_name}
- lastModified={
- cellData.modified ? cellData.modified.replace(/<[^>]*>/g, '') : ''
- }
- visType={cellData.viz_type}
- datasourceLink={cellData.datasource_link}
- isSelected={isSelected}
- />
+ <CellMeasurer
+ cache={cache}
+ columnIndex={0}
+ key={key}
+ parent={parent}
+ rowIndex={index}
+ >
+ <AddSliceCard
+ innerRef={dragSourceRef}
+ style={style}
+ sliceName={cellData.slice_name}
+ lastModified={cellData.modified}
+ visType={cellData.viz_type}
+ datasourceLink={cellData.datasource_link}
+ isSelected={isSelected}
+ />
+ </CellMeasurer>
)}
</DragDroppable>
);
@@ -223,7 +238,8 @@ class SliceAdder extends React.Component {
width={376}
height={slicesListHeight}
rowCount={this.state.filteredSlices.length}
- rowHeight={136}
+ deferredMeasurementCache={cache}
+ rowHeight={cache.rowHeight}
rowRenderer={this.rowRenderer}
searchTerm={this.state.searchTerm}
sortBy={this.state.sortBy}
diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/superset/assets/src/dashboard/reducers/getInitialState.js
index 7378c7b..e1cb6ba 100644
--- a/superset/assets/src/dashboard/reducers/getInitialState.js
+++ b/superset/assets/src/dashboard/reducers/getInitialState.js
@@ -93,6 +93,7 @@ export default function(bootstrapData) {
datasource: slice.form_data.datasource,
description: slice.description,
description_markeddown: slice.description_markeddown,
+ modified: slice.modified ? slice.modified.replace(/<[^>]*>/g, '') : '',
};
sliceIds.add(key);
diff --git a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
index bbcb7e1..6250243 100644
--- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
+++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
@@ -76,7 +76,6 @@
.chart-card {
border: 1px solid @gray-light;
font-weight: 200;
- height: 120px;
padding: 16px;
margin: 16px;
position: relative;
@@ -88,6 +87,7 @@
}
.card-title {
+ margin-right: 60px;
margin-bottom: 8px;
font-weight: 800;
}
@@ -97,10 +97,12 @@
flex-direction: column;
.item {
- height: 18px;
+ span {
+ word-break: break-all;
- span:first-child {
- font-weight: 400;
+ &:first-child {
+ font-weight: 400;
+ }
}
}
}
@@ -118,7 +120,6 @@
text-transform: uppercase;
position: absolute;
padding: 4px 8px;
- position: absolute;
top: 32px;
right: 32px;
pointer-events: none;
diff --git a/superset/assets/src/dashboard/util/dashboardLayoutConverter.js b/superset/assets/src/dashboard/util/dashboardLayoutConverter.js
index c6c124b..c1d855c 100644
--- a/superset/assets/src/dashboard/util/dashboardLayoutConverter.js
+++ b/superset/assets/src/dashboard/util/dashboardLayoutConverter.js
@@ -88,13 +88,13 @@ function getChartHolder(item) {
Math.round(size_y / GRID_RATIO * 100 / ROW_HEIGHT),
);
if (code !== undefined) {
- let markdownContent = '';
- if (slice_name) {
- markdownContent = `##### **${slice_name}**\n`;
- }
+ let markdownContent = ' '; // white-space markdown
if (code) {
- markdownContent += code;
+ markdownContent = code;
+ } else if (slice_name.trim()) {
+ markdownContent = `##### ${slice_name}`;
}
+
return {
type: MARKDOWN_TYPE,
id: `DASHBOARD_MARKDOWN_TYPE-${generateId()}`,
diff --git a/superset/models/core.py b/superset/models/core.py
index faf0a6f..02109e7 100644
--- a/superset/models/core.py
+++ b/superset/models/core.py
@@ -189,6 +189,7 @@ class Slice(Model, AuditMixinNullable, ImportMixin):
'slice_id': self.id,
'slice_name': self.slice_name,
'slice_url': self.slice_url,
+ 'modified': self.modified(),
}
@property
diff --git a/superset/models/helpers.py b/superset/models/helpers.py
index dd2a13b..4b2976a 100644
--- a/superset/models/helpers.py
+++ b/superset/models/helpers.py
@@ -280,7 +280,7 @@ class AuditMixinNullable(AuditMixin):
return Markup(
'<span class="no-wrap">{}</span>'.format(self.changed_on))
- @renders('changed_on')
+ @renders('modified')
def modified(self):
s = humanize.naturaltime(datetime.now() - self.changed_on)
return Markup('<span class="no-wrap">{}</span>'.format(s))