import { ConnectedSpace } from '@/services/data/tuples/connected-space-types' ; import { Dashboard } from '@/services/data/tuples/dashboard-types' ; import { Report } from '@/services/data/tuples/report-types' ; import React , { useEffect , useState } from 'react' ; import { Controllers } from './controllers' ; import { Funnels } from './funnels' ; import { Palette } from './palette' ; export const Reports = ( props ) => { const { connectedSpaces , dashboard , transient , removable } = props ; const [ displayReports , setDisplayReports ] = useState < Array < Report > > ( [ ] ) ; useEffect ( ( ) => { const reportDefs = connectedSpaces . reduce ( ( map , connectedSpace ) => { connectedSpace . subjects . forEach ( subject => ( subject . reports || [ ] ) . forEach ( report => map . set ( report . reportId , report ) ) ) ; return map ; } , new Map < string , Report > ( ) ) ; const displayReports = ( dashboard . reports || [ ] ) . map ( dashboardReport => { const report = reportDefs . get ( dashboardReport . reportId ) ; if ( report != null ) { return { ... ( JSON . parse ( JSON . stringify ( report ) ) ) , rect : dashboardReport . rect } ; } else { return null ; } } ) . filter ( x => ! ! x ) as Array < Report > ; setDisplayReports ( displayReports ) ; } , [ connectedSpaces , dashboard . reports ] ) ; return < > < Palette dashboard = { dashboard } reports = { displayReports } removable = { removable } / > < Funnels connectedSpaces = { connectedSpaces } dashboard = { dashboard } reports = { displayReports } transient = { transient } / > < Controllers dashboard = { dashboard } reports = { displayReports } transient = { transient } / > < />; } ;