Feature: [dev-8409] dashboard filter refactor (#1390)

* feature dev-8490 dashboard filter refactor

* fixed conflicts

* added select from existing

* added fix for delete logic, and added fix for showMissingDataCellValue

packages/core/components/DataTable/helpers/getChartCellValue.ts

@@ -77,6 +77,6 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
       }
     }
   })
-  const shoMissingDataCellValue = config.general.showMissingDataLabel && !labelValue
+  const shoMissingDataCellValue = config.general?.showMissingDataLabel && !labelValue
   return shoMissingDataCellValue ? 'N/A' : cellValue
 }

packages/core/components/EditorPanel/FieldSetWrapper.tsx

@@ -8,7 +8,7 @@ type FieldSetProps = {
   fieldType: string
   controls: OpenControls
   deleteField: Function
-  children: React.ReactElement[]
+  children: React.ReactNode
 }
 
 const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, controls, deleteField, children }) => {

packages/core/components/Layout/components/Visualization/index.tsx

@@ -1,18 +1,19 @@
 // main visualization wrapper
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
 import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig
-  currentViewport: string
-  imageId: string
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters
+  currentViewport?: string
+  imageId?: string
   isEditor: boolean
-  showEditorPanel: boolean
+  showEditorPanel?: boolean
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {

packages/core/components/ui/Icon.tsx

@@ -67,7 +67,7 @@ const iconHash = {
   plus: iconPlus,
   minus: iconMinus,
   'filtered-text': iconText,
-  'filter-dropdowns': iconDropdowns,
+  dashboardFilters: iconDropdowns,
   table: iconTable,
   sankey: iconSankey,
   rotateLeft: iconRotateLeft,

packages/core/helpers/ver/4.24.7.ts

@@ -1,28 +1,92 @@
-import _ from 'lodash'
-
-const mapUpdates = newConfig => {
-  // When switching between old version of equal number, and the revised equal number opt in, roundToPlace needs to be set.
-  // There wasn't an initial value set for this, and legends would return NaN if it wasn't set. ie. 0 - NAN instead of 0 - 1
-  const equalNumberRoundingPatch = newConfig => {
-    if (newConfig.type === 'map') {
-      if (newConfig.columns.primary.roundToPlace === undefined) {
-        newConfig.columns.primary.roundToPlace = 0
-      }
-    }
-  }
-
-  equalNumberRoundingPatch(newConfig)
-
-  return newConfig
-}
-
-const update_4_24_7 = config => {
-  const ver = '4.24.7'
-
-  const newConfig = _.cloneDeep(config)
-
-  mapUpdates(newConfig)
-  newConfig.version = ver
-  return newConfig
-}
-export default update_4_24_7
+import _ from 'lodash'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
+import { MultiDashboardConfig } from '@cdc/dashboard/src/types/MultiDashboard'
+import { AnyVisualization } from '../../types/Visualization'
+
+export const dashboardFiltersMigrate = config => {
+  if (!config.dashboard) return config
+  const dashboardConfig = config as MultiDashboardConfig
+  const newVisualizations = {}
+  // autoload was removed from APIFilter type
+  const newSharedFilters = (dashboardConfig.dashboard.sharedFilters || []).map(sf => {
+    if (sf.apiFilter?.autoLoad !== undefined) {
+      delete sf.apiFilter.autoLoad
+    }
+    if (sf.apiFilter?.defaultValue !== undefined) {
+      delete sf.apiFilter.defaultValue
+    }
+    return sf
+  })
+  config.dashboard.sharedFilters = newSharedFilters
+
+  Object.keys(dashboardConfig.visualizations).forEach(vizKey => {
+    const viz = dashboardConfig.visualizations[vizKey] as DashboardFilters
+    // hide was removed from visualizations
+    if (viz.hide !== undefined) {
+      viz.sharedFilterIndexes = newSharedFilters.map((_sf, i) => i).filter(i => !viz.hide.includes(i))
+      viz.type = 'dashboardFilters'
+      if (viz.autoLoad) {
+        viz.filterBehavior = 'Filter Change'
+      } else {
+        viz.filterBehavior = 'Apply Button'
+      }
+
+      delete viz.hide
+    }
+    // 'filter-dropdowns' was renamed to 'dashboardFilters' for clarity
+    if (viz.type === 'filter-dropdowns') viz.type = 'dashboardFilters'
+    if (viz.visualizationType === 'filter-dropdowns') viz.visualizationType = 'dashboardFilters'
+    newVisualizations[vizKey] = viz
+  })
+
+  if (config.dashboard.sharedFilters.length && !Object.values(newVisualizations).find((v: AnyVisualization) => v.type === 'dashboardFilters')) {
+    const newViz = {
+      type: 'dashboardFilters',
+      visualizationType: 'dashboardFilters',
+      sharedFilterIndexes: config.dashboard.sharedFilters.map((_sf, i) => i),
+      filterBehavior: config.filterBehavior || 'Filter Change'
+    }
+    const key = 'legacySharedFilters'
+    newVisualizations[key] = newViz
+    const newRow = {
+      columns: [
+        {
+          width: 12,
+          widget: key
+        }
+      ]
+    }
+    config.rows = [newRow, ...config.rows]
+  }
+  // if there's no dashboardFilters visualization but there are sharedFilters create a visualization and update rows.
+
+  config.visualizations = newVisualizations
+}
+
+const mapUpdates = newConfig => {
+  // When switching between old version of equal number, and the revised equal number opt in, roundToPlace needs to be set.
+  // There wasn't an initial value set for this, and legends would return NaN if it wasn't set. ie. 0 - NAN instead of 0 - 1
+  const equalNumberRoundingPatch = newConfig => {
+    if (newConfig.type === 'map') {
+      if (newConfig.columns.primary.roundToPlace === undefined) {
+        newConfig.columns.primary.roundToPlace = 0
+      }
+    }
+  }
+
+  equalNumberRoundingPatch(newConfig)
+
+  return newConfig
+}
+
+const update_4_24_7 = config => {
+  const ver = '4.24.7'
+
+  const newConfig = _.cloneDeep(config)
+
+  mapUpdates(newConfig)
+  dashboardFiltersMigrate(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+export default update_4_24_7

packages/core/types/General.ts

@@ -10,4 +10,5 @@ export type General = {
   showSuppressedSymbol: boolean
   showZeroValueDataLabel: boolean
   showAnnotationDropdown?: boolean
+  title: string
 }

packages/core/types/Visualization.ts

@@ -4,26 +4,28 @@ import { Column } from './Column'
 import { Series } from './Series'
 import { Table } from './Table'
 import { ConfidenceInterval } from './ConfidenceInterval'
-import { BaseVisualizationType } from './BaseVisualizationType'
 import { ConfigureData } from './ConfigureData'
 import { VizFilter } from './VizFilter'
 import { FilterBehavior } from './FilterBehavior'
 import { General } from './General'
 import { Runtime } from './Runtime'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 
-export type Visualization = ConfigureData & {
-  autoLoad: boolean
+// This was originally created as a catchall for the different types of visualizations.
+// Currently it includes properties that ares specific to one Visualization type.
+// We should avoid adding any new property to this type unless it is used by all visualizations.
+// We should refactor it also to remove properties that are not used by all visualizations.
+// See AnyVisualization type below...
+type DeprecatedVisualizationType = {
   columns: Record<string, Partial<Column>>
   confidenceKeys: ConfidenceInterval
   dataFileName: string
   dataFileSourceType: string
   dataFormat: any
   datasets: Record<string, any>
-  editing: boolean
   filterBehavior: FilterBehavior
   filters: VizFilter[]
   general: General
-  hide: number[]
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
@@ -32,15 +34,32 @@ export type Visualization = ConfigureData & {
   originalFormattedData: any
   runtime?: Runtime
   series: Series
-  showEditorPanel: boolean
   table: Table
   theme: string
   title: string
-  type: BaseVisualizationType
-  uid: string // this is the actual key of the visualization object
+  type: 'dashboard' | 'chart' | 'footnotes' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'table' | 'navigation'
   usesSharedFilter: any
   visualizationSubType: string
   visualizationType: string
   xAxis: Axis
   preliminaryData: { type: 'effect' | 'suppression'; value: string }[]
 }
+
+type StatefulProperties = {
+  editing: boolean
+  newViz: boolean
+}
+
+export type CommonVisualizationProperties = Partial<StatefulProperties> & {
+  showEditorPanel?: boolean
+  uid?: string // this is the actual key of the visualization object
+  visualizationType?: string
+} & Partial<ConfigureData>
+
+export type Visualization = DeprecatedVisualizationType & CommonVisualizationProperties
+
+// This type is used as a catchall for the different types of visualizations.
+// We should create a specific type for each visualization type and add it to this list.
+// We will remove Visualization from this list once we have all union types listed.
+// All of the New types will extend CommonVisualizationProperties.
+export type AnyVisualization = Visualization | DashboardFilters

packages/core/types/VizFilter.ts

@@ -19,6 +19,6 @@ export type GeneralFilter = FilterBase & {
 export type MultiSelectFilter = {
   active: string[]
   selectLimit: number
-} & GeneralFilter
+} & Omit<GeneralFilter, 'active'>
 
 export type VizFilter = GeneralFilter | MultiSelectFilter