Skip to content

Commit b2f15a1

Browse files
Chenglong-MSChenglong-MS
authored
Merge pull request #89 from noless3011/multiple-table-concat
Add and manipulate multiple table (dev)
2 parents ef13c56 + 1220441 commit b2f15a1

File tree

2 files changed

+298
-279
lines changed

2 files changed

+298
-279
lines changed

‎src/app/App.tsx

Lines changed: 75 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, { FC, useEffect, useState } from 'react';
55
import '../scss/App.scss';
66

77
import { useDispatch, useSelector } from "react-redux";
8-
import {
8+
import {
99
DataFormulatorState,
1010
dfActions,
1111
fetchAvailableModels,
@@ -58,6 +58,7 @@ import { ActionSubscription, subscribe, unsubscribe } from './embed';
5858
import dfLogo from '../assets/df-logo.png';
5959
import { Popup } from '../components/Popup';
6060
import { ModelSelectionButton } from '../views/ModelSelectionDialog';
61+
import { TableCopyDialogV2 } from '../views/TableSelectionView';
6162

6263
const AppBar = styled(MuiAppBar)(({ theme }) => ({
6364
color: 'black',
@@ -70,7 +71,7 @@ const AppBar = styled(MuiAppBar)(({ theme }) => ({
7071
}),
7172
}));
7273

73-
declare module '@mui/material/styles' {
74+
declare module '@mui/material/styles' {
7475
interface Palette {
7576
derived: Palette['primary'];
7677
custom: Palette['primary'];
@@ -97,52 +98,52 @@ export const ImportStateButton: React.FC<{}> = ({ }) => {
9798
let savedState = JSON.parse(text);
9899
dispatch(dfActions.loadState(savedState));
99100
} catch {
100-
101+
101102
}
102103
});
103104
}
104105
}
105106
};
106107

107-
108+
108109
return <Tooltip title="load a saved session">
109-
<Button variant="text" color="primary"
110-
//endIcon={<InputIcon />}
111-
>
112-
<Input inputProps={{ accept: '.dfstate', multiple: false }} id="upload-data-file"
113-
type="file" sx={{ display: 'none' }} aria-hidden={true}
114-
ref={$uploadStateFile} onChange={handleFileUpload}
115-
/>
116-
Import
117-
</Button>
118-
</Tooltip>;
110+
<Button variant="text" color="primary"
111+
//endIcon={<InputIcon />}
112+
>
113+
<Input inputProps={{ accept: '.dfstate', multiple: false }} id="upload-data-file"
114+
type="file" sx={{ display: 'none' }} aria-hidden={true}
115+
ref={$uploadStateFile} onChange={handleFileUpload}
116+
/>
117+
Import
118+
</Button>
119+
</Tooltip>;
119120
}
120121

121-
export const ExportStateButton: React.FC<{}> = ({}) => {
122+
export const ExportStateButton: React.FC<{}> = ({ }) => {
122123
const fullStateJson = useSelector((state: DataFormulatorState) => JSON.stringify(state));
123-
124+
124125
return <Tooltip title="save session locally">
125-
<Button variant="text" onClick={()=>{
126+
<Button variant="text" onClick={() => {
126127
function download(content: string, fileName: string, contentType: string) {
127-
let a = document.createElement("a");
128-
let file = new Blob([content], {type: contentType});
129-
a.href = URL.createObjectURL(file);
130-
a.download = fileName;
131-
a.click();
132-
}
133-
download(fullStateJson, `data-formulator.${new Date().toISOString()}.dfstate`, 'text/plain');
134-
}}
135-
//endIcon={<OutputIcon />}
128+
let a = document.createElement("a");
129+
let file = new Blob([content], { type: contentType });
130+
a.href = URL.createObjectURL(file);
131+
a.download = fileName;
132+
a.click();
133+
}
134+
download(fullStateJson, `data-formulator.${new Date().toISOString()}.dfstate`, 'text/plain');
135+
}}
136+
//endIcon={<OutputIcon />}
136137
>
137-
Export
138+
Export
138139
</Button>
139140
</Tooltip>
140141
}
141142

142143

143144
//type AppProps = ConnectedProps<typeof connector>;
144145

145-
export const toolName = "Data Formulator"
146+
export const toolName = "Data Formulator"
146147

