{reportHeader}
diff --git a/src/card/view/CardViewFooter.tsx b/src/card/view/CardViewFooter.tsx
index 135306180..790e2be19 100644
--- a/src/card/view/CardViewFooter.tsx
+++ b/src/card/view/CardViewFooter.tsx
@@ -121,7 +121,7 @@ const NeoCardViewFooter = ({
: { label: selection[selectable], value: selection[selectable] },
isMulti: selectableFields[selectable].multiple,
isClearable: false,
- menuPortalTarget: document.querySelector('body'),
+ menuPortalTarget: document.querySelector('#overlay'),
}}
fluid
style={{
diff --git a/src/card/view/CardViewHeader.tsx b/src/card/view/CardViewHeader.tsx
index 5a8514043..255da3bf0 100644
--- a/src/card/view/CardViewHeader.tsx
+++ b/src/card/view/CardViewHeader.tsx
@@ -71,6 +71,9 @@ const NeoCardViewHeader = ({
text: {
primary: 'rgb(var(--palette-neutral-text))',
},
+ action: {
+ disabled: 'rgb(var(--palette-neutral-text-weak))',
+ },
},
});
@@ -103,7 +106,7 @@ const NeoCardViewHeader = ({
onBlur={() => {
setEditing(false);
}}
- className={'n-text-palette-neutral-text-default no-underline large'}
+ className={'no-underline large'}
label=''
disabled={!editable}
placeholder='Report name...'
@@ -117,6 +120,11 @@ const NeoCardViewHeader = ({
size={'small'}
style={{ paddingTop: '0px important!' }}
variant={'standard'}
+ sx={{
+ '& .MuiInputBase-input.Mui-disabled': {
+ WebkitTextFillColor: 'inherit',
+ },
+ }}
/>
diff --git a/src/chart/ChartUtils.ts b/src/chart/ChartUtils.ts
index daa62e7b2..d6c011395 100644
--- a/src/chart/ChartUtils.ts
+++ b/src/chart/ChartUtils.ts
@@ -140,6 +140,11 @@ export function getRecordType(value) {
return 'objectNumber';
}
return 'object';
+ } else if (typeof value === 'string' || value instanceof String) {
+ if (value.startsWith('http') || value.startsWith('https')) {
+ return 'link';
+ }
+ return 'string';
}
// Use string as default type
diff --git a/src/chart/Utils.ts b/src/chart/Utils.ts
index 124eac425..049edb87f 100644
--- a/src/chart/Utils.ts
+++ b/src/chart/Utils.ts
@@ -121,14 +121,14 @@ export const themeNivo = {
textColor: 'rgb(var(--palette-neutral-text-default))',
text: { fill: 'rgb(var(--palette-neutral-text-default))' },
axis: {
- ticks: { text: { fill: 'rgb(var(--palette-light-neutral-text-default))' } },
+ ticks: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
legend: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
},
legends: {
- text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
- title: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
- ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
- hidden: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
+ text: { fill: 'rgb(var(--palette-neutral-text-default))' },
+ title: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
+ ticks: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
+ hidden: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
},
markers: {
text: { fill: 'rgb(var(--palette-neutral-text-default))' },
diff --git a/src/chart/bar/BarChart.tsx b/src/chart/bar/BarChart.tsx
index 52b3218e0..e62d17ed3 100644
--- a/src/chart/bar/BarChart.tsx
+++ b/src/chart/bar/BarChart.tsx
@@ -28,7 +28,7 @@ const NeoBarChart = (props: ChartProps) => {
const { records, selection } = props;
- const [keys, setKeys] = React.useState({});
+ const [keys, setKeys] = React.useState
([]);
const [data, setData] = React.useState[]>([]);
useEffect(() => {
@@ -72,7 +72,7 @@ const NeoBarChart = (props: ChartProps) => {
return row;
});
- setKeys(newKeys);
+ setKeys(Object.keys(newKeys));
setData(newData);
}, [selection]);
@@ -114,8 +114,8 @@ const NeoBarChart = (props: ChartProps) => {
const chartColorsByScheme = getD3ColorsByScheme(colorScheme);
// Compute bar color based on rules - overrides default color scheme completely.
const getBarColor = (bar) => {
- let { data, id } = bar;
- let colorIndex = Object.keys(data).indexOf(id);
+ let { id } = bar;
+ let colorIndex = keys.indexOf(id);
if (colorIndex >= chartColorsByScheme.length) {
colorIndex %= chartColorsByScheme.length;
}
@@ -218,7 +218,7 @@ const NeoBarChart = (props: ChartProps) => {
layout={layout}
groupMode={groupMode == 'stacked' ? 'stacked' : 'grouped'}
enableLabel={enableLabel}
- keys={Object.keys(keys)}
+ keys={keys}
indexBy='index'
margin={{
top: marginTop,
diff --git a/src/chart/graph/component/GraphChartInspectModal.tsx b/src/chart/graph/component/GraphChartInspectModal.tsx
index 53009d9a9..5c5835606 100644
--- a/src/chart/graph/component/GraphChartInspectModal.tsx
+++ b/src/chart/graph/component/GraphChartInspectModal.tsx
@@ -17,7 +17,9 @@ export const NeoGraphChartInspectModal = (props: GraphChartVisualizationProps) =
aria-labelledby='form-dialog-title'
>
- {props.interactivity.selectedEntity ? getEntityHeader(props.interactivity.selectedEntity) : ''}
+ {props.interactivity.selectedEntity
+ ? getEntityHeader(props.interactivity.selectedEntity, props.engine.selection)
+ : ''}
diff --git a/src/chart/graph/util/NodeUtils.ts b/src/chart/graph/util/NodeUtils.ts
index 20d318f2e..f40b5ee58 100644
--- a/src/chart/graph/util/NodeUtils.ts
+++ b/src/chart/graph/util/NodeUtils.ts
@@ -24,8 +24,26 @@ export const parseNodeIconConfig = (iconStyle) => {
}
};
-export const getEntityHeader = (entity) => {
- return (entity.labels && entity.labels.join(', ')) || entity.type;
+const getSelectedNodeProperty = (entity: any, sourceOrTarget: string, propertySelections: any) => {
+ const selection = propertySelections[entity[sourceOrTarget]?.mainLabel];
+ switch (selection) {
+ case '(label)':
+ return entity[sourceOrTarget]?.mainLabel;
+ case '(id)':
+ return entity[sourceOrTarget]?.id;
+ default:
+ return entity[sourceOrTarget]?.properties[selection];
+ }
+};
+
+const getRelPatternString = (entity: any, selection: any) => {
+ const sourceTitle = getSelectedNodeProperty(entity, 'source', selection);
+ const targetTitle = getSelectedNodeProperty(entity, 'target', selection);
+ return `(${sourceTitle ? sourceTitle : '[no value]'} --> ${targetTitle ? targetTitle : '[no value]'})`;
+};
+
+export const getEntityHeader = (entity: any, selection: any) => {
+ return entity.labels?.join(', ') || `${entity.type} ${getRelPatternString(entity, selection)}`;
};
export const drawDataURIOnCanvas = (node, strDataURI, canvas, defaultNodeSize) => {
diff --git a/src/chart/graph/util/RecordUtils.ts b/src/chart/graph/util/RecordUtils.ts
index a1767aea9..462366451 100644
--- a/src/chart/graph/util/RecordUtils.ts
+++ b/src/chart/graph/util/RecordUtils.ts
@@ -122,6 +122,12 @@ function extractGraphEntitiesFromField(
}
}
+const isValidLink = (link, nodes) => {
+ if (nodes[link.source] == null || nodes[link.target] == null) {
+ return false;
+ }
+ return true;
+};
export function buildGraphVisualizationObjectFromRecords(
records: any[], // Neo4jRecord[],
nodes: Record[],
@@ -162,6 +168,7 @@ export function buildGraphVisualizationObjectFromRecords(
);
});
});
+
// Assign proper curvatures and colors to relationships.
// Assigning curvature is needed for pairs of nodes that have multiple relationships between them, or self-loops.
const linksList = Object.values(links).map((linkArray) => {
@@ -176,6 +183,12 @@ export function buildGraphVisualizationObjectFromRecords(
});
});
+ linksList.forEach((link, idx, object) => {
+ if (!isValidLink(link[0], nodes)) {
+ object.splice(idx, 1);
+ }
+ });
+
// Assign proper colors to nodes.
const totalColors = colorScheme ? colorScheme.length : 0;
const nodeLabelsList = fields.map((e) => e[0]);
diff --git a/src/chart/parameter/component/FreeTextParameterSelect.tsx b/src/chart/parameter/component/FreeTextParameterSelect.tsx
index d9e22c260..aded7fafb 100644
--- a/src/chart/parameter/component/FreeTextParameterSelect.tsx
+++ b/src/chart/parameter/component/FreeTextParameterSelect.tsx
@@ -38,8 +38,12 @@ const FreeTextParameterSelectComponent = (props: ParameterSelectProps) => {
return;
}
- if (value == null && clearParameterOnFieldClear) {
- debouncedSetParameterValue(defaultValue);
+ if (value == '') {
+ if (clearParameterOnFieldClear) {
+ debouncedSetParameterValue(undefined);
+ } else {
+ debouncedSetParameterValue(defaultValue);
+ }
} else {
debouncedSetParameterValue(value);
}
diff --git a/src/chart/parameter/component/NodePropertyParameterSelect.tsx b/src/chart/parameter/component/NodePropertyParameterSelect.tsx
index c4332be87..f29374cd7 100644
--- a/src/chart/parameter/component/NodePropertyParameterSelect.tsx
+++ b/src/chart/parameter/component/NodePropertyParameterSelect.tsx
@@ -120,6 +120,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
handleParametersUpdate(newValue, newDisplay, manualParameterSave);
};
+
return (
{
variant='outlined'
/>
)}
- getOptionLabel={(option) => RenderSubValue(option)}
+ getOptionLabel={(option) => option?.toString() || ''}
/>
{manualParameterSave ? manualHandleParametersUpdate()} /> : <>}
diff --git a/src/chart/pie/PieChart.tsx b/src/chart/pie/PieChart.tsx
index cee7b3bdd..739ba7471 100644
--- a/src/chart/pie/PieChart.tsx
+++ b/src/chart/pie/PieChart.tsx
@@ -7,6 +7,7 @@ import { ChartProps } from '../Chart';
import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
import { themeNivo } from '../Utils';
import { extensionEnabled } from '../../utils/ReportUtils';
+import { objMerge } from '../../utils/ObjectManipulation';
/**
* Embeds a PieChart (from Nivo) into NeoDash.
@@ -73,10 +74,10 @@ const NeoPieChart = (props: ChartProps) => {
const settings = props.settings ? props.settings : {};
const legendHeight = 20;
// TODO to retrieve all defaults from the ReportConfig.ts file instead of hardcoding them in the file
- const marginRight = settings.marginRight ? settings.marginRight : 24;
- const marginLeft = settings.marginLeft ? settings.marginLeft : 24;
- const marginTop = settings.marginTop ? settings.marginTop : 24;
- const marginBottom = settings.marginBottom ? settings.marginBottom : 40;
+ const marginRight = settings.marginRight ? settings.marginRight : 50;
+ const marginLeft = settings.marginLeft ? settings.marginLeft : 50;
+ const marginTop = settings.marginTop ? settings.marginTop : 50;
+ const marginBottom = settings.marginBottom ? settings.marginBottom : 50;
const sortByValue = settings.sortByValue ? settings.sortByValue : false;
const enableArcLabels = settings.enableArcLabels !== undefined ? settings.enableArcLabels : true;
const enableArcLinkLabels = settings.enableArcLinkLabels !== undefined ? settings.enableArcLinkLabels : true;
@@ -90,6 +91,8 @@ const NeoPieChart = (props: ChartProps) => {
const cornerRadius = settings.cornerRadius ? settings.cornerRadius : 1;
const arcLabelsSkipAngle = settings.arcLabelsSkipAngle ? settings.arcLabelsSkipAngle : 10;
+ const arcLabelsFontSize = settings.arcLabelsFontSize ? settings.arcLabelsFontSize : 13;
+
const legend = settings.legend ? settings.legend : false;
const colorScheme = settings.colors ? settings.colors : 'set2';
const styleRules = useStyleRules(
@@ -131,9 +134,14 @@ const NeoPieChart = (props: ChartProps) => {
return ;
}
+ const theme = objMerge(themeNivo, {
+ labels: {
+ text: { fontSize: arcLabelsFontSize },
+ },
+ });
return (
{
ColumnSortedAscendingIcon: () => <>,
}}
getRowClassName={(params) => {
- return `rule${evaluateRulesOnDict(params.row, styleRules, ['row color', 'row text color'])}`;
+ return ['row color', 'row text color']
+ .map((e) => {
+ return `rule${evaluateRulesOnDict(params.row, styleRules, [e])}`;
+ })
+ .join(' ');
}}
getCellClassName={(params) => {
- return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [
- 'cell color',
- 'cell text color',
- ])}`;
+ return ['cell color', 'cell text color']
+ .map((e) => {
+ return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [e])}`;
+ })
+ .join(' ');
}}
/>