feat(data-browser): add graph visualization

mtrezza · mtrezza · commit 6f5d7fedc7e9 · 2025-07-09T17:44:33.000+02:00
diff --git a/src/components/GraphPanel/GraphPanel.js b/src/components/GraphPanel/GraphPanel.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import Chart from 'components/Chart/Chart.react';
+import { ChartColorSchemes } from 'lib/Constants';
+import styles from './GraphPanel.scss';
+
+function parseDate(val) {
+  if (!val) {
+    return null;
+  }
+  if (val instanceof Date) {
+    return val.getTime();
+  }
+  if (typeof val === 'string') {
+    const d = new Date(val);
+    return isNaN(d) ? null : d.getTime();
+  }
+  if (val.iso) {
+    const d = new Date(val.iso);
+    return isNaN(d) ? null : d.getTime();
+  }
+  return null;
+}
+
+export default function GraphPanel({ selectedCells, order, data, columns, width }) {
+  if (!selectedCells || selectedCells.rowStart < 0) {
+    return null;
+  }
+  const { rowStart, rowEnd, colStart, colEnd } = selectedCells;
+  const columnNames = order.slice(colStart, colEnd + 1).map(o => o.name);
+  const columnTypes = columnNames.map(name => columns[name]?.type);
+  const timeSeries =
+    columnTypes.length > 1 &&
+    columnTypes[0] === 'Date' &&
+    columnTypes.slice(1).every(t => t === 'Number');
+
+  const chartData = {};
+  if (timeSeries) {
+    for (let j = 1; j < columnNames.length; j++) {
+      chartData[columnNames[j]] = { color: ChartColorSchemes[j - 1], points: [] };
+    }
+    for (let i = rowStart; i <= rowEnd; i++) {
+      const row = data[i];
+      if (!row) continue;
+      const ts = parseDate(row.attributes[columnNames[0]]);
+      if (ts === null) continue;
+      for (let j = 1; j < columnNames.length; j++) {
+        const val = row.attributes[columnNames[j]];
+        if (typeof val === 'number' && !isNaN(val)) {
+          chartData[columnNames[j]].points.push([ts, val]);
+        }
+      }
+    }
+  } else {
+    let seriesIndex = 0;
+    columnNames.forEach((col, idx) => {
+      if (columnTypes[idx] === 'Number') {
+        chartData[col] = { color: ChartColorSchemes[seriesIndex], points: [] };
+        seriesIndex++;
+      }
+    });
+    let x = 0;
+    for (let i = rowStart; i <= rowEnd; i++, x++) {
+      const row = data[i];
+      if (!row) continue;
+      columnNames.forEach(col => {
+        const val = row.attributes[col];
+        if (typeof val === 'number' && !isNaN(val)) {
+          chartData[col].points.push([x, val]);
+        }
+      });
+    }
+  }
+
+  if (Object.keys(chartData).length === 0) {
+    return <div className={styles.empty}>No numeric data selected.</div>;
+  }
+
+  const chartWidth = width - 20;
+  return (
+    <div className={styles.graphPanel}>
+      <Chart width={chartWidth} height={400} data={chartData} />
+    </div>
+  );
+}
diff --git a/src/components/GraphPanel/GraphPanel.scss b/src/components/GraphPanel/GraphPanel.scss
@@ -0,0 +1,11 @@
+.graphPanel {
+  height: 100%;
+  overflow: auto;
+  background-color: #fefafb;
+  padding: 10px;
+}
+
+.empty {
+  padding: 10px;
+  color: #555;
+}
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
@@ -15,7 +15,7 @@ import { useNavigate, useNavigationType, NavigationType } from 'react-router-dom
 
 const POPOVER_CONTENT_ID = 'toolbarStatsPopover';
 
