From daf21169ca31da93935feb034f3401a44648c645 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Fri, 27 Jul 2018 11:59:32 -0700
Subject: [PATCH] set default layout for new added charts (#5425)

---
 .../src/dashboard/reducers/getInitialState.js | 28 ++++++++++++++-----
 .../assets/src/dashboard/util/constants.js    |  1 +
 .../src/dashboard/util/newComponentFactory.js | 15 +++++++---
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/superset/assets/src/dashboard/reducers/getInitialState.js
index 0c121d3071..e913adbf89 100644
--- a/superset/assets/src/dashboard/reducers/getInitialState.js
+++ b/superset/assets/src/dashboard/reducers/getInitialState.js
@@ -9,7 +9,11 @@ import { getColorFromScheme } from '../../modules/colors';
 import findFirstParentContainerId from '../util/findFirstParentContainer';
 import getEmptyLayout from '../util/getEmptyLayout';
 import newComponentFactory from '../util/newComponentFactory';
-import { DASHBOARD_HEADER_ID } from '../util/constants';
+import {
+  DASHBOARD_HEADER_ID,
+  GRID_DEFAULT_CHART_WIDTH,
+  GRID_COLUMN_COUNT,
+} from '../util/constants';
 import {
   DASHBOARD_HEADER_TYPE,
   CHART_TYPE,
@@ -55,6 +59,10 @@ export default function(bootstrapData) {
 
   // find root level chart container node for newly-added slices
   const parentId = findFirstParentContainerId(layout);
+  const parent = layout[parentId];
+  let newSlicesContainer;
+  let newSlicesContainerWidth = 0;
+
   const chartQueries = {};
   const slices = {};
   const sliceIds = new Set();
@@ -84,20 +92,26 @@ export default function(bootstrapData) {
 
       sliceIds.add(key);
 
-      // if chart is newly added from explore view, add a row in layout
+      // if there are newly added slices from explore view, fill slices into 1 or more rows
       if (!chartIdToLayoutId[key] && layout[parentId]) {
-        const parent = layout[parentId];
-        const rowContainer = newComponentFactory(ROW_TYPE);
-        layout[rowContainer.id] = rowContainer;
-        parent.children.push(rowContainer.id);
+        if (
+          newSlicesContainerWidth === 0 ||
+          newSlicesContainerWidth + GRID_DEFAULT_CHART_WIDTH > GRID_COLUMN_COUNT
+        ) {
+          newSlicesContainer = newComponentFactory(ROW_TYPE);
+          layout[newSlicesContainer.id] = newSlicesContainer;
+          parent.children.push(newSlicesContainer.id);
+          newSlicesContainerWidth = 0;
+        }
 
         const chartHolder = newComponentFactory(CHART_TYPE, {
           chartId: slice.slice_id,
         });
 
         layout[chartHolder.id] = chartHolder;
-        rowContainer.children.push(chartHolder.id);
+        newSlicesContainer.children.push(chartHolder.id);
         chartIdToLayoutId[chartHolder.meta.chartId] = chartHolder.id;
+        newSlicesContainerWidth += GRID_DEFAULT_CHART_WIDTH;
       }
     }
 
diff --git a/superset/assets/src/dashboard/util/constants.js b/superset/assets/src/dashboard/util/constants.js
index 09d72448d0..4fd5e400ec 100644
--- a/superset/assets/src/dashboard/util/constants.js
+++ b/superset/assets/src/dashboard/util/constants.js
@@ -23,6 +23,7 @@ export const GRID_MIN_COLUMN_COUNT = 1;
 export const GRID_MIN_ROW_UNITS = 5;
 export const GRID_MAX_ROW_UNITS = 100;
 export const GRID_MIN_ROW_HEIGHT = GRID_GUTTER_SIZE;
+export const GRID_DEFAULT_CHART_WIDTH = 4;
 
 // Header types
 export const SMALL_HEADER = 'SMALL_HEADER';
diff --git a/superset/assets/src/dashboard/util/newComponentFactory.js b/superset/assets/src/dashboard/util/newComponentFactory.js
index 8d259afa4b..18b433b013 100644
--- a/superset/assets/src/dashboard/util/newComponentFactory.js
+++ b/superset/assets/src/dashboard/util/newComponentFactory.js
@@ -11,18 +11,25 @@ import {
   TAB_TYPE,
 } from './componentTypes';
 
-import { MEDIUM_HEADER, BACKGROUND_TRANSPARENT } from './constants';
+import {
+  MEDIUM_HEADER,
+  BACKGROUND_TRANSPARENT,
+  GRID_DEFAULT_CHART_WIDTH,
+} from './constants';
 
 const typeToDefaultMetaData = {
-  [CHART_TYPE]: { width: 3, height: 30 },
-  [COLUMN_TYPE]: { width: 3, background: BACKGROUND_TRANSPARENT },
+  [CHART_TYPE]: { width: GRID_DEFAULT_CHART_WIDTH, height: 50 },
+  [COLUMN_TYPE]: {
+    width: GRID_DEFAULT_CHART_WIDTH,
+    background: BACKGROUND_TRANSPARENT,
+  },
   [DIVIDER_TYPE]: null,
   [HEADER_TYPE]: {
     text: 'New header',
     headerSize: MEDIUM_HEADER,
     background: BACKGROUND_TRANSPARENT,
   },
-  [MARKDOWN_TYPE]: { width: 3, height: 30 },
+  [MARKDOWN_TYPE]: { width: GRID_DEFAULT_CHART_WIDTH, height: 50 },
   [ROW_TYPE]: { background: BACKGROUND_TRANSPARENT },
   [TABS_TYPE]: null,
   [TAB_TYPE]: { text: 'New Tab' },