add side split improvement

config/wines.json

@@ -8,7 +8,7 @@
   "HAS_SETTINGS" : "Anything trurthy is true for these boolean fields, including FALSE.",
   "DATA_RESOURCE_URL": "./config/wines.csv",
   "DATA_FORMAT": "csv",
-  "LAYOUT": "",
+  "LAYOUT": "left",
   "VISUALIZATION_VIEW_CONFIGURATION": [
     {
       "id": "type",
@@ -30,6 +30,16 @@
       "priority": 50,
       "designation":"left"
     },
+    {
+      "id": "quality2",
+      "title": "Quality Level",
+      "description": "Quality Level",
+      "chartType": "ENUM_LIST",
+      "fields": { "x": "quality_label" },
+      "size": [2, 1],
+      "priority": 50,
+      "designation":"left"
+    },
     {
       "id": "histogram",
       "title": "Quality, Wine Type, and Sugar",
@@ -138,3 +148,4 @@
     }
   ]
 }
+

source/components/Layout/VisGridView/SideView/SideView.css

@@ -0,0 +1,27 @@
+.side-view{
+  padding:5px;
+  margin: 10px;
+  background-color: #EEEEEE6E;
+}
+
+.vis-grid-view {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+    opacity: 0;
+  }
+  .react-grid-item:hover > .react-resizable-handle.react-resizable-handle-se {
+    opacity: 1;
+  }
+
+  /* .react-grid-item {
+      
+  } */
+

source/components/Layout/VisGridView/SideView/SideView.js

