Skip to content

Commit 6e15d27

Browse files
BennuFireBennuFire
authored
Merge pull request #562 from neo4j-labs/task/newDesignQuickFixes
Quick Fixes and smells on 2.3.2
2 parents 3e80a9c + bbffe88 commit 6e15d27

File tree

22 files changed

+177
-106
lines changed

22 files changed

+177
-106
lines changed

‎src/card/view/CardViewHeader.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
22
import { Badge, CardHeader, Dialog, DialogContent, DialogTitle, TextField, Tooltip } from '@mui/material';
33
import debounce from 'lodash/debounce';
44
import { useCallback } from 'react';
5-
import { Close } from '@mui/icons-material';
5+
import { Close, ThirteenMp } from '@mui/icons-material';
66
import ReactMarkdown from 'react-markdown';
77
import gfm from 'remark-gfm';
88
import { replaceDashboardParameters } from '../../chart/ChartUtils';
@@ -17,6 +17,7 @@ import {
1717
CameraIconSolid,
1818
InformationCircleIconOutline,
1919
} from '@neo4j-ndl/react/icons';
20+
import { createTheme, ThemeProvider } from '@mui/material/styles';
2021

2122
const NeoCardViewHeader = ({
2223
title,
@@ -61,8 +62,20 @@ const NeoCardViewHeader = ({
6162
}
6263
}, [title]);
6364

65+
const theme = createTheme({
66+
typography: {
67+
fontFamily: "'Nunito Sans', sans-serif !important",
68+
allVariants: { color: 'rgb(var(--palette-neutral-text-weak))' },
69+
},
70+
palette: {
71+
text: {
72+
primary: 'rgb(var(--palette-neutral-text-weaker))',
73+
},
74+
},
75+
});
76+
6477
const cardTitle = (
65-
<>
78+
<ThemeProvider theme={theme}>
6679
<table style={{ width: '100%' }}>
6780
<tbody>
6881
<tr>
@@ -103,7 +116,7 @@ const NeoCardViewHeader = ({
103116
</tr>
104117
</tbody>
105118
</table>
106-
</>
119+
</ThemeProvider>
107120
);
108121

109122
const descriptionEnabled = description && description.length > 0;

‎src/chart/Utils.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,27 @@ export enum EntityType {
116116
Node,
117117
Relationship,
118118
}
119+
120+
export const themeNivo = {
121+
textColor: 'rgb(var(--palette-neutral-text-weak))',
122+
text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
123+
axis: {
124+
ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
125+
legend: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
126+
},
127+
legends: {
128+
text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
129+
title: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
130+
ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
131+
hidden: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
132+
},
133+
markers: {
134+
text: { fill: 'rgb(var(--palette-neutral-text-default))' },
135+
},
136+
labels: {
137+
text: { fill: 'rgb(var(--palette-neutral-text-default))' },
138+
},
139+
annotations: {
140+
text: { fill: 'rgb(var(--palette-neutral-text-default))' },
141+
},
142+
};

‎src/chart/bar/BarChart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { extensionEnabled } from '../../extensions/ExtensionUtils';
66
import { evaluateRulesOnDict, useStyleRules } from '../../extensions/styling/StyleRuleEvaluator';
77
import { ChartProps } from '../Chart';
88
import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
9+
import { themeNivo } from '../Utils';
910

1011
/**
1112
* Embeds a BarReport (from Nivo) into NeoDash.
@@ -210,6 +211,7 @@ const NeoBarChart = (props: ChartProps) => {
210211
const BarChartComponent = data.length > 30 ? ResponsiveBarCanvas : ResponsiveBar;
211212
const chart = (
212213
<BarChartComponent
214+
theme={themeNivo}
213215
data={data}
214216
key={`${selection.index}___${selection.value}`}
215217
layout={layout}

‎src/chart/line/LineChart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
toNumber,
1212
} from '../ChartUtils';
1313
import { extensionEnabled } from '../../extensions/ExtensionUtils';
14+
import { themeNivo } from '../Utils';
1415

1516
interface LineChartData {
1617
id: string;
@@ -192,6 +193,7 @@ const NeoLineChart = (props: ChartProps) => {
192193
const lineViz = (
193194
<div className='n-h-full n-w-full overflow-hidden'>
194195
<ResponsiveLine
196+
theme={themeNivo}
195197
data={data}
196198
xScale={
197199
isTimeChart

‎src/chart/parameter/ParameterSelectionChart.tsx

Lines changed: 106 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import NodePropertyParameterSelectComponent from './component/NodePropertyParame
55
import RelationshipPropertyParameterSelectComponent from './component/RelationshipPropertyParameterSelect';
66
import FreeTextParameterSelectComponent from './component/FreeTextParameterSelect';
77
import QueryParameterSelectComponent from './component/QueryParameterSelect';
8+
import { createTheme, ThemeProvider } from '@mui/material/styles';
89

910
/**
1011
* A special chart type to define global dashboard parameters that are injected as query parameters into each report.
@@ -36,96 +37,111 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
3637
return <p style={{ margin: '15px' }}>No selection specified.</p>;
3738
}
3839

39-
if (type == 'Free Text') {
40-
return (
41-
<FreeTextParameterSelectComponent
42-
parameterName={parameterName}
43-
parameterDisplayName={parameterName}
44-
parameterValue={parameterValue}
45-
parameterDisplayValue={parameterDisplayValue}
46-
setParameterValue={setParameterValue}
47-
setParameterDisplayValue={setParameterDisplayValue}
48-
query={query}
49-
queryCallback={queryCallback}
50-
settings={props.settings}
51-
allParameters={allParameters}
52-
compatibilityMode={compatibilityMode}
53-
manualParameterSave={manualParameterSave}
54-
/>
55-
);
56-
} else if (type == 'Node Property') {
57-
return (
58-
<NodePropertyParameterSelectComponent
59-
parameterName={parameterName}
60-
parameterDisplayName={parameterName}
61-
parameterValue={parameterValue}
62-
parameterDisplayValue={parameterDisplayValue}
63-
setParameterValue={setParameterValue}
64-
setParameterDisplayValue={setParameterDisplayValue}
65-
query={query}
66-
queryCallback={queryCallback}
67-
settings={props.settings}
68-
allParameters={allParameters}
69-
compatibilityMode={compatibilityMode}
70-
multiSelector={multiSelector}
71-
manualParameterSave={manualParameterSave}
72-
/>
73-
);
74-
} else if (type == 'Relationship Property') {
75-
return (
76-
<RelationshipPropertyParameterSelectComponent
77-
parameterName={parameterName}
78-
parameterDisplayName={parameterName}
79-
parameterValue={parameterValue}
80-
parameterDisplayValue={parameterDisplayValue}
81-
setParameterValue={setParameterValue}
82-
setParameterDisplayValue={setParameterDisplayValue}
83-
query={query}
84-
queryCallback={queryCallback}
85-
settings={props.settings}
86-
allParameters={allParameters}
87-
compatibilityMode={compatibilityMode}
88-
multiSelector={multiSelector}
89-
manualParameterSave={manualParameterSave}
90-
/>
91-
);
92-
} else if (type == 'Date Picker') {
93-
return (
94-
<DatePickerParameterSelectComponent
95-
parameterName={parameterName}
96-
parameterDisplayName={parameterName}
97-
parameterValue={parameterValue}
98-
parameterDisplayValue={parameterDisplayValue}
99-
setParameterValue={setParameterValue}
100-
setParameterDisplayValue={setParameterDisplayValue}
101-
query={query}
102-
queryCallback={queryCallback}
103-
settings={props.settings}
104-
allParameters={allParameters}
105-
compatibilityMode={compatibilityMode}
106-
manualParameterSave={manualParameterSave}
107-
/>
108-
);
109-
} else if (type == 'Custom Query') {
110-
return (
111-
<QueryParameterSelectComponent
112-
parameterName={parameterName}
113-
parameterDisplayName={parameterName}
114-
parameterValue={parameterValue}
115-
parameterDisplayValue={parameterDisplayValue}
116-
setParameterValue={setParameterValue}
117-
setParameterDisplayValue={setParameterDisplayValue}
118-
query={query}
119-
queryCallback={queryCallback}
120-
settings={props.settings}
121-
allParameters={allParameters}
122-
compatibilityMode={compatibilityMode}
123-
multiSelector={multiSelector}
124-
manualParameterSave={manualParameterSave}
125-
/>
126-
);
127-
}
128-
return <div>Invalid Parameter Selector Type.</div>;
40+
const theme = createTheme({
41+
typography: {
42+
fontFamily: "'Nunito Sans', sans-serif !important",
43+
allVariants: { color: 'rgb(var(--palette-neutral-text-weak))' },
44+
},
45+
palette: {
46+
text: {
47+
primary: 'rgb(var(--palette-neutral-text-weaker))',
48+
},
49+
},
50+
});
51+
52+
const content = () => {
53+
if (type == 'Free Text') {
54+
return (
55+
<FreeTextParameterSelectComponent
56+
parameterName={parameterName}
57+
parameterDisplayName={parameterName}
58+
parameterValue={parameterValue}
59+
parameterDisplayValue={parameterDisplayValue}
60+
setParameterValue={setParameterValue}
61+
setParameterDisplayValue={setParameterDisplayValue}
62+
query={query}
63+
queryCallback={queryCallback}
64+
settings={props.settings}
65+
allParameters={allParameters}
66+
compatibilityMode={compatibilityMode}
67+
manualParameterSave={manualParameterSave}
68+
/>
69+
);
70+
} else if (type == 'Node Property') {
71+
return (
72+
<NodePropertyParameterSelectComponent
73+
parameterName={parameterName}
74+
parameterDisplayName={parameterName}
75+
parameterValue={parameterValue}
76+
parameterDisplayValue={parameterDisplayValue}
77+
setParameterValue={setParameterValue}
78+
setParameterDisplayValue={setParameterDisplayValue}
79+
query={query}
80+
queryCallback={queryCallback}
81+
settings={props.settings}
82+
allParameters={allParameters}
83+
compatibilityMode={compatibilityMode}
84+
multiSelector={multiSelector}
85+
manualParameterSave={manualParameterSave}
86+
/>
87+
);
88+
} else if (type == 'Relationship Property') {
89+
return (
90+
<RelationshipPropertyParameterSelectComponent
91+
parameterName={parameterName}
92+
parameterDisplayName={parameterName}
93+
parameterValue={parameterValue}
94+
parameterDisplayValue={parameterDisplayValue}
95+
setParameterValue={setParameterValue}
96+
setParameterDisplayValue={setParameterDisplayValue}
97+
query={query}
98+
queryCallback={queryCallback}
99+
settings={props.settings}
100+
allParameters={allParameters}
101+
compatibilityMode={compatibilityMode}
102+
multiSelector={multiSelector}
103+
manualParameterSave={manualParameterSave}
104+
/>
105+
);
106+
} else if (type == 'Date Picker') {
107+
return (
108+
<DatePickerParameterSelectComponent
109+
parameterName={parameterName}
110+
parameterDisplayName={parameterName}
111+
parameterValue={parameterValue}
112+
parameterDisplayValue={parameterDisplayValue}
113+
setParameterValue={setParameterValue}
114+
setParameterDisplayValue={setParameterDisplayValue}
115+
query={query}
116+
queryCallback={queryCallback}
117+
settings={props.settings}
118+
allParameters={allParameters}
119+
compatibilityMode={compatibilityMode}
120+
manualParameterSave={manualParameterSave}
121+
/>
122+
);
123+
} else if (type == 'Custom Query') {
124+
return (
125+
<QueryParameterSelectComponent
126+
parameterName={parameterName}
127+
parameterDisplayName={parameterName}
128+
parameterValue={parameterValue}
129+
parameterDisplayValue={parameterDisplayValue}
130+
setParameterValue={setParameterValue}
131+
setParameterDisplayValue={setParameterDisplayValue}
132+
query={query}
133+
queryCallback={queryCallback}
134+
settings={props.settings}
135+
allParameters={allParameters}
136+
compatibilityMode={compatibilityMode}
137+
multiSelector={multiSelector}
138+
manualParameterSave={manualParameterSave}
139+
/>
140+
);
141+
}
142+
return <div>Invalid Parameter Selector Type.</div>;
143+
};
144+
return <ThemeProvider theme={theme}>{content()}</ThemeProvider>;
129145
};
130146

131147
export default NeoParameterSelectionChart;

‎src/chart/parameter/component/FreeTextParameterSelect.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ const FreeTextParameterSelectComponent = (props: ParameterSelectProps) => {
3535
setParamValueLocal(value);
3636

3737
if (manual) {
38-
// setRunning(false);
3938
return;
4039
}
4140

‎src/chart/pie/PieChart.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { evaluateRulesOnDict, useStyleRules } from '../../extensions/styling/Sty
66
import { ChartProps } from '../Chart';
77
import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
88
import { extensionEnabled } from '../../extensions/ExtensionUtils';
9+
import { themeNivo } from '../Utils';
910

1011
/**
1112
* Embeds a PieChart (from Nivo) into NeoDash.
@@ -132,6 +133,7 @@ const NeoPieChart = (props: ChartProps) => {
132133

133134
return (
134135
<ResponsivePie
136+
theme={themeNivo}
135137
data={data}
136138
sortByValue={sortByValue}
137139
enableArcLabels={enableArcLabels}
@@ -164,7 +166,6 @@ const NeoPieChart = (props: ChartProps) => {
164166
itemsSpacing: 0,
165167
itemWidth: 100,
166168
itemHeight: 18,
167-
itemTextColor: '#999',
168169
itemDirection: 'left-to-right',
169170
itemOpacity: 1,
170171
symbolSize: 18,

‎src/chart/scatter/ScatterPlotChart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { recordToNative } from '../ChartUtils';
55
import { ResponsiveScatterPlot, ResponsiveScatterPlotCanvas } from '@nivo/scatterplot';
66
import { animated } from '@react-spring/web';
77
import chroma from 'chroma-js';
8+
import { themeNivo } from '../Utils';
89

910
/**
1011
* Embeds a Nivo ResponsiveScatterPlot and a ResponsiveScatterPlotCanvas into NeoDash.
@@ -281,6 +282,7 @@ const NeoScatterPlot = (props: ChartProps) => {
281282
}}
282283
>
283284
<ComponentType
285+
theme={themeNivo}
284286
data={[data]}
285287
key={`${selection.value}`}
286288
xScale={

‎src/chart/single/SingleValueChart.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import YAML from 'yaml';
1111
const NeoSingleValueChart = (props: ChartProps) => {
1212
const { records } = props;
1313
const fontSize = props.settings && props.settings.fontSize ? props.settings.fontSize : 64;
14-
const color = props.settings && props.settings.color ? props.settings.color : 'rgba(0, 0, 0, 0.87)';
14+
const color = props.settings && props.settings.color ? props.settings.color : 'NO-OP';
1515
const format = props.settings && props.settings.format ? props.settings.format : 'auto';
1616
const textAlign = props.settings && props.settings.textAlign ? props.settings.textAlign : 'left';
1717
const verticalAlign = props.settings && props.settings.verticalAlign ? props.settings.verticalAlign : 'top';

‎src/chart/table/TableChart.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const HIDDEN_COLUMN_PREFIX = '__';
3333
const theme = createTheme({
3434
typography: {
3535
fontFamily: "'Nunito Sans', sans-serif !important",
36+
allVariants: { color: 'rgb(var(--palette-neutral-text-default))' },
3637
},
3738
});
3839
const fallbackRenderer = (value) => {

0 commit comments

Comments
 (0)