-const Stats = ({ data, classwiseCloudFunctions, className, appId, appName }) => {
+const Stats = ({ data, classwiseCloudFunctions, className, appId, appName, toggleGraph, isGraphVisible }) => {
   const [selected, setSelected] = React.useState(null);
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef();
@@ -108,14 +108,21 @@ const Stats = ({ data, classwiseCloudFunctions, className, appId, appName }) =>
   return (
     <>
       {selected ? (
-        <button
-          ref={buttonRef}
-          className={styles.stats}
-          onClick={toggle}
-          style={{ marginRight: rightMarginStyle }}
-        >
-          {`${selected.label}: ${selected.getValue(data)}`}
-        </button>
+        <>
+          <button
+            ref={buttonRef}
+            className={styles.stats}
+            onClick={toggle}
+            style={{ marginRight: rightMarginStyle }}
+          >
+            {`${selected.label}: ${selected.getValue(data)}`}
+          </button>
+          {data.length > 1 ? (
+            <button onClick={toggleGraph} className={styles.graph}>
+              {isGraphVisible ? 'Hide Graph' : 'Show Graph'}
+            </button>
+          ) : null}
+        </>
       ) : null}
       {open ? renderPopover() : null}
     </>
@@ -152,6 +159,8 @@ const Toolbar = props => {
           className={props.className}
           appId={props.appId}
           appName={props.appName}
+          toggleGraph={props.toggleGraph}
+          isGraphVisible={props.isGraphVisible}
         />
       ) : null}
       <div className={styles.actions}>{props.children}</div>
@@ -182,6 +191,8 @@ Toolbar.propTypes = {
   details: PropTypes.string,
   relation: PropTypes.object,
   selectedData: PropTypes.array,
+  toggleGraph: PropTypes.func,
+  isGraphVisible: PropTypes.bool,
 };
 
 export default Toolbar;
diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.scss
@@ -99,6 +99,19 @@ body:global(.expanded) {
   border: none;
 }
 
+.graph {
+  position: absolute;
+  right: 120px;
+  bottom: 10px;
+  background: $blue;
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 14px;
+  color: white;
+  box-shadow: none;
+  border: none;
+}
+
 .stats_popover_container {
   display: flex;
   flex-direction: column;
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -79,6 +79,8 @@ const BrowserToolbar = ({
 
   togglePanel,
   isPanelVisible,
+  toggleGraph,
+  isGraphVisible,
   classwiseCloudFunctions,
   appId,
   appName,
@@ -277,6 +279,8 @@ const BrowserToolbar = ({
       selectedData={selectedData}
       togglePanel={togglePanel}
       isPanelVisible={isPanelVisible}
+      toggleGraph={toggleGraph}
+      isGraphVisible={isGraphVisible}
       classwiseCloudFunctions={classwiseCloudFunctions}
       appId={appId}
       appName={appName}
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -17,6 +17,7 @@ import { ResizableBox } from 'react-resizable';
 import styles from './Databrowser.scss';
 
 import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
+import GraphPanel from 'components/GraphPanel/GraphPanel';
 
 const BROWSER_SHOW_ROW_NUMBER = 'browserShowRowNumber';
 
@@ -80,7 +81,7 @@ export default class DataBrowser extends React.Component {
     const storedRowNumber =
       window.localStorage?.getItem(BROWSER_SHOW_ROW_NUMBER) === 'true';
 
-    this.state = {
+      this.state = {
       order: order,
       current: null,
       editing: false,
@@ -99,6 +100,8 @@ export default class DataBrowser extends React.Component {
       showAggregatedData: true,
       frozenColumnIndex: -1,
       showRowNumber: storedRowNumber,
+      graphVisible: false,
+      graphWidth: 300,
     };
 
     this.handleResizeDiv = this.handleResizeDiv.bind(this);
@@ -109,6 +112,9 @@ export default class DataBrowser extends React.Component {
     this.handleHeaderDragDrop = this.handleHeaderDragDrop.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.togglePanelVisibility = this.togglePanelVisibility.bind(this);
+    this.handleGraphResizeStart = this.handleGraphResizeStart.bind(this);
+    this.handleGraphResizeStop = this.handleGraphResizeStop.bind(this);
+    this.handleGraphResizeDiv = this.handleGraphResizeDiv.bind(this);
     this.setCurrent = this.setCurrent.bind(this);
     this.setEditing = this.setEditing.bind(this);
     this.handleColumnsOrder = this.handleColumnsOrder.bind(this);
@@ -120,6 +126,7 @@ export default class DataBrowser extends React.Component {
     this.unfreezeColumns = this.unfreezeColumns.bind(this);
     this.setShowRowNumber = this.setShowRowNumber.bind(this);
     this.handleCellClick = this.handleCellClick.bind(this);
+    this.toggleGraphVisibility = this.toggleGraphVisibility.bind(this);
     this.saveOrderTimeout = null;
   }
 
@@ -215,6 +222,21 @@ export default class DataBrowser extends React.Component {
     this.setState({ panelWidth: size.width });
   }
 
+  handleGraphResizeStart() {
+    this.setState({ isResizing: true });
+  }
+
+  handleGraphResizeStop(event, { size }) {
+    this.setState({
+      isResizing: false,
+      graphWidth: size.width,
+    });
+  }
+
+  handleGraphResizeDiv(event, { size }) {
+    this.setState({ graphWidth: size.width });
+  }
+
   setShowAggregatedData(bool) {
     this.setState({
       showAggregatedData: bool,
@@ -264,6 +286,10 @@ export default class DataBrowser extends React.Component {
     }
   }
 
+  toggleGraphVisibility() {
+    this.setState(prevState => ({ graphVisible: !prevState.graphVisible }));
+  }
+
   getAllClassesSchema(schema) {
     const allClasses = Object.keys(schema.data.get('classes').toObject());
     const schemaSimplifiedData = {};
@@ -667,6 +693,7 @@ export default class DataBrowser extends React.Component {
           },
           selectedObjectId: undefined,
           selectedData,
+          graphVisible: true,
         });
       } else {
         this.setCurrent({ row, col });
@@ -677,6 +704,7 @@ export default class DataBrowser extends React.Component {
         selectedData: [],
         current: { row, col },
         firstSelectedCell: clickedCellKey,
+        graphVisible: false,
       });
     }
   }
@@ -758,6 +786,29 @@ export default class DataBrowser extends React.Component {
               </div>
             </ResizableBox>
           )}
+          {this.state.graphVisible && (
+            <ResizableBox
+              width={this.state.graphWidth}
+              height={Infinity}
+              minConstraints={[100, Infinity]}
+              maxConstraints={[this.state.maxWidth, Infinity]}
+              onResizeStart={this.handleGraphResizeStart}
+              onResizeStop={this.handleGraphResizeStop}
+              onResize={this.handleGraphResizeDiv}
+              resizeHandles={['w']}
+              className={styles.resizablePanel}
+            >
+              <div className={styles.aggregationPanelContainer}>
+                <GraphPanel
+                  selectedCells={this.state.selectedCells}
+                  order={this.state.order}
+                  data={this.props.data}
+                  columns={this.props.columns}
+                  width={this.state.graphWidth}
+                />
+              </div>
+            </ResizableBox>
+          )}
         </div>
 
         <BrowserToolbar
@@ -787,6 +838,8 @@ export default class DataBrowser extends React.Component {
           allClassesSchema={this.state.allClassesSchema}
           togglePanel={this.togglePanelVisibility}
           isPanelVisible={this.state.isPanelVisible}
+          toggleGraph={this.toggleGraphVisibility}
+          isGraphVisible={this.state.graphVisible}
           appId={this.props.app.applicationId}
           appName={this.props.appName}
           {...other}