@@ -0,0 +1,107 @@
+import React, { useState, useRef, useEffect, useContext, useMemo } from 'react';
+import { debounce } from 'lodash';
+import PropTypes from 'prop-types';
+import VisItem from './VisItem/VisItem';
+import { getLayoutConfig } from '../../../../common/utils';
+import { ConfigContext } from '../../../../contexts/ConfigContext';
+import './SideView.css';
+
+function SideView({ fullVisScreenHandler, fullScreened, designation }) {
+  const { config } = useContext(ConfigContext);
+  const grid = config.UNIT_OF_GRID_VIEW;
+  const margins = config.MARGIN_OF_GRID_VIEW;
+  const AllVisConfig = config.VISUALIZATION_VIEW_CONFIGURATION;
+  const isDraggable = config.DRAGGABLE || false;
+  const isResizable = config.RESIZABLE || false;
+
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizingItemId, setResizingItemId] = useState(null);
+  const [appLayout, setAppLayout] = useState({
+    width: 0,
+    layout: [],
+    grid,
+  });
+  const self = useRef();
+
+  const visConfig = useMemo(() => {
+    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 updatedLayout = getLayoutConfig(visConfig, 1, isResizable); // We don't need to calculate columns for vertical stack
+
+    setAppLayout({
+      width: rect.width,
+      layout: updatedLayout.layout,
+      grid,
+    });
+  };
+
+  const debouncedUpdateViewSize = debounce(updateViewSize, 100);
+
+  const onResizeStartHandle = (layout, oldItem) => {
+    setIsResizing(true);
+    setResizingItemId(oldItem.i);
+  };
+
+  const onResizeStopHandle = () => {
+    setIsResizing(false);
+    setResizingItemId(null);
+  };
+
+  useEffect(() => {
+    updateViewSize();
+    window.addEventListener('resize', debouncedUpdateViewSize);
+    return () => {
+      window.removeEventListener('resize', debouncedUpdateViewSize);
+    };
+  }, [config.UNIT_OF_GRID_VIEW, visConfig]);
+
+  useEffect(() => {}, [isResizing, resizingItemId]);
+
+  return (
+    <div className="side-view" ref={self}>
+      <div className="vertical-stack-container" style={{ width: '100%' }}>
+        {visConfig.map((item, index) => (
+          <div
+            key={item.id}
+            style={{
+              marginBottom: margins[1], // Add margin between items
+              border: config?.HIDE_BORDER
+                ? ''
+                : `1px solid ${config?.THEME_COLOR ? config?.THEME_COLOR : '#007bff'}`,
+              borderRadius: config?.BORDER_RADIUS ? `${config.BORDER_RADIUS}px` : '0px',
+            }}
+          >
+            <VisItem
+              isResizing={item.id === resizingItemId && isResizing}
+              layout={appLayout}
+              operation={item}
+              toggleFullScreen={fullVisScreenHandler}
+              fullScreened={fullScreened}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default SideView;
+
+SideView.propTypes = {
+  fullVisScreenHandler: PropTypes.func.isRequired,
+  fullScreened: PropTypes.bool.isRequired,
+  designation: PropTypes.string,
+};
+
+SideView.defaultProps = {
+  designation: "*",
+};

source/components/Layout/VisGridView/SideView/VisItem/VisItem.css

@@ -0,0 +1,35 @@
+.vis-grid-item {
+    flex-direction: column;
+    position: relative;
+    display: flex;
+    height: 100%;
+}
+.place-holder {
+    background-color: #f1f1f1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+}
+.chart-area {
+    color:#c4c3d1;
+    height: 45%;
+    width: 45%;
+}
+
+.collapse-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 5px 10px;
+    margin-left: 10px;
+  }
+
+  .collapse-btn:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }

source/components/Layout/VisGridView/SideView/VisItem/VisItem.js

@@ -0,0 +1,119 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import VisItemContent from './VisItemContent/VisItemContent';
+import VisItemHeader from './VisItemHeader/VisItemHeader';
+import { DataContext } from '../../../../../contexts/DataContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// css class
+import './VisItem.css';
+
+function VisItem(props) {
+  const [hover, setHover] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false); // Manage collapse state
+
+  const onMouseEnterHandle = () => {
+    setHover(true);
+  };
+  const onMouseLeaveHandle = () => {
+    setHover(false);
+  };
+
+  const toggleCollapse = () => {
+    setIsCollapsed(prevState => !prevState); // Toggle collapse state
+  };
+
+  const {
+    data, filteredData, filters, addFiltersHandler, removeFiltersHandler,
+  } = useContext(DataContext);
+
+  useEffect(() => {
+    if (props.fullScreened) setHover(true);
+  }, [props.fullScreened]);
+
+  return (
+    <div
+      className="vis-grid-item"
+      onMouseEnter={onMouseEnterHandle}
+      onMouseLeave={onMouseLeaveHandle}
+      style={{
+        height: isCollapsed ? '25px' : '300px', // Adjust height based on collapsed state
+        //transition: 'height 0.3s ease', // Smooth transition for height change
+      }}
+    >
+      <VisItemHeader
+        id={props.operation.id}
+        title={props.operation.title}
+        description={props.operation.description}
+        toggleFullScreen={props.toggleFullScreen}
+        fullScreened={props.fullScreened}
+        hover={hover}
+        setHover={setHover}
+        filters={filters}
+        filterRemove={removeFiltersHandler}
+        toggleCollapse={toggleCollapse} // Pass toggleCollapse to header
+        isCollapsed={isCollapsed} // Pass isCollapsed state to header
+      />
+
+      {/* Render content based on isCollapsed */}
+      {isCollapsed ? (
+        <div className="collapsed-state">
+          <p></p>
+        </div>
+      ) : (
+        props.isResizing ? (
+          <div className="place-holder">
+            <FontAwesomeIcon icon="chart-area" className="chart-area" />
+          </div>
+        ) : (
+          <VisItemContent
+            fields={props.operation.fields}
+            chartType={props.operation.chartType}
+            data={data}
+            filterData={filteredData}
+            filters={filters}
+            filterAdded={addFiltersHandler}
+            filterRemove={removeFiltersHandler}
+            id={props.operation.id}
+            title={props.operation.title}
+            layout={props.layout}
+            configProps={props.operation}
+            logScale={props.operation.logScale}
+          />
+        )
+      )}
+    </div>
+  );
+}
+
+VisItem.propTypes = {
+  operation: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    chartType: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    fields: PropTypes.oneOfType([
+      PropTypes.shape({
+        x: PropTypes.string,
+        y: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+        z: PropTypes.string,
+      }),
+      PropTypes.array,
+    ]).isRequired,
+  }).isRequired,
+
+  layout: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    currentCols: PropTypes.number.isRequired,
+  }),
+  fullScreened: PropTypes.bool.isRequired,
+  toggleFullScreen: PropTypes.func.isRequired,
+  isResizing: PropTypes.bool,  // Ensuring isResizing is also considered
+  logScale: PropTypes.bool,
+};
+
+VisItem.defaultProps = {
+  layout: null,
+  isResizing: false, // Default to false
+};
+
+export default VisItem;

source/components/Layout/VisGridView/SideView/VisItem/VisItemContent/VisItemContent.css

@@ -0,0 +1,6 @@
+.vis-grid-item-content {
+  /* background: #eef6ff; */
+  height: 100%;
+  width: 100%;
+  /* border-radius: 0 0 4px 4px; */
+}