Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • graphpolaris/frontend-v2
  • rijkheere/frontend-v-2-reordering-paoh
2 results
Show changes
Commits on Source (2)
...@@ -14,7 +14,6 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc ...@@ -14,7 +14,6 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
const viewport = useViewport(); const viewport = useViewport();
const schemaStats = useSchemaStats(); const schemaStats = useSchemaStats();
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
/** /**
* adds drag functionality in order to be able to drag the entityNode to the schema * adds drag functionality in order to be able to drag the entityNode to the schema
...@@ -39,13 +38,13 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc ...@@ -39,13 +38,13 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
const tooltipX = useMemo(() => { const tooltipX = useMemo(() => {
if (ref.current == null || openPopupLocation == null) return -1; if (ref.current == null || openPopupLocation == null) return -1;
const rect = ref.current.getBoundingClientRect(); const rect = ref.current.getBoundingClientRect();
return rect.x - openPopupLocation.x + (rect.width / 2); return rect.x - openPopupLocation.x + rect.width / 2;
}, [viewport.x, openPopupLocation]); }, [viewport.x, openPopupLocation]);
const tooltipY = useMemo(() => { const tooltipY = useMemo(() => {
if (ref.current == null || openPopupLocation == null) return -1; if (ref.current == null || openPopupLocation == null) return -1;
const rect = ref.current.getBoundingClientRect(); const rect = ref.current.getBoundingClientRect();
return rect.y - openPopupLocation.y + (rect.height / 2); return rect.y - openPopupLocation.y + rect.height / 2;
}, [viewport.y, openPopupLocation]); }, [viewport.y, openPopupLocation]);
return ( return (
...@@ -83,7 +82,7 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc ...@@ -83,7 +82,7 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
}, },
{} as Record<string, string>, {} as Record<string, string>,
)} )}
numberOfElements={schemaStats.nodeStats[data.name]?.count} numberOfElements={schemaStats.nodes.stats[data.name]?.count}
/> />
</VisualizationTooltip> </VisualizationTooltip>
</div> </div>
......
...@@ -94,7 +94,7 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }: ...@@ -94,7 +94,7 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
: {} : {}
} }
connections={{ from: data.from, to: data.to }} connections={{ from: data.from, to: data.to }}
numberOfElements={schemaStats.edgeStats[data.collection]?.count} numberOfElements={schemaStats.edges.stats[data.collection]?.count}
/> />
</VisualizationTooltip> </VisualizationTooltip>
</div> </div>
......
...@@ -13,20 +13,19 @@ import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResul ...@@ -13,20 +13,19 @@ import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResul
import { IPointData } from 'pixi.js'; import { IPointData } from 'pixi.js';
import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common'; import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
// For backwards compatibility with older saveStates, we migrate information from settings.nodes to settings.location // For backwards compatibility with older saveStates, we migrate information from settings.nodes to settings.location
// FIXME: this can be removed once all systems have updated their saveStates. // FIXME: this can be removed once all systems have updated their saveStates.
function patchLegacySettings(settings: NodelinkVisProps): NodelinkVisProps { function patchLegacySettings(settings: NodelinkVisProps): NodelinkVisProps {
if (!('nodes' in settings)) { if (!('nodes' in settings)) {
settings = JSON.parse(JSON.stringify(settings)); // Undo Object.preventExtensions() settings = JSON.parse(JSON.stringify(settings)); // Undo Object.preventExtensions()
settings.nodes = { settings.nodes = {
shape: { shape: {
type: (settings as any).shapes.shape, type: (settings as any).shapes.shape,
similar: (settings as any).shapes.similar, similar: (settings as any).shapes.similar,
shapeMap: undefined shapeMap: undefined,
}, },
labelAttributes: {} labelAttributes: {},
}; };
settings.edges.labelAttributes = {}; settings.edges.labelAttributes = {};
} }
...@@ -49,7 +48,7 @@ export interface NodelinkVisProps { ...@@ -49,7 +48,7 @@ export interface NodelinkVisProps {
shapeMap: { [id: string]: 'circle' | 'rectangle' } | undefined; shapeMap: { [id: string]: 'circle' | 'rectangle' } | undefined;
}; };
labelAttributes: { [nodeType: string]: string }; labelAttributes: { [nodeType: string]: string };
}, };
edges: { edges: {
width: { width: {
similar: boolean; similar: boolean;
...@@ -89,7 +88,7 @@ const NodeLinkVis = forwardRef<NodeLinkVisHandle, VisualizationPropTypes<Nodelin ...@@ -89,7 +88,7 @@ const NodeLinkVis = forwardRef<NodeLinkVisHandle, VisualizationPropTypes<Nodelin
const [highlightedLinks, setHighlightedLinks] = useState<LinkType[]>([]); const [highlightedLinks, setHighlightedLinks] = useState<LinkType[]>([]);
settings = patchLegacySettings(settings); settings = patchLegacySettings(settings);
useEffect(() => { useEffect(() => {
if (data) { if (data) {
setGraph( setGraph(
...@@ -218,9 +217,19 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza ...@@ -218,9 +217,19 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
<Input <Input
type="dropdown" type="dropdown"
label="Shape" label="Shape"
value={settings.shapes.shape} value={settings.nodes.shape.type}
options={[{ circle: 'Circle' }, { rectangle: 'Square' }]} options={[{ circle: 'Circle' }, { rectangle: 'Square' }]}
onChange={(val) => updateSettings({ shapes: { ...settings.shapes, shape: val as any } })} onChange={(val) =>
updateSettings({
nodes: {
...settings.nodes,
shape: {
...settings.nodes.shape,
type: val as 'circle' | 'rectangle',
},
},
})
}
/> />
</div> </div>
</div> </div>
...@@ -242,18 +251,21 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza ...@@ -242,18 +251,21 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
</div> </div>
<div> <div>
<span className="text-xs font-semibold">Labels</span> <span className="text-xs font-semibold">Labels</span>
{ Object.entries(graphMetadata.edges.types).map(([label, type]) => {Object.entries(graphMetadata.edges.types).map(([label, type]) => (
<Input <Input
type="dropdown" type="dropdown"
key={label} key={label}
label={label} label={label}
value={settings.edges.labelAttributes ? settings.edges.labelAttributes[label] || 'Default' : undefined} value={settings.edges.labelAttributes ? settings.edges.labelAttributes[label] || 'Default' : undefined}
options={['Default', ...Object.keys(type.attributes).filter(x => x != 'Type')]} options={['Default', ...Object.keys(type.attributes).filter((x) => x != 'Type')]}
onChange={(val) => updateSettings({ edges: { ...settings.edges, labelAttributes: { ... settings.edges.labelAttributes, [label]: val as string } } })} onChange={(val) =>
updateSettings({
edges: { ...settings.edges, labelAttributes: { ...settings.edges.labelAttributes, [label]: val as string } },
})
}
/> />
)} ))}
</div> </div>
</SettingsContainer> </SettingsContainer>
); );
}; };
......