Fixes PHRMA Brffs frontend income sorting and unknown handling

frontend/package.json

@@ -26,7 +26,6 @@
 		"biome": "^0.3.3",
 		"d3": "^7.8.5",
 		"data-forge": "^1.10.2",
-		"dataframe-js": "^1.4.4",
 		"env-cmd": "^10.1.0",
 		"history": "^5.3.0",
 		"html2canvas": "^1.4.1",
@@ -61,7 +60,6 @@
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^16.0.1",
 		"@types/d3": "^7.4.0",
-		"@types/dataframe-js": "^1.4.3",
 		"@types/lodash": "^4.17.7",
 		"@types/node": "^22.5.2",
 		"@types/react": "^18.3.5",

frontend/src/cards/AgeAdjustedTableCard.tsx

@@ -139,7 +139,14 @@ export default function AgeAdjustedTableCard(props: AgeAdjustedTableCardProps) {
           RACE,
         )
 
-        const isWrongDemographicType = props.demographicType === SEX
+        const demosShowingAgeAdjusted: DemographicType[] = [
+          'age',
+          'race_and_ethnicity',
+        ]
+
+        const isWrongDemographicType = !demosShowingAgeAdjusted.includes(
+          props.demographicType,
+        )
         const noRatios = knownRaceData.every(
           (row) => row[ratioId] === undefined,
         )
@@ -182,7 +189,7 @@ export default function AgeAdjustedTableCard(props: AgeAdjustedTableCardProps) {
             {/* values are present or partially null, implying we have at least some age-adjustments */}
             {!raceQueryResponse.dataIsMissing() &&
               !noRatios &&
-              props.demographicType !== SEX && (
+              !isWrongDemographicType && (
                 <AgeAdjustedTableChart
                   data={knownRaceData}
                   metricConfigs={ratioConfigs}

frontend/src/cards/MapCard.tsx

@@ -77,6 +77,7 @@ import { dataSourceMetadataMap } from '../data/config/MetadataMap'
 import type { DatasetId } from '../data/config/DatasetMetadata'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import HetTerm from '../styles/HetComponents/HetTerm'
+import { getSortArgs } from '../data/sorting/sortingUtils'
 
 const SIZE_OF_HIGHEST_LOWEST_GEOS_RATES_LIST = 5
 const HASH_ID: ScrollableHashId = 'rate-map'
@@ -321,10 +322,7 @@ function MapCardWithKey(props: MapCardProps) {
         )
 
         const sviQueryResponse: MetricQueryResponse = queryResponses[3] || null
-        const sortArgs =
-          demographicType === AGE
-            ? ([new AgeSorterStrategy([ALL]).compareFn] as any)
-            : []
+        const sortArgs = getSortArgs(demographicType)
 
         const fieldValues = mapQueryResponse.getFieldValues(
           /* fieldName: DemographicType */ demographicType,

frontend/src/cards/SimpleBarChartCard.tsx

@@ -126,7 +126,10 @@ function SimpleBarChartCardWithKey(props: SimpleBarChartCardProps) {
       elementsToHide={elementsToHide}
     >
       {([queryResponse], metadata) => {
-        const data = queryResponse.getValidRowsForField(metricConfig.metricId)
+        // for consistency, filter out any 'Unknown' rows that might have rates (like PHRMA)
+        const data = queryResponse
+          .getValidRowsForField(metricConfig.metricId)
+          .filter((row) => row[props.demographicType] !== 'Unknown')
 
         const hideChart =
           data.length === 0 ||

frontend/src/cards/TableCard.tsx

@@ -37,6 +37,7 @@ import type { CountColsMap } from '../charts/mapGlobals'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import { generateSubtitle } from '../charts/utils'
 import HetDivider from '../styles/HetComponents/HetDivider'
+import { sortForVegaByIncome } from '../data/sorting/IncomeSorterStrategy'
 
 // We need to get this property, but we want to show it as
 // part of the "population_pct" column, and not as its own column
@@ -164,6 +165,10 @@ export default function TableCard(props: TableCardProps) {
           queryResponse.shouldShowMissingDataMessage(normalMetricIds) ||
           data.length <= 0
 
+        if (props.demographicType === 'income') {
+          data = sortForVegaByIncome(data)
+        }
+
         return (
           <>
             {!queryResponse.dataIsMissing() && data.length > 0 && (

frontend/src/charts/AgeAdjustedTableChart.tsx

@@ -93,9 +93,10 @@ export function AgeAdjustedTableChart(props: AgeAdjustedTableChartProps) {
 
   /** Component for the table's header row **/
   function TableHeaderRow({ group }: { group: HeaderGroup<any> }) {
+    const { key, ...restHeaderGroupProps } = group.getHeaderGroupProps()
     return (
-      <TableRow {...group.getHeaderGroupProps()}>
-        {group.headers.map((col, index) => (
+      <TableRow key={key} {...restHeaderGroupProps}>
+        {group.headers.map((col) => (
           <TableCell key={col.id} style={headerCellStyle}>
             {col.render('Header')}
           </TableCell>
@@ -107,8 +108,10 @@ export function AgeAdjustedTableChart(props: AgeAdjustedTableChartProps) {
   /** Component for the table's data rows **/
   function TableDataRow({ row }: { row: Row<any> }) {
     prepareRow(row)
+    const { key, ...restRowProps } = row.getRowProps()
+
     return (
-      <TableRow {...row.getRowProps()}>
+      <TableRow key={key} {...restRowProps}>
         {row.cells.map((cell, index) =>
           cell.value == null ? (
             <TableCell

frontend/src/charts/SimpleHorizontalBarChart.tsx

@@ -18,6 +18,7 @@ import {
 } from './utils'
 import { createBarLabel } from './mapHelperFunctions'
 import { het, ThemeZIndexValues } from '../styles/DesignTokens'
+import { sortForVegaByIncome } from '../data/sorting/IncomeSorterStrategy'
 
 // determine where (out of 100) to flip labels inside/outside the bar
 const LABEL_SWAP_CUTOFF_PERCENT = 66
@@ -283,12 +284,16 @@ export function SimpleHorizontalBarChart(props: SimpleHorizontalBarChartProps) {
   const [dataWithDisplayCol, barMetricDisplayColumnName] =
     addMetricDisplayColumn(props.metric, dataWithLineBreakDelimiter)
   // Omit the % symbol for the tooltip because it's included in shortLabel.
-  const [data, tooltipMetricDisplayColumnName] = addMetricDisplayColumn(
+  let [data, tooltipMetricDisplayColumnName] = addMetricDisplayColumn(
     props.metric,
     dataWithDisplayCol,
     /* omitPctSymbol= */ true,
   )
 
+  if (props.demographicType === 'income') {
+    data = sortForVegaByIncome(data)
+  }
+
   const barLabelBreakpoint =
     Math.max(...props.data.map((row) => row[props.metric.metricId])) *
     (LABEL_SWAP_CUTOFF_PERCENT / 100)