allow dynamic height for slice picker cell

apache · Jun 14, 2018 · 0ea8bf4 · 0ea8bf4
1 parent f4428c3
commit 0ea8bf4
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -76,7 +76,6 @@
     .chart-card {
       border: 1px solid @gray-light;
       font-weight: 200;
-      height: 120px;
       padding: 16px;
       margin: 16px;
       position: relative;
@@ -97,8 +96,6 @@
       flex-direction: column;
 
       .item {
-        height: 18px;
-
         span:first-child {
           font-weight: 400;
         }
@@ -118,7 +115,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
@@ -92,7 +92,7 @@ function getChartHolder(item) {
     if (code) {
       markdownContent = code;
     } else if (slice_name.trim()) {
-      markdownContent = `##### **${slice_name}**\n`;
+      markdownContent = `##### ${slice_name}`;
     }
 
     return {

diff --git a/superset/models/core.py b/superset/models/core.py
@@ -188,6 +188,7 @@ def data(self):
             '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
@@ -280,7 +280,7 @@ def changed_on_(self):
         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))