Skip to content

Commit 4b3f32d

Browse files
JackColquittJackColquitt
authored
Merge pull request #82 from trustgraph-ai/feature-dark-mode
Re-theme portal in dark mode
2 parents 1b2212f + 9056817 commit 4b3f32d

File tree

9 files changed

+200
-60
lines changed

9 files changed

+200
-60
lines changed

‎src/main.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
import { StrictMode } from 'react'
22
import { createRoot } from 'react-dom/client'
3+
4+
import CssBaseline from '@mui/material/CssBaseline';
5+
import { ThemeProvider } from '@mui/material/styles';
6+
37
import App from './App.tsx'
48
import './index.css'
59

10+
import { tgTheme } from './theme.tsx';
11+
612
createRoot(document.getElementById('root')!).render(
713
<StrictMode>
8-
<App />
14+
<ThemeProvider theme={tgTheme}>
15+
<CssBaseline enableColorScheme/>
16+
<App />
17+
</ThemeProvider>
918
</StrictMode>,
1019
)

‎src/simple-editor/agents/ConfigureAgents.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const ConfigureAgents = ({
5656
<Box>
5757

5858
<Typography variant="h5" component="h2" gutterBottom>
59-
Configure Tools
59+
Agent Tools
6060
</Typography>
6161

6262
<AgentControls

‎src/simple-editor/configuration/Additional.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,17 @@ const Additional = ({
1313
Optional Customization
1414
</Typography>
1515

16+
<Typography variant="body2" gutterBottom>
17+
Below are selectable customizations for your specific use
18+
cases. If selected, a new tab will open with all available
19+
customization options. If no options are selected, TrustGraph
20+
will deploy with the system defaults.
21+
</Typography>
22+
1623
<Typography variant="body2">
17-
Below are modules which can be customized for your specific use
18-
case. Select a module to open a tab with module customization
19-
instructions. For any module not selected, the TrustGraph deployment
20-
will be built with the standard module configuration.
24+
Note: Selecting the Data Workbench requires no additional configuration.
2125
</Typography>
26+
2227
</Box>
2328

2429
<Options/>

‎src/simple-editor/deployment/Deployment.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@ const Deployment: React.FC<DeploymentProps> = ({
4848
<DeploymentConfig/>
4949
</Box>
5050

51-
<Box>
52-
<DeploymentInstructions/>
53-
</Box>
54-
5551
{
5652
options.has(CONFIGURE_WORKBENCH) && (
5753
<Box>
@@ -60,6 +56,10 @@ const Deployment: React.FC<DeploymentProps> = ({
6056
)
6157
}
6258

59+
<Box>
60+
<DeploymentInstructions/>
61+
</Box>
62+
6363
</Box>
6464

6565
</>

‎src/simple-editor/deployment/DeploymentCode.tsx

+27-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
11

2-
import React from 'react'
2+
import React from 'react';
3+
import { styled } from '@mui/material/styles';
4+
import Typography from '@mui/material/Typography';
5+
import Paper from '@mui/material/Paper';
36

47
interface DeploymentCodeProps extends React.PropsWithChildren {
5-
children : React.ReactNode;
8+
children: React.ReactNode;
69
};
710

8-
const DeploymentCode : React.FC<DeploymentCodeProps> =
9-
({children}) => {
11+
const StyledPaper = styled(Paper)(({ theme }) => ({
12+
backgroundColor: theme.palette.grey[900], // Deep grey background for dark theme
13+
padding: theme.spacing(2), // Add some padding inside the paper
14+
borderRadius: theme.shape.borderRadius, // Use theme's border radius
15+
overflowX: 'auto', // Allow horizontal scrolling for long code blocks
16+
17+
}));
18+
19+
const StyledTypography = styled(Typography)(({ theme }) => ({
20+
color: theme.palette.grey[100], // Light grey color for code text
21+
fontFamily: 'monospace', // Monospace font for code
22+
whiteSpace: 'pre-wrap', // Allow line breaks within the pre tag
23+
wordBreak: 'break-word',
24+
}));
25+
26+
const DeploymentCode: React.FC<DeploymentCodeProps> = ({ children }) => {
1027
return (
11-
<pre>
28+
<StyledPaper elevation={3}>
29+
<StyledTypography variant="body2">
1230
{children}
13-
</pre>
31+
</StyledTypography>
32+
</StyledPaper>
1433
);
15-
}
16-
17-
export default DeploymentCode;
34+
};
1835

36+
export default DeploymentCode;

‎src/simple-editor/deployment/DeploymentEnvVars.tsx

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11

22
import React from 'react'
3+
import { styled } from '@mui/material/styles';
4+
import Typography from '@mui/material/Typography';
5+
import Paper from '@mui/material/Paper';
36

47
interface DeploymentEnvVarsProps {
58
variables : {
@@ -8,11 +11,27 @@ interface DeploymentEnvVarsProps {
811
}[];
912
};
1013

14+
const StyledPaper = styled(Paper)(({ theme }) => ({
15+
backgroundColor: theme.palette.grey[900], // Deep grey background for dark theme
16+
padding: theme.spacing(2), // Add some padding inside the paper
17+
borderRadius: theme.shape.borderRadius, // Use theme's border radius
18+
overflowX: 'auto', // Allow horizontal scrolling for long code blocks
19+
20+
}));
21+
22+
const StyledTypography = styled(Typography)(({ theme }) => ({
23+
color: theme.palette.grey[100], // Light grey color for code text
24+
fontFamily: 'monospace', // Monospace font for code
25+
whiteSpace: 'pre-wrap', // Allow line breaks within the pre tag
26+
wordBreak: 'break-word',
27+
}));
28+
1129
const DeploymentEnvVars : React.FC<DeploymentEnvVarsProps> =
1230
({variables}) => {
1331

1432
return (
15-
<pre>
33+
<StyledPaper elevation={3}>
34+
<StyledTypography variant="body2">
1635
{
1736
variables.map(
1837
(va) => {
@@ -27,7 +46,8 @@ const DeploymentEnvVars : React.FC<DeploymentEnvVarsProps> =
2746
}
2847
)
2948
}
30-
</pre>
49+
</StyledTypography>
50+
</StyledPaper>
3151
);
3252
}
3353

‎src/simple-editor/deployment/DeploymentWorkbench.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Insights } from '@mui/icons-material';
99
import DeploymentCode from './DeploymentCode';
1010
import DeploymentStep from './DeploymentStep';
1111

12-
const DeploymentInstructions: React.FC<{}> = ({
12+
const DeploymentWorkbench: React.FC<{}> = ({
1313
}) => {
1414

1515
return (
@@ -25,14 +25,14 @@ const DeploymentInstructions: React.FC<{}> = ({
2525
>
2626
<Insights color="primary" fontSize="large"/>
2727
<Typography variant="h6" component="h3">
28-
Workbench UI
28+
Data Workbench
2929
</Typography>
3030
</Stack>
3131

3232
<DeploymentStep>
3333

3434
Once the system is running, you can access the
35-
Workbench UI on port 8888, or access using the
35+
Data Workbench on port 8888, or access using the
3636
following URL:
3737

3838
</DeploymentStep>
@@ -59,5 +59,5 @@ const DeploymentInstructions: React.FC<{}> = ({
5959

6060
};
6161

62-
export default DeploymentInstructions;
62+
export default DeploymentWorkbench;
6363

‎src/simple-editor/options/Options.tsx

+96-35
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,92 @@
1-
2-
3-
import { Stack } from '@mui/material';
4-
import { Psychology, ChatBubble, Insights } from '@mui/icons-material';
1+
import React from 'react';
2+
import { Stack, Typography, Box, Switch, styled } from '@mui/material';
53
import { useDeploymentStore } from '../state/Deployment';
6-
74
import {
85
useOptionsStore, CONFIGURE_PROMPTS, CONFIGURE_AGENTS,
96
CONFIGURE_WORKBENCH,
107
} from '../state/Options';
118

12-
import Option from './Option';
9+
interface OptionProps extends React.PropsWithChildren {
10+
enabled: boolean;
11+
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
12+
title: string;
13+
}
14+
15+
const StyledOption = styled(Box, {
16+
shouldForwardProp: (prop) => prop !== 'selected',
17+
})<{ selected: boolean }>(({ theme, selected }) => ({
18+
display: 'flex',
19+
flexDirection: 'column',
20+
padding: theme.spacing(2),
21+
borderRadius: theme.shape.borderRadius,
22+
backgroundColor: selected ? theme.palette.primary.main : theme.palette.background.paper,
23+
color: selected ? theme.palette.primary.contrastText : theme.palette.text.primary,
24+
border: `1px solid ${theme.palette.divider}`,
25+
minWidth: '200px',
26+
maxWidth: '350px',
27+
flex: '1 1 auto',
28+
transition: 'background-color 0.3s ease, color 0.3s ease',
29+
[theme.breakpoints.down('sm')]: {
30+
minWidth: '90%',
31+
maxWidth: '100%',
32+
}
33+
}));
34+
35+
const StyledOptionTitle = styled(Typography)(({ theme }) => ({
36+
fontWeight: 600,
37+
marginBottom: theme.spacing(1),
38+
display: 'flex',
39+
alignItems: 'center',
40+
justifyContent: 'space-between',
41+
}));
42+
43+
const StyledOptionDescription = styled(Typography)(() => ({ // Fixed: Removed theme parameter since not used
44+
whiteSpace: 'normal',
45+
wordBreak: 'break-word',
46+
}));
47+
48+
49+
const StyledSwitch = styled(Switch)(({ theme }) => ({
50+
'& .MuiSwitch-switchBase.Mui-checked': {
51+
color: theme.palette.secondary.main,
52+
'&:hover': {
53+
backgroundColor: theme.palette.secondary.main + '08',
54+
},
55+
},
56+
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
57+
backgroundColor: theme.palette.secondary.main,
58+
},
59+
'& .MuiSwitch-thumb': {
60+
backgroundColor: theme.palette.common.white,
61+
},
62+
'& .MuiSwitch-track': {
63+
backgroundColor: theme.palette.grey[500],
64+
}
65+
}));
1366

14-
const ParamsForm: React.FC = ({
15-
}) => {
1667

17-
const options = useOptionsStore((state) => state.options);
68+
const Option: React.FC<OptionProps> = ({ enabled, onChange, title, children }) => {
69+
return (
70+
<StyledOption selected={enabled}>
71+
<StyledOptionTitle variant="h6">
72+
<Typography variant="h6" component="h3">
73+
{title}
74+
</Typography>
75+
<StyledSwitch checked={enabled} onChange={onChange} inputProps={{ 'aria-label': 'controlled' }} />
76+
</StyledOptionTitle>
77+
<StyledOptionDescription variant="body2">
78+
{children}
79+
</StyledOptionDescription>
80+
81+
</StyledOption>
82+
);
83+
};
1884

19-
const setOptions = useOptionsStore((state) => state.setOptions);
2085

21-
const setConfigUrl =
22-
useDeploymentStore((state) => state.setConfigUrl);
86+
const ParamsForm: React.FC = () => {
87+
const options = useOptionsStore((state) => state.options);
88+
const setOptions = useOptionsStore((state) => state.setOptions);
89+
const setConfigUrl = useDeploymentStore((state) => state.setConfigUrl);
2390

2491
useOptionsStore.subscribe(() => {
2592
setConfigUrl("");
@@ -29,7 +96,7 @@ const ParamsForm: React.FC = ({
2996
const configureAgents = options.has(CONFIGURE_AGENTS);
3097
const configureWorkbench = options.has(CONFIGURE_WORKBENCH);
3198

32-
const set = (o : string, value : boolean) => {
99+
const set = (o: string, value: boolean) => {
33100
if (value) {
34101
const opts = new Set(options);
35102
opts.add(o);
@@ -41,29 +108,29 @@ const ParamsForm: React.FC = ({
41108
}
42109
}
43110

44-
const onConfigurePrompts = () => {
45-
set(CONFIGURE_PROMPTS, !configurePrompts);
111+
const onConfigurePrompts = (event: React.ChangeEvent<HTMLInputElement>) => {
112+
set(CONFIGURE_PROMPTS, event.target.checked);
46113
};
47114

48-
const onConfigureAgents = () => {
49-
set(CONFIGURE_AGENTS, !configureAgents);
115+
const onConfigureAgents = (event: React.ChangeEvent<HTMLInputElement>) => {
116+
set(CONFIGURE_AGENTS, event.target.checked);
50117
};
51118

52-
const onConfigureWorkbench = () => {
53-
set(CONFIGURE_WORKBENCH, !configureWorkbench);
119+
const onConfigureWorkbench = (event: React.ChangeEvent<HTMLInputElement>) => {
120+
set(CONFIGURE_WORKBENCH, event.target.checked);
54121
};
55122

56123
return (
57124
<>
58-
59-
<Stack direction="row" spacing={2}
60-
sx={{flexWrap: 'wrap'}} useFlexGap
125+
<Stack
126+
direction="row"
127+
spacing={2}
128+
sx={{ flexWrap: 'wrap', width: '100%' }}
129+
useFlexGap
61130
>
62-
63131
<Option
64132
enabled={configurePrompts}
65133
onChange={onConfigurePrompts}
66-
avatar={<ChatBubble color="primary"/>}
67134
title="Data Extraction Prompts"
68135
>
69136
Tailor the LLM system prompts, data extraction prompts,
@@ -73,8 +140,7 @@ const ParamsForm: React.FC = ({
73140
<Option
74141
enabled={configureAgents}
75142
onChange={onConfigureAgents}
76-
avatar={<Psychology color="primary"/>}
77-
title="Agent Definitions"
143+
title="Agent Tools"
78144
>
79145
Add Agents that use a ReAct approach. Customize the
80146
Agent definitions, options, and arguments.
@@ -83,19 +149,14 @@ const ParamsForm: React.FC = ({
83149
<Option
84150
enabled={configureWorkbench}
85151
onChange={onConfigureWorkbench}
86-
avatar={<Insights color="primary"/>}
87-
title="Workbench UI"
152+
title="Data Workbench"
88153
>
89-
An experimental UI providing some tools to interact with
90-
data. Once launched, accessible on port 8888.
154+
An experimental UI providing tools to explore extracted
155+
data. Once launched, accessible on port 8888.
91156
</Option>
92-
93157
</Stack>
94-
95158
</>
96-
97159
);
98160
};
99161

100-
export default ParamsForm;
101-
162+
export default ParamsForm;

0 commit comments

Comments
 (0)