Merge pull request #138 from sharmalab/split-grid

Split grid

README.md

@@ -19,7 +19,7 @@ Build ./dist for use with a static web server by running `npm run build`
 
 To run code style checks, run `npm run lint` or to also try to automatically fix some issues, run `npm run lint:fix`.
 
-To run unit and functional tests (also run automatically [using github actions](.github/workflows/smoke_test.yml), run `npm run test` which runs the tests in [this folder](./tests).
+To run unit and functional tests, which are also run automatically [using github actions](.github/workflows/jest_tests.yml), run `npm run test` which runs the tests in [this folder](./tests).
 
 
 # Setup and Configuration
@@ -110,6 +110,22 @@ Each Eaglescope dashboard needs a configuration url which contains global inform
    <td>“csv” or “json”
    </td>
   </tr>
+  <tr>
+   <td>LAYOUT
+   </td>
+   <td>If set, split visualizations with a matching "designation" will be put in a special row/column on top/left.
+   </td>
+   <td>"left", or "top": default behavior is no split.
+   </td>
+  </tr>
+  <tr>
+   <td>LAYOUT_SIZE
+   </td>
+   <td>When LAYOUT is set, the size of the top/left section across that dimension.
+   </td>
+   <td>css-like string; default is "300px"
+   </td>
+  </tr>
 </table>
 
 
@@ -182,6 +198,14 @@ Additionally, the field “VISUALIZATION_VIEW_CONFIGURATION” contains a list o
    <td>42
    </td>
   </tr>
+  <tr>
+   <td>designation
+   </td>
+   <td>When LAYOUT is set to split, set to "left" or "top" to put in the non-default area; don't set to leave in the main area. Do not mismatch left and top across LAYOUT and designation, or affected charts not render at all.
+   </td>
+   <td>left
+   </td>
+  </tr>
 </table>
 
 ## Visualization Types

config/wines.json

@@ -8,6 +8,7 @@
   "HAS_SETTINGS" : "Anything trurthy is true for these boolean fields, including FALSE.",
   "DATA_RESOURCE_URL": "./config/wines.csv",
   "DATA_FORMAT": "csv",
+  "LAYOUT": "left",
   "VISUALIZATION_VIEW_CONFIGURATION": [
     {
       "id": "type",
@@ -16,7 +17,8 @@
       "chartType": "PIE_CHART",
       "fields": { "x": "wine_type" },
       "size": [1, 1],
-      "priority": 50
+      "priority": 50,
+      "designation":"left"
     },
     {
       "id": "quality",
@@ -25,7 +27,8 @@
       "chartType": "BAR_CHART",
       "fields": { "x": "quality_label" },
       "size": [1, 1],
-      "priority": 50
+      "priority": 50,
+      "designation":"left"
     },
     {
       "id": "histogram",

source/components/Eaglescope/Eaglescope.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import VisGridView from '../Layout/VisGridView/VisGridView';
+import VisGridSplitter from '../Layout/VisGridView/VisGridSplitter';
 import VisFullScreenView from '../Layout/VisFullScreenView/VisFullScreenView';
 import ESNavbar from '../ESNavbar/ESNavbar';
 import FilterOperationPanel from '../FilterOperationPanel/FilterOperationPanel';
@@ -84,7 +84,12 @@ function Eaglescope() {
           fullScreened={isFullScreen}
         />
       ) : (
-        <VisGridView fullVisScreenHandler={fullScreenHandler} fullScreened={isFullScreen} />
+        <VisGridSplitter
+          layout={config.LAYOUT || 'default'}
+          size={config.LAYOUT_SIZE || '300px'}
+          fullVisScreenHandler={fullScreenHandler}
+          fullScreened={isFullScreen}
+        />
       )}
     </div>
   );

source/components/Layout/VisGridView/VisGridSplitter.css

@@ -0,0 +1,33 @@
+.vis-grid-splitter.single {
+    width: 100%;
+    height: 100%;
+  }
+
+  .vis-grid-splitter.split-horizontal {
+    display: flex;
+    height: 100%;
+  }
+
+  .left-column {
+    overflow-y: auto;
+  }
+
+  .right-column {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .vis-grid-splitter.split-vertical {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .top-row {
+    overflow-y: auto;
+  }
+
+  .bottom-row {
+    flex: 1;
+    overflow-y: auto;
+  }

source/components/Layout/VisGridView/VisGridSplitter.js

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import VisGridView from './VisGridView';
+import { ConfigContext } from '../../../contexts/ConfigContext';
+import './VisGridSplitter.css';
+
+function VisGridSplitter({
+  layout, size, fullVisScreenHandler, fullScreened,
+}) {
+  const { config } = useContext(ConfigContext);
+
+  const renderSingleView = () => (
+    <div className="vis-grid-splitter single">
+      <VisGridView fullVisScreenHandler={fullVisScreenHandler} designation="*" fullScreened={fullScreened} />
+    </div>
+  );
+
+  const renderLeftRightSplit = () => (
+    <div className="vis-grid-splitter split-horizontal">
+      <div className="left-column" style={{ width: size }}>
+        <VisGridView fullVisScreenHandler={fullVisScreenHandler} designation="left" fullScreened={fullScreened} />
+      </div>
+      <div className="right-column">
+        <VisGridView fullVisScreenHandler={fullVisScreenHandler} designation="default" fullScreened={fullScreened} />
+      </div>
+    </div>
+  );
+
+  const renderTopBottomSplit = () => (
+    <div className="vis-grid-splitter split-vertical">
+      <div className="top-row" style={{ height: size }}>
+        <VisGridView fullVisScreenHandler={fullVisScreenHandler} designation="top" fullScreened={fullScreened} />
+      </div>
+      <div className="bottom-row">
+        <VisGridView fullVisScreenHandler={fullVisScreenHandler} designation="default" fullScreened={fullScreened} />
+      </div>
+    </div>
+  );
+
+  switch (layout) {
+    case 'left':
+    case 'right':
+      return renderLeftRightSplit();
+    case 'top':
+      return renderTopBottomSplit();
+    case 'default':
+    default:
+      return renderSingleView();
+  }
+}
+
+VisGridSplitter.propTypes = {
+  layout: PropTypes.oneOf(['default', 'left', 'right', 'top']).isRequired,
+  size: PropTypes.string.isRequired, // Size should include units, e.g., '300px'
+  fullVisScreenHandler: PropTypes.func.isRequired,
+  fullScreened: PropTypes.bool.isRequired,
+};
+
+export default VisGridSplitter;

source/components/Layout/VisGridView/VisGridView.js

@@ -1,27 +1,19 @@
 import React, {
-  useState, useRef, useEffect, useContext,
+  useState, useRef, useEffect, useContext, useMemo,
 } from 'react';
 import { debounce } from 'lodash';
 import GridLayout from 'react-grid-layout';
 import PropTypes from 'prop-types';
 import VisGridItem from './VisGridItem/VisGridItem';
 import { getLayoutConfig } from '../../../common/utils';
 import { ConfigContext } from '../../../contexts/ConfigContext';
-
-// component style
 import './VisGridView.css';
-/**
- * This Component is Responsible for Handling Layout
- * Calculations and Resize Handler
- * @param {Function} fullVisScreenHandler Handler to set
- * @param {Boolean} fullScreened
- */
 
-function VisGridView({ fullVisScreenHandler, fullScreened }) {
+function VisGridView({ fullVisScreenHandler, fullScreened, designation }) {
   const { config } = useContext(ConfigContext);
   const grid = config.UNIT_OF_GRID_VIEW;
   const margins = config.MARGIN_OF_GRID_VIEW;
-  const visConfig = config.VISUALIZATION_VIEW_CONFIGURATION;
+  const AllVisConfig = config.VISUALIZATION_VIEW_CONFIGURATION;
   const draggableHandle = config.GRAGGABLE ? '.draggable' : '';
   const isDraggable = config.DRAGGABLE || false;
   const isResizable = config.RESIZABLE || false;
@@ -32,11 +24,19 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
     width: 0,
     currentCols: 0,
     layout: [],
-    margins: [], // Initialize margins as an empty array or with default values
+    margins: [],
     grid,
   });
   const self = useRef();
 
+  const visConfig = useMemo(() => {
+    console.log('designation', designation);
+    if (designation == '*') {
+      return AllVisConfig; // for * don't filter, just show all
+    }
+    return AllVisConfig.filter((x) => x.designation === designation || (!x.designation && designation === 'default'));
+  }, [AllVisConfig, designation]);
+
   const updateViewSize = () => {
     const rect = self.current.getBoundingClientRect();
     const cols = parseInt((rect.width - margins[0]) / (grid[0] + margins[0]), 10);
@@ -69,13 +69,14 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
     SetIsResizing(false);
     SetResizingItemId(null);
   };
+
   useEffect(() => {
     updateViewSize();
     window.addEventListener('resize', debouncedUpdateViewSize);
     return () => {
       window.removeEventListener('resize', debouncedUpdateViewSize);
     };
-  }, [appLayout.currentCols, config.UNIT_OF_GRID_VIEW, config.UNIT_OF_GRID_VIEW, visConfig]);
+  }, [appLayout.currentCols, config.UNIT_OF_GRID_VIEW, visConfig]);
 
   useEffect(() => {
     const rect = self.current.getBoundingClientRect();
@@ -139,4 +140,9 @@ export default VisGridView;
 VisGridView.propTypes = {
   fullVisScreenHandler: PropTypes.func.isRequired,
   fullScreened: PropTypes.bool.isRequired,
+  designation: PropTypes.string,
+};
+
+VisGridView.defaultProps = {
+  designation: '*',
 };