draft: expanded data panel

src/components/MenuDrawer.jsx

@@ -91,6 +91,10 @@ const MenuDrawer = (props) => {
       history.replaceState(null, null, ' ')
     }
     setActiveKey(e.key)
+
+    if (e.key == 'optimizer') {
+      window.onOptimizerFormValuesChange({}, window.optimizerForm.getFieldsValue(), true)
+    }
   }
 
   return (

src/components/optimizerTab/OptimizerGrid.jsx

@@ -1,11 +1,92 @@
 import { AgGridReact } from 'ag-grid-react'
-import { baseColumnDefs, combatColumnDefs, defaultColDef, gridOptions } from 'components/optimizerTab/constants.ts'
+import { baseColumnDefs, combatColumnDefs, defaultColDef } from 'components/optimizerTab/constants.tsx'
 import { OptimizerTabController } from 'lib/optimizerTabController.js'
 import React, { useMemo, useRef } from 'react'
-import { Flex } from 'antd'
+import { Flex, Typography } from 'antd'
+import { Stats, StatsToCompact } from 'lib/constants'
+import { Utils } from 'lib/utils'
+import VerticalDivider from 'components/VerticalDivider'
+
+const lineHeight = '18px'
+function ExpandedStatRow({ data, stat }) {
+  let displayLabel = StatsToCompact[stat]
+  if (!displayLabel) {
+    displayLabel = stat
+  }
+
+  let displayValue = Utils.precisionRound(data[stat], 3)
+  if (isNaN(displayValue)) {
+    displayValue = ''
+  }
+
+  return (
+    <Flex justify="space-between" style={{ width: 150 }}>
+      <Typography.Text style={{ lineHeight: lineHeight }}>
+        {displayLabel}
+      </Typography.Text>
+
+      <Typography.Text style={{ lineHeight: lineHeight }}>
+        {displayValue}
+      </Typography.Text>
+    </Flex>
+  )
+}
+
+const renderer = (x) => {
+  console.log('Render data panel', x)
+  const data = x.node.data
+  return (
+    <Flex style={{ width: '100%', height: '100%', margin: 5 }} gap={1}>
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat={Stats.ATK} />
+        <ExpandedStatRow data={data} stat={Stats.DEF} />
+        <ExpandedStatRow data={data} stat={Stats.HP} />
+        <ExpandedStatRow data={data} stat={Stats.SPD} />
+        <ExpandedStatRow data={data} stat={Stats.CR} />
+        <ExpandedStatRow data={data} stat={Stats.CD} />
+        <ExpandedStatRow data={data} stat={Stats.EHR} />
+        <ExpandedStatRow data={data} stat={Stats.RES} />
+        <ExpandedStatRow data={data} stat={Stats.BE} />
+      </Flex>
+      <VerticalDivider />
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat="ED" />
+        <ExpandedStatRow data={data} stat="CV" />
+        <ExpandedStatRow data={data} stat="EHP" />
+        <ExpandedStatRow data={data} stat="WEIGHT" />
+        <ExpandedStatRow data={data} stat="BASIC" />
+        <ExpandedStatRow data={data} stat="SKILL" />
+        <ExpandedStatRow data={data} stat="ULT" />
+        <ExpandedStatRow data={data} stat="FUA" />
+        <ExpandedStatRow data={data} stat="DOT" />
+      </Flex>
+      <VerticalDivider />
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat="column" />
+      </Flex>
+      <VerticalDivider />
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat="column" />
+      </Flex>
+      <VerticalDivider />
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat="column" />
+      </Flex>
+      <VerticalDivider />
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat="column" />
+      </Flex>
+      <VerticalDivider />
+      <Flex vertical>
+        <ExpandedStatRow data={data} stat="column" />
+      </Flex>
+    </Flex>
+  )
+}
 
 export function OptimizerGrid() {
   console.log('======================================================================= RENDER OptimizerGrid')
+  let showOptimizerGridDetails = window.store((s) => s.showOptimizerGridDetails)
 
   const optimizerGrid = useRef()
   window.optimizerGrid = optimizerGrid
@@ -19,7 +100,28 @@ export function OptimizerGrid() {
     return statDisplay == 'combat' ? combatColumnDefs : baseColumnDefs
   }, [statDisplay])
 
-  gridOptions.datasource = datasource
+  const gridOptions = useMemo(() => {
+    console.log('!!!z')
+    return {
+      pagination: true,
+      rowHeight: 33,
+      rowSelection: 'single',
+      rowModelType: 'infinite',
+      datasource: datasource,
+      paginationPageSize: 500,
+      paginationPageSizeSelector: [100, 500, 1000],
+      cacheBlockSize: 500,
+      maxBlocksInCache: 1,
+      suppressDragLeaveHidesColumns: true,
+      suppressScrollOnNewData: true,
+      suppressMultiSort: true,
+      suppressCellFocus: true,
+    }
+  }, [showOptimizerGridDetails])
+
+  const x = useMemo(() => {
+    return (params) => params?.rowNode?.data?.fullWidth
+  }, [showOptimizerGridDetails])
 
   // TODO: I think these things need memos: https://www.ag-grid.com/react-data-grid/react-hooks/
   return (
@@ -34,6 +136,13 @@ export function OptimizerGrid() {
           onCellClicked={OptimizerTabController.cellClicked}
           ref={optimizerGrid}
           rowSelection="single"
+          isFullWidthRow={x}
+          rowHeight={33}
+          getRowHeight={(params) => {
+            return params?.data?.fullWidth ? 200 : null
+          }}
+          fullWidthCellRenderer={renderer}
+          pinnedBottomRowData={showOptimizerGridDetails}
         />
       </div>
     </Flex>

src/components/optimizerTab/constants.ts → src/components/optimizerTab/constants.tsx

@@ -61,22 +61,6 @@ export const combatColumnDefs = [
   { field: 'DOT', valueFormatter: Renderer.floor, width: DIGITS_5, headerName: 'DOT' },
 ]
 
-export const gridOptions = {
-  rowHeight: 33,
-  pagination: true,
-  rowSelection: 'single',
-  rowModelType: 'infinite',
-  datasource: null,
-  paginationPageSize: 500,
-  paginationPageSizeSelector: [100, 500, 1000],
-  cacheBlockSize: 500,
-  maxBlocksInCache: 1,
-  suppressDragLeaveHidesColumns: true,
-  suppressScrollOnNewData: true,
-  suppressMultiSort: true,
-  suppressCellFocus: true,
-}
-
 export const defaultColDef = {
   cellStyle: Gradient.getOptimizerColumnGradient,
   sortable: true,

src/lib/constants.ts

@@ -111,6 +111,31 @@ export const StatsToReadable = {
   [Stats.Imaginary_DMG]: 'Imaginary DMG',
 }
 
+export const StatsToCompact = {
+  [Stats.HP_P]: 'HP %',
+  [Stats.ATK_P]: 'ATK %',
+  [Stats.DEF_P]: 'DEF %',
+  [Stats.SPD_P]: 'SPD %',
+  [Stats.HP]: 'HP',
+  [Stats.ATK]: 'ATK',
+  [Stats.DEF]: 'DEF',
+  [Stats.SPD]: 'SPD',
+  [Stats.CR]: 'CR',
+  [Stats.CD]: 'CD',
+  [Stats.EHR]: 'EHR',
+  [Stats.RES]: 'RES',
+  [Stats.BE]: 'BE',
+  [Stats.ERR]: 'ERR',
+  [Stats.OHB]: 'OHB',
+  [Stats.Physical_DMG]: 'Physical DMG',
+  [Stats.Fire_DMG]: 'Fire DMG',
+  [Stats.Ice_DMG]: 'Ice DMG',
+  [Stats.Lightning_DMG]: 'Lightning DMG',
+  [Stats.Wind_DMG]: 'Wind DMG',
+  [Stats.Quantum_DMG]: 'Quantum DMG',
+  [Stats.Imaginary_DMG]: 'Imaginary DMG',
+}
+
 export const Parts = {
   Head: 'Head',
   Hands: 'Hands',

src/lib/db.js

@@ -38,6 +38,7 @@ let hashes = [
 
 window.store = create((set) => ({
   optimizerGrid: undefined,
+  showOptimizerGridDetails: [{ fullWidth: true }],
 
   optimizerTabFocusCharacter: undefined,
   characterTabFocusCharacter: undefined,
@@ -111,6 +112,7 @@ window.store = create((set) => ({
   setOptimizerMenuState: (x) => set(() => ({ optimizerMenuState: x })),
   setOptimizationInProgress: (x) => set(() => ({ optimizationInProgress: x })),
   setOptimizationId: (x) => set(() => ({ optimizationId: x })),
+  setShowOptimizerGridDetails: (x) => set(() => ({ showOptimizerGridDetails: x })),
   setTeammateCount: (x) => set(() => ({ teammateCount: x })),
 }))
 

src/lib/optimizerTabController.js

@@ -21,6 +21,7 @@ let columnsToAggregate
 let columnsToAggregateMap
 
 export const OptimizerTabController = {
+
   setMetadata: (inputConsts, inputRelics) => {
     consts = inputConsts
     relics = inputRelics
@@ -93,6 +94,10 @@ export const OptimizerTabController = {
     let build = OptimizerTabController.calculateRelicsFromId(data.id)
     console.log('build', build)
     window.setOptimizerBuild(build)
+
+    const expandedPanelItem = JSON.parse(JSON.stringify(data))
+    expandedPanelItem.fullWidth = true
+    window.store.getState().setShowOptimizerGridDetails([expandedPanelItem])
   },
 
   getColumnsToAggregate: (map) => {