recreate split layout

config/wines.json

@@ -11,6 +11,7 @@
   "HAS_SETTINGS" : 0,
   "DATA_RESOURCE_URL": "./config/wines.csv",
   "DATA_FORMAT": "csv",
+  "LAYOUT": "left",
   "VISUALIZATION_VIEW_CONFIGURATION": [
     {
       "id": "type",
@@ -19,7 +20,8 @@
       "chartType": "PIE_CHART",
       "fields": { "x": "wine_type" },
       "size": [1, 1],
-      "priority": 50
+      "priority": 50,
+      "designation":"left"
     },
     {
       "id": "type2",
@@ -29,15 +31,17 @@
       "fields": { "y": "wine_type" },
       "logScale": true,
       "size": [1, 1],
-      "priority": 50
+      "priority": 50,
+      "designation":"left"
     },
     {
       "id":"TextTest",
       "title": "Quality Level",
       "description": "Did you know that text exists?",
       "chartType": "TEXT_CONTAINER",
       "size": [1, 1],
-      "priority": 50
+      "priority": 50,
+      "designation":"left"
     },
     {
       "id": "quality",

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';
@@ -39,12 +39,12 @@ function Eaglescope() {
     if (filters.length > 0) {
       setProgressAttrs({
         now: filteredData.length,
-        label: `${filteredData.length}/${data.length}, ${Math.floor((filteredData.length/data.length)*100)}\%`,
+        label: `${filteredData.length}/${data.length}, ${Math.floor((filteredData.length / data.length) * 100)}%`,
       });
     } else {
       setProgressAttrs({
         now: data.length,
-        label: `${data.length}/${data.length}, ${Math.floor((data.length/data.length)*100)}\%`,
+        label: `${data.length}/${data.length}, ${Math.floor((data.length / data.length) * 100)}%`,
       });
     }
   }, [filters, filteredData]);
@@ -85,10 +85,16 @@ function Eaglescope() {
           fullScreened={isFullScreen}
         />
       ) : (
-        <VisGridView fullVisScreenHandler={fullScreenHandler} fullScreened={isFullScreen} />
+        <VisGridSplitter
+          layout={config.LAYOUT || 'default'}
+          size={config.LAYOUT_SIZE || '300px'}
+          fullVisScreenHandler={fullScreenHandler}
+          fullScreened={isFullScreen}
+        />
       )}
     </div>
   );
 }
 
 export default Eaglescope;
+

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,58 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import VisGridView from './VisGridView';
+import { ConfigContext } from '../../../contexts/ConfigContext';
+import './VisGridSplitter.css';
+
+const 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;
@@ -37,6 +29,15 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) {
   });
   const self = useRef();
 
+  const visConfig = useMemo(() => {
+    console.log("designation", designation)
+    if (designation == "*"){
+      return AllVisConfig // for * don't filter, just show all
+    } else {
+      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 +70,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 +141,10 @@ export default VisGridView;
 VisGridView.propTypes = {
   fullVisScreenHandler: PropTypes.func.isRequired,
   fullScreened: PropTypes.bool.isRequired,
+  designation: PropTypes.string,
 };
+
+VisGridView.defaultProps = {
+  designation: "*",
+};
+