147148
export interface AppFCProps {
148149
}
@@ -154,12 +155,12 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
154155
const tables = useSelector((state: DataFormulatorState) => state.tables);
155156

156157
// if the user has logged in
157-
const [userInfo, setUserInfo] = useState<{name: string, userId: string} | undefined>(undefined);
158+
const [userInfo, setUserInfo] = useState<{ name: string, userId: string } | undefined>(undefined);
158159

159-
const [popupConfig, setPopupConfig] = useState<PopupConfig>({ });
160+
const [popupConfig, setPopupConfig] = useState<PopupConfig>({});
160161

161162
const dispatch = useDispatch<AppDispatch>();
162-
163+
163164
useEffect(() => {
164165
const subscription: ActionSubscription = {
165166
loadData: (table: DictTable) => {
@@ -179,23 +180,23 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
179180

180181
useEffect(() => {
181182
fetch('/.auth/me')
182-
.then(function(response) { return response.json(); })
183-
.then(function(result) {
184-
if (Array.isArray(result) && result.length > 0) {
185-
let authInfo = result[0];
186-
let userInfo = {
187-
name: authInfo['user_claims'].find((item: any) => item.typ == 'name')?.val || '',
188-
userId: authInfo['user_id']
183+
.then(function (response) { return response.json(); })
184+
.then(function (result) {
185+
if (Array.isArray(result) && result.length > 0) {
186+
let authInfo = result[0];
187+
let userInfo = {
188+
name: authInfo['user_claims'].find((item: any) => item.typ == 'name')?.val || '',
189+
userId: authInfo['user_id']
190+
}
191+
setUserInfo(userInfo);
192+
// console.log("logging info")
193+
// console.log(userInfo);
189194
}
190-
setUserInfo(userInfo);
191-
// console.log("logging info")
192-
// console.log(userInfo);
193-
}
194-
195-
}).catch(err => {
196-
//user is not logged in, do not show logout button
197-
//console.error(err)
198-
});
195+
196+
}).catch(err => {
197+
//user is not logged in, do not show logout button
198+
//console.error(err)
199+
});
199200
}, [])
200201

201202
const [resetDialogOpen, setResetDialogOpen] = useState<boolean>(false);
@@ -264,18 +265,20 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
264265

265266
let appBar = [
266267
<AppBar className="app-bar" position="static" key="app-bar-main">
267-
<Toolbar variant="dense" sx={{backgroundColor: betaMode ? 'lavender' : ''}}>
268-
<Button href={"/"} sx={{display: "flex", flexDirection: "row", textTransform: "none",
269-
backgroundColor: 'transparent',
270-
"&:hover": {
271-
backgroundColor: "transparent"
272-
}}} color="inherit">
273-
<Box component="img" sx={{ height: 32, marginRight: "12px"}} alt="" src={dfLogo} />
268+
<Toolbar variant="dense" sx={{ backgroundColor: betaMode ? 'lavender' : '' }}>
269+
<Button href={"/"} sx={{
270+
display: "flex", flexDirection: "row", textTransform: "none",
271+
backgroundColor: 'transparent',
272+
"&:hover": {
273+
backgroundColor: "transparent"
274+
}
275+
}} color="inherit">
276+
<Box component="img" sx={{ height: 32, marginRight: "12px" }} alt="" src={dfLogo} />
274277
<Typography variant="h6" noWrap component="h1" sx={{ fontWeight: 300, display: { xs: 'none', sm: 'block' } }}>
275-
{toolName} {betaMode ? "β" : ""} {process.env.NODE_ENV == "development" ? "" : ""}
278+
{toolName} {betaMode ? "β" : ""} {process.env.NODE_ENV == "development" ? "" : ""}
276279
</Typography>
277280
</Button>
278-
<Box sx={{ flexGrow: 1, textAlign: 'center', display: 'flex', justifyContent: 'center' }} >
281+
<Box sx={{ flexGrow: 1, textAlign: 'center', display: 'flex', justifyContent: 'center' }} >
279282
{switchers}
280283
</Box>
281284
<Box sx={{ display: 'flex', fontSize: 14 }}>
@@ -286,28 +289,30 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
286289
<Divider orientation="vertical" variant="middle" flexItem /> */}
287290
<ModelSelectionButton />
288291
<Divider orientation="vertical" variant="middle" flexItem />
292+
<TableCopyDialogV2 buttonElement={"ADD TABLE"} disabled={false} />
293+
<Divider orientation="vertical" variant="middle" flexItem />
289294
<ExportStateButton />
290295
<ImportStateButton />
291296
<Divider orientation="vertical" variant="middle" flexItem />
292-
<Button variant="text" onClick={()=>{setResetDialogOpen(true)}} endIcon={<PowerSettingsNewIcon />}>
297+
<Button variant="text" onClick={() => { setResetDialogOpen(true) }} endIcon={<PowerSettingsNewIcon />}>
293298
Reset session
294299
</Button>
295-
<Popup popupConfig={popupConfig} appConfig={appConfig} table={tables[0]} />
296-
<Dialog onClose={()=>{setResetDialogOpen(false)}} open={resetDialogOpen}>
297-
<DialogTitle sx={{display: "flex", alignItems: "center"}}>Reset Session?</DialogTitle>
300+
<Popup popupConfig={popupConfig} appConfig={appConfig} table={tables[0]} />
301+
<Dialog onClose={() => { setResetDialogOpen(false) }} open={resetDialogOpen}>
302+
<DialogTitle sx={{ display: "flex", alignItems: "center" }}>Reset Session?</DialogTitle>
298303
<DialogContent>
299304
<DialogContentText>
300305
<Typography>All unexported content (charts, derived data, concepts) will be lost upon reset.</Typography>
301306
</DialogContentText>
302307
</DialogContent>
303308
<DialogActions>
304-
<Button onClick={()=>{dispatch(dfActions.resetState()); setResetDialogOpen(false);}} endIcon={<PowerSettingsNewIcon />}>reset session </Button>
305-
<Button onClick={()=>{setResetDialogOpen(false);}}>cancel</Button>
309+
<Button onClick={() => { dispatch(dfActions.resetState()); setResetDialogOpen(false); }} endIcon={<PowerSettingsNewIcon />}>reset session </Button>
310+
<Button onClick={() => { setResetDialogOpen(false); }}>cancel</Button>
306311
</DialogActions>
307312
</Dialog>
308313
{userInfo && <>
309314
<Divider orientation="vertical" variant="middle" flexItem />
310-
<Divider orientation="vertical" variant="middle" flexItem sx={{marginRight: "6px"}} />
315+
<Divider orientation="vertical" variant="middle" flexItem sx={{ marginRight: "6px" }} />
311316
<Avatar key="user-avatar" {...stringAvatar(userInfo?.name || 'U')} />
312317
<Button variant="text" className="ml-auto" href="/.auth/logout">Sign out</Button>
313318
</>}
@@ -351,15 +356,15 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
351356
element: <About />,
352357
}, {
353358
path: "*",
354-
element: <DataFormulatorFC />,
355-
errorElement: <Box sx={{width: "100%", height: "100%", display: "flex"}}>
356-
<Typography color="gray" sx={{margin: "150px auto"}}>An error has occurred, please <Link href="/">refresh the session</Link>. If the problem still exists, click close session.</Typography>
357-
</Box>
359+
element: <DataFormulatorFC />,
360+
errorElement: <Box sx={{ width: "100%", height: "100%", display: "flex" }}>
361+
<Typography color="gray" sx={{ margin: "150px auto" }}>An error has occurred, please <Link href="/">refresh the session</Link>. If the problem still exists, click close session.</Typography>
362+
</Box>
358363
}
359364
]);
360365

361-
let app =
362-
<Box sx={{ flexGrow: 1, height: '100%', overflow: "hidden", display: "flex", flexDirection: "column"}}>
366+
let app =
367+
<Box sx={{ flexGrow: 1, height: '100%', overflow: "hidden", display: "flex", flexDirection: "column" }}>
363368
{appBar}
364369
<RouterProvider router={router} />
365370
<MessageSnackbar />
@@ -376,7 +381,7 @@ function stringAvatar(name: string) {
376381
let displayName = ""
377382
try {
378383
let nameSplit = name.split(' ')
379-
displayName = `${nameSplit[0][0]}${nameSplit.length > 1 ? nameSplit[nameSplit.length-1][0] : ''}`
384+
displayName = `${nameSplit[0][0]}${nameSplit.length > 1 ? nameSplit[nameSplit.length - 1][0] : ''}`
380385
} catch {
381386
displayName = name ? name[0] : "?";
382387
}

0 commit comments

Comments
 (0)