superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] 22/26: [dash builder fix] combine markdown and slice name, slice picker height (#5165)
Date Fri, 22 Jun 2018 00:54:37 GMT
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 <grace.guo@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))


Mime
View raw message