1- import { createContext , useEffect , useMemo , useState } from 'react' ;
1+ import {
2+ createContext , useEffect , useMemo , useState ,
3+ } from 'react' ;
24
3- import { UpsetProvenance , UpsetActions , getActions , initializeProvenanceTracking } from '@visdesignlab/upset2-react' ;
5+ import {
6+ UpsetProvenance , UpsetActions , getActions , initializeProvenanceTracking ,
7+ } from '@visdesignlab/upset2-react' ;
48import { useRecoilValue , useSetRecoilState } from 'recoil' ;
9+ import { BrowserRouter , Route , Routes } from 'react-router-dom' ;
10+ import { convertConfig , DefaultConfig , UpsetConfig } from '@visdesignlab/upset2-core' ;
11+ import { CircularProgress } from '@mui/material' ;
12+ import { ProvenanceGraph } from '@trrack/core/graph/graph-slice' ;
513import { dataSelector , encodedDataAtom } from './atoms/dataAtom' ;
614import { Root } from './components/Root' ;
7- import { BrowserRouter , Route , Routes } from 'react-router-dom' ;
815import { DataTable } from './components/DataTable' ;
9- import { convertConfig , DefaultConfig , UpsetConfig } from '@visdesignlab/upset2-core' ;
1016import { configAtom } from './atoms/configAtoms' ;
1117import { queryParamAtom } from './atoms/queryParamAtom' ;
1218import { getMultinetSession } from './api/session' ;
13- import { CircularProgress } from '@mui/material' ;
14- import { ProvenanceGraph } from '@trrack/core/graph/graph-slice' ;
1519
1620/** @jsxImportSource @emotion /react */
1721// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,60 +33,60 @@ function App() {
2933 const multinetData = useRecoilValue ( dataSelector ) ;
3034 const encodedData = useRecoilValue ( encodedDataAtom ) ;
3135 const setState = useSetRecoilState ( configAtom ) ;
32- const data = ( encodedData === null ) ? multinetData : encodedData
36+ const data = ( encodedData === null ) ? multinetData : encodedData ;
3337 const { workspace, sessionId } = useRecoilValue ( queryParamAtom ) ;
3438 const [ sessionState , setSessionState ] = useState < SessionState > ( null ) ; // null is not tried to load, undefined is tried and no state to load, and value is loaded value
3539
3640 const conf = useMemo ( ( ) => {
37- const config : UpsetConfig = { ...DefaultConfig }
41+ const config : UpsetConfig = { ...DefaultConfig } ;
3842 if ( data !== null ) {
39- const conf : UpsetConfig = JSON . parse ( JSON . stringify ( config ) )
43+ const newConf : UpsetConfig = JSON . parse ( JSON . stringify ( config ) ) ;
4044 if ( config . visibleSets . length === 0 ) {
4145 const setList = Object . entries ( data . sets ) ;
42- conf . visibleSets = setList . slice ( 0 , defaultVisibleSets ) . map ( ( set ) => set [ 0 ] ) // get first 6 set names
43- conf . allSets = setList . map ( ( set ) => { return { name : set [ 0 ] , size : set [ 1 ] . size } } )
46+ newConf . visibleSets = setList . slice ( 0 , defaultVisibleSets ) . map ( ( set ) => set [ 0 ] ) ; // get first 6 set names
47+ newConf . allSets = setList . map ( ( set ) => ( { name : set [ 0 ] , size : set [ 1 ] . size } ) ) ;
4448 }
4549
4650 // Add first 4 attribute columns (deviation + 3 attrs) to visibleAttributes
47- conf . visibleAttributes = [ ...DefaultConfig . visibleAttributes , ...data . attributeColumns . slice ( 0 , 4 ) ] ;
51+ newConf . visibleAttributes = [ ...DefaultConfig . visibleAttributes , ...data . attributeColumns . slice ( 0 , 4 ) ] ;
4852
4953 // Default: a histogram for each attribute if no plots exist
50- if ( conf . plots . histograms . length + conf . plots . scatterplots . length === 0 ) {
51- conf . plots . histograms = data . attributeColumns . map ( ( attr ) => {
52- return {
53- attribute : attr ,
54- bins : 20 , // 20 bins is the default used in upset/.../AddPlot.tsx
55- type : 'Histogram' ,
56- frequency : false ,
57- id : Date . now ( ) . toString ( ) // Same calculation as in upset/.../AddPlot.tsx
58- }
59- } )
54+ if ( newConf . plots . histograms . length + newConf . plots . scatterplots . length === 0 ) {
55+ newConf . plots . histograms = data . attributeColumns . map ( ( attr ) => ( {
56+ attribute : attr ,
57+ bins : 20 , // 20 bins is the default used in upset/.../AddPlot.tsx
58+ type : 'Histogram' ,
59+ frequency : false ,
60+ id : Date . now ( ) . toString ( ) , // Same calculation as in upset/.../AddPlot.tsx
61+ } ) ) ;
6062 }
6163
62- return conf ;
64+ return newConf ;
6365 }
66+
67+ return config ;
6468 } , [ data ] ) ;
6569
6670 // Initialize Provenance and pass it setter to connect
6771 const { provenance, actions } = useMemo ( ( ) => {
6872 if ( sessionState ) {
69- const provenance : UpsetProvenance = initializeProvenanceTracking ( conf ) ;
70- const actions : UpsetActions = getActions ( provenance ) ;
73+ const prov : UpsetProvenance = initializeProvenanceTracking ( conf ?? undefined ) ;
74+ const act : UpsetActions = getActions ( prov ) ;
7175
7276 // Make sure the provenance state gets converted every time this is called
73- ( provenance as UpsetProvenance & { _getState : typeof provenance . getState } ) . _getState = provenance . getState ;
74- provenance . getState = ( ) => convertConfig (
75- ( provenance as UpsetProvenance & { _getState : typeof provenance . getState } ) . _getState ( )
77+ ( prov as UpsetProvenance & { _getState : typeof prov . getState } ) . _getState = prov . getState ;
78+ prov . getState = ( ) => convertConfig (
79+ ( prov as UpsetProvenance & { _getState : typeof prov . getState } ) . _getState ( ) ,
7680 ) ;
7781
7882 if ( sessionState && sessionState !== 'not found' ) {
79- provenance . importObject ( structuredClone ( sessionState ) ) ;
83+ prov . importObject ( structuredClone ( sessionState ) ) ;
8084 }
8185
8286 // Make sure the config atom stays up-to-date with the provenance
83- provenance . currentChange ( ( ) => setState ( provenance . getState ( ) ) ) ;
87+ prov . currentChange ( ( ) => setState ( prov . getState ( ) ) ) ;
8488
85- return { provenance : provenance , actions : actions } ;
89+ return { provenance : prov , actions : act } ;
8690 }
8791 return { provenance : null , actions : null } ;
8892 } , [ conf , setState , sessionState ] ) ;
@@ -108,31 +112,29 @@ function App() {
108112 update ( ) ;
109113 } , [ sessionId , workspace ] ) ;
110114
115+ const provContext = useMemo ( ( ) => ( provenance && actions ? { provenance, actions } : null ) , [ provenance , actions ] ) ;
116+
111117 // Update the state on first render and if the provenance object changes
112- useEffect ( ( ) => { if ( provenance ?. getState ( ) ) setState ( provenance ?. getState ( ) ) } , [ provenance , setState ] ) ;
118+ useEffect ( ( ) => { if ( provenance ?. getState ( ) ) setState ( provenance ?. getState ( ) ) ; } , [ provenance , setState ] ) ;
113119
114120 return (
115121 < BrowserRouter >
116- { provenance ?
122+ { ( provenance && provContext ) ?
117123 < ProvenanceContext . Provider
118- value = { {
119- provenance,
120- actions,
121- } }
124+ value = { provContext }
122125 >
123126 < Routes >
124127 < Route path = "*" element = { < Root provenance = { provenance } actions = { actions } data = { null } config = { conf } /> } />
125128 < Route path = "/" element = { < Root provenance = { provenance } actions = { actions } data = { data } config = { conf } /> } />
126129 < Route path = "/datatable" element = { < DataTable /> } />
127130 </ Routes >
128131 </ ProvenanceContext . Provider >
129- :
132+ :
130133 < Routes >
131134 < Route path = "*" element = { < CircularProgress /> } />
132135 < Route path = "/" element = { < CircularProgress /> } />
133136 < Route path = "/datatable" element = { < DataTable /> } />
134- </ Routes >
135- }
137+ </ Routes > }
136138 </ BrowserRouter >
137139 ) ;
138140}
0 commit comments