From 5235c2d106ff30f04201db4fd106e579e8711cf3 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Mon, 13 May 2024 15:03:58 +0200
Subject: [PATCH] chore: semsub vis naming fixes
---
.../components/ConfigPanel.tsx | 13 ++-
.../components/EdgesLayer.tsx | 2 +-
.../components/Scatterplot.tsx | 95 ++++++++-----------
.../semanticsubstratesvis/components/types.ts | 20 ++--
.../semanticsubstratesvis/components/utils.ts | 18 ++--
.../semanticsubstratesvis.tsx | 69 +++++++-------
6 files changed, 104 insertions(+), 113 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/ConfigPanel.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/ConfigPanel.tsx
index 4d165c968..449218b01 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/ConfigPanel.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/ConfigPanel.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { Node, dataConfig, AugmentedNodeAttributes } from './types';
+import { Node, DataConfig, AugmentedNodeAttributes } from './types';
import { Button } from '../../../../components/buttons';
function getUniqueValues(arr: any[]): any[] {
@@ -8,7 +8,7 @@ function getUniqueValues(arr: any[]): any[] {
interface ConfigPanelProps {
data: AugmentedNodeAttributes[];
- onUpdateData: (data: dataConfig) => void;
+ onUpdateData: (data: DataConfig) => void;
}
const ConfigPanel: React.FC<ConfigPanelProps> = ({ data, onUpdateData }) => {
@@ -122,7 +122,14 @@ const ConfigPanel: React.FC<ConfigPanelProps> = ({ data, onUpdateData }) => {
// Call the callback to send the data to the parent component (VisSemanticSubstrates)
if (isAxisSelected) {
- onUpdateData({ entityVertical, attributeEntity, attributeValueSelected, orderNameXaxis, orderNameYaxis, isButtonEnabled });
+ onUpdateData({
+ entityVertical,
+ attributeEntity,
+ attributeValueSelected,
+ orderNameXAxis: orderNameXaxis,
+ orderNameYAxis: orderNameYaxis,
+ isButtonEnabled,
+ });
}
};
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx
index 10558bd09..5adafe349 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
-import { DataConnection, VisualRegionConfig, regionData, VisualEdgesConfig, DataPoint } from './types';
+import { DataConnection, VisualRegionConfig, RegionData, VisualEdgesConfig, DataPoint } from './types';
import { select } from 'd3';
import { isNumeric } from './utils';
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
index ab36fa683..cb1016e21 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
@@ -1,26 +1,13 @@
import React, { useEffect, useRef, useState } from 'react';
-import {
- select,
- selectAll,
- scaleBand,
- axisBottom,
- scaleLinear,
- forceX,
- forceY,
- brush,
- forceCollide,
- format,
- axisLeft,
- forceSimulation,
-} from 'd3';
-
-import { VisualRegionConfig, regionData, DataPoint, DataPointXY } from './types';
+import { select, scaleBand, axisBottom, scaleLinear, forceX, forceY, brush, forceCollide, format, axisLeft, forceSimulation } from 'd3';
+
+import { VisualRegionConfig, RegionData, DataPoint, DataPointXY } from './types';
import { calcTextWidth, calcTextWidthCanvas } from './utils';
import { ArrowRightAlt } from '@mui/icons-material';
import Icon from '@graphpolaris/shared/lib/components/icon';
-export type ScatterplotProps = {
- data: regionData;
+export type ScatterPlotProps = {
+ data: RegionData;
visualConfig: VisualRegionConfig;
xScaleRange: string[] | number[];
yScaleRange: string[] | number[];
@@ -30,7 +17,7 @@ export type ScatterplotProps = {
onResultJitter: (data: DataPoint[]) => void;
};
-export type KeyedScatterplotProps = ScatterplotProps & {
+export type KeyedScatterplotProps = ScatterPlotProps & {
key: number;
};
@@ -40,7 +27,7 @@ function computeRadiusPoints(width: number, numPoints: number): number {
return radius;
}
-const Scatterplot: React.FC<ScatterplotProps> = ({
+export const ScatterPlot = ({
data,
visualConfig,
xScaleRange,
@@ -49,7 +36,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
onBrushClear,
onResultJitter,
width,
-}) => {
+}: ScatterPlotProps) => {
const svgRef = useRef(null);
const groupMarginRef = useRef<SVGGElement>(null as any);
@@ -58,7 +45,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
useEffect(() => {
const maxLengthAllowedAxisY: number = 85;
const maxLengthAllowedAxisX: number = 50;
- const styleTextXaxisLabel = {
+ const styleTextXAxisLabel = {
classTextXAxis: 'font-inter font-secondary font-semibold text-right capitalize text-xs',
x: 1.01 * visualConfig.widthMargin + visualConfig.margin.right,
y: visualConfig.heightMargin + 1.25 * visualConfig.margin.bottom,
@@ -78,8 +65,8 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
let tickCount = 0;
let dataCircles: DataPointXY[] = [];
- let dataCirclesXtemp: number[] = [];
- let dataCirclesYtemp: number[] = [];
+ let dataCirclesXTemp: number[] = [];
+ let dataCirclesYTemp: number[] = [];
let xOffset: number;
if (data.xData.length != 0 && data.yData.length != 0) {
@@ -91,7 +78,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
xOffset = 0.5 * xScaleTemp.bandwidth();
- dataCirclesXtemp = data.xData.map((value, index) => {
+ dataCirclesXTemp = data.xData.map((value, index) => {
const scaledValue = typeof value === 'number' ? xScaleTemp(value.toString()) : xScaleTemp(value);
if (scaledValue !== undefined) {
return scaledValue + xOffset;
@@ -100,7 +87,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
}
});
- const textTicks = calcTextWidth(xScaleRange as string[], maxLengthAllowedAxisX, styleTextXaxisLabel.classTextXAxis);
+ const textTicks = calcTextWidth(xScaleRange as string[], maxLengthAllowedAxisX, styleTextXAxisLabel.classTextXAxis);
let xAxis = axisBottom(xScaleTemp)
.tickFormat((d, i) => textTicks[i])
@@ -114,14 +101,14 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
.attr('x', '10')
.attr('y', '0')
.attr('dy', '0')
- .style('dominant-baseline', styleTextXaxisLabel.dominantBaseline)
+ .style('dominant-baseline', styleTextXAxisLabel.dominantBaseline)
.attr('transform', 'rotate(90)');
} else {
let xScaleTemp = scaleLinear<number>()
.domain(xScaleRange as number[])
.range([0, visualConfig.widthMargin]);
- dataCirclesXtemp = data.xData.map((value, index) => {
+ dataCirclesXTemp = data.xData.map((value, index) => {
const numericValue = typeof value === 'string' ? parseFloat(value) : value;
return xScaleTemp(numericValue);
});
@@ -147,7 +134,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
xOffset = 0.5 * yScaleTemp.bandwidth();
- dataCirclesYtemp = data.yData.map((value, index) => {
+ dataCirclesYTemp = data.yData.map((value, index) => {
const scaledValue = typeof value === 'number' ? yScaleTemp(value.toString()) : yScaleTemp(value);
if (scaledValue !== undefined) {
return scaledValue + xOffset;
@@ -156,7 +143,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
}
});
- const textTicks = calcTextWidth(yScaleRange as string[], maxLengthAllowedAxisY, styleTextXaxisLabel.classTextXAxis);
+ const textTicks = calcTextWidth(yScaleRange as string[], maxLengthAllowedAxisY, styleTextXAxisLabel.classTextXAxis);
let yAxis = axisLeft(yScaleTemp)
.tickFormat((d, i) => textTicks[i])
@@ -167,7 +154,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
.domain(yScaleRange as number[])
.range([visualConfig.heightMargin, 0]);
- dataCirclesYtemp = data.yData.map((value, index) => {
+ dataCirclesYTemp = data.yData.map((value, index) => {
const numericValue = typeof value === 'string' ? parseFloat(value) : value;
return yScaleTemp(numericValue);
});
@@ -182,7 +169,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
groupMargin.append('g').call(yAxis);
}
- dataCircles = data.xData.map((value, index) => ({ x: dataCirclesXtemp[index], y: dataCirclesYtemp[index] }));
+ dataCircles = data.xData.map((value, index) => ({ x: dataCirclesXTemp[index], y: dataCirclesYTemp[index] }));
const radius = computeRadiusPoints(visualConfig.width, data.xData.length);
groupMargin
@@ -205,16 +192,16 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
onResultJitter(dataSimulation);
- const textLabelAxis = calcTextWidth(data.xAxisName, styleTextXaxisLabel.maxLengthText, styleTextXaxisLabel.classTextXAxis);
+ const textLabelAxis = calcTextWidth(data.xAxisName, styleTextXAxisLabel.maxLengthText, styleTextXAxisLabel.classTextXAxis);
svg
.append('text')
- .attr('x', styleTextXaxisLabel.x)
- .attr('y', styleTextXaxisLabel.y)
+ .attr('x', styleTextXAxisLabel.x)
+ .attr('y', styleTextXAxisLabel.y)
.text(textLabelAxis[0])
- .style('text-anchor', styleTextXaxisLabel.textAnchor)
- .style('dominant-baseline', styleTextXaxisLabel.dominantBaseline)
- .attr('class', styleTextXaxisLabel.classTextXAxis);
+ .style('text-anchor', styleTextXAxisLabel.textAnchor)
+ .style('dominant-baseline', styleTextXAxisLabel.dominantBaseline)
+ .attr('class', styleTextXAxisLabel.classTextXAxis);
} else if (data.yData.length != 0) {
if (typeof data.yData[0] != 'number') {
let yScaleTemp = scaleBand<string>()
@@ -224,7 +211,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
xOffset = 0.5 * yScaleTemp.bandwidth();
- dataCirclesYtemp = data.yData.map((value, index) => {
+ dataCirclesYTemp = data.yData.map((value, index) => {
const scaledValue = typeof value === 'number' ? yScaleTemp(value.toString()) : yScaleTemp(value);
if (scaledValue !== undefined) {
return scaledValue + xOffset;
@@ -233,7 +220,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
}
});
- const textTicks = calcTextWidth(yScaleRange as string[], maxLengthAllowedAxisY, styleTextXaxisLabel.classTextXAxis);
+ const textTicks = calcTextWidth(yScaleRange as string[], maxLengthAllowedAxisY, styleTextXAxisLabel.classTextXAxis);
let yAxis = axisLeft(yScaleTemp)
.tickFormat((d, i) => textTicks[i])
@@ -244,7 +231,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
.domain(yScaleRange as number[])
.range([visualConfig.heightMargin, 0]);
- dataCirclesYtemp = data.yData.map((value, index) => {
+ dataCirclesYTemp = data.yData.map((value, index) => {
const numericValue = typeof value === 'string' ? parseFloat(value) : value;
return yScaleTemp(numericValue);
});
@@ -263,7 +250,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
.domain(xScaleRange as number[])
.range([0, visualConfig.widthMargin]);
- dataCircles = data.yData.map((value, index) => ({ x: xScaleTemp(0.0), y: dataCirclesYtemp[index] }));
+ dataCircles = data.yData.map((value, index) => ({ x: xScaleTemp(0.0), y: dataCirclesYTemp[index] }));
const radius = computeRadiusPoints(visualConfig.width, data.yData.length);
const simulation = forceSimulation<DataPointXY>(dataCircles)
@@ -307,7 +294,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
xOffset = 0.5 * xScaleTemp.bandwidth();
- dataCirclesXtemp = data.xData.map((value, index) => {
+ dataCirclesXTemp = data.xData.map((value, index) => {
const scaledValue = typeof value === 'number' ? xScaleTemp(value.toString()) : xScaleTemp(value);
if (scaledValue !== undefined) {
return scaledValue + xOffset;
@@ -316,7 +303,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
}
});
- const textTicks = calcTextWidth(xScaleRange as string[], maxLengthAllowedAxisX, styleTextXaxisLabel.classTextXAxis);
+ const textTicks = calcTextWidth(xScaleRange as string[], maxLengthAllowedAxisX, styleTextXAxisLabel.classTextXAxis);
let xAxis = axisBottom(xScaleTemp)
.tickFormat((d, i) => textTicks[i])
@@ -330,14 +317,14 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
.attr('x', '10')
.attr('y', '0')
.attr('dy', '0')
- .style('dominant-baseline', styleTextXaxisLabel.dominantBaseline)
+ .style('dominant-baseline', styleTextXAxisLabel.dominantBaseline)
.attr('transform', 'rotate(90)');
} else {
let xScaleTemp = scaleLinear<number>()
.domain(xScaleRange as number[])
.range([0, visualConfig.widthMargin]);
- dataCirclesXtemp = data.xData.map((value, index) => {
+ dataCirclesXTemp = data.xData.map((value, index) => {
const numericValue = typeof value === 'string' ? parseFloat(value) : value;
return xScaleTemp(numericValue);
});
@@ -359,7 +346,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
.domain(yScaleRange as number[])
.range([visualConfig.heightMargin, 0]);
- dataCircles = data.xData.map((value, index) => ({ x: dataCirclesXtemp[index], y: yScaleTemp(0) }));
+ dataCircles = data.xData.map((value, index) => ({ x: dataCirclesXTemp[index], y: yScaleTemp(0) }));
const radius = computeRadiusPoints(visualConfig.width, data.xData.length);
const simulation = forceSimulation<DataPointXY>(dataCircles)
@@ -395,16 +382,16 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
simulation.stop();
}
});
- const textLabelAxis = calcTextWidth(data.xAxisName, styleTextXaxisLabel.maxLengthText, styleTextXaxisLabel.classTextXAxis);
+ const textLabelAxis = calcTextWidth(data.xAxisName, styleTextXAxisLabel.maxLengthText, styleTextXAxisLabel.classTextXAxis);
svg
.append('text')
- .attr('x', styleTextXaxisLabel.x)
- .attr('y', styleTextXaxisLabel.y)
+ .attr('x', styleTextXAxisLabel.x)
+ .attr('y', styleTextXAxisLabel.y)
.text(textLabelAxis[0])
- .style('text-anchor', styleTextXaxisLabel.textAnchor)
- .style('dominant-baseline', styleTextXaxisLabel.dominantBaseline)
- .attr('class', styleTextXaxisLabel.classTextXAxis);
+ .style('text-anchor', styleTextXAxisLabel.textAnchor)
+ .style('dominant-baseline', styleTextXAxisLabel.dominantBaseline)
+ .attr('class', styleTextXAxisLabel.classTextXAxis);
}
svg
@@ -483,5 +470,3 @@ const Scatterplot: React.FC<ScatterplotProps> = ({
</div>
);
};
-
-export default Scatterplot;
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/types.ts b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/types.ts
index 55051369e..da7bd4e4b 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/types.ts
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/types.ts
@@ -42,24 +42,24 @@ export interface DataPointXY {
y: number;
}
-export interface connectionFromTo {
+export interface ConnectionFromTo {
to: string;
from: string;
}
-export interface edgeVisibility {
+export interface EdgeVisibility {
id: string;
to: boolean;
from: boolean;
visibility: boolean;
}
-export interface idConnectionsObjects {
- from: idConnections;
- to: idConnections;
+export interface IdConnectionsObjects {
+ from: IdConnections;
+ to: IdConnections;
}
-export interface idConnections {
+export interface IdConnections {
[key: string]: string[];
}
@@ -90,12 +90,12 @@ export interface AugmentedEdgeAttributes {
label: string;
}
-export interface dataConfig {
+export interface DataConfig {
entityVertical: string;
attributeEntity: string;
attributeValueSelected: string;
- orderNameXaxis: string;
- orderNameYaxis: string;
+ orderNameXAxis: string;
+ orderNameYAxis: string;
isButtonEnabled: boolean;
}
@@ -138,7 +138,7 @@ export interface VisualEdgesConfig {
strokeOpacity: number;
}
-export interface regionData {
+export interface RegionData {
name: string;
xData: any[];
yData: any[];
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts
index bf8a250c2..68e0d466c 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts
@@ -1,4 +1,4 @@
-import { UserSelection, regionData, AugmentedNodeAttributes, connectionFromTo, idConnections, edgeVisibility } from './types';
+import { UserSelection, RegionData, AugmentedNodeAttributes, ConnectionFromTo, IdConnections, EdgeVisibility } from './types';
import * as d3 from 'd3';
import { RefObject } from 'react';
@@ -9,8 +9,8 @@ export function findConnectionsNodes(
originIDs: string[],
graphStructure: MultiGraph,
labelNode: string,
-): [connectionFromTo[], string[]] {
- const neighborMap: idConnections = {};
+): [ConnectionFromTo[], string[]] {
+ const neighborMap: IdConnections = {};
originIDs.forEach((nodeId) => {
const tempSet: Set<string> = new Set();
@@ -56,7 +56,7 @@ export function filterArray2(ids1: string[], ids2: string[], targetArray: string
});
}
-export function getRegionData(nodes: AugmentedNodeAttributes[], regionUserSelection: UserSelection): regionData {
+export function getRegionData(nodes: AugmentedNodeAttributes[], regionUserSelection: UserSelection): RegionData {
// when one of the fields is an array the elemnts in ConfigPanel are joined with "-".
// then regionUserSelection.attributeAsRegionSelection will be a string of the elements joined by "-"
// that is why item.attributes[regionUserSelection.attributeAsRegion] is join with ("-")
@@ -129,9 +129,9 @@ export function findSimilarElements(array1: string[], array2: string[]): string[
return array1.filter((element) => array2.includes(element));
}
-export function wrapperForEdge(data: idConnections): connectionFromTo[] {
+export function wrapperForEdge(data: IdConnections): ConnectionFromTo[] {
const keysData = Object.keys(data);
- const resultsDas: connectionFromTo[] = [];
+ const resultsDas: ConnectionFromTo[] = [];
const results = keysData.forEach((item) => {
const r = data[item].forEach((itemConnected) => {
resultsDas.push({ from: item, to: itemConnected });
@@ -140,7 +140,7 @@ export function wrapperForEdge(data: idConnections): connectionFromTo[] {
return resultsDas;
}
-export function wrapperForEdgeString(data: idConnections): string[] {
+export function wrapperForEdgeString(data: IdConnections): string[] {
const keysData = Object.keys(data);
const resultsDas: string[] = [];
const results = keysData.forEach((item) => {
@@ -151,8 +151,8 @@ export function wrapperForEdgeString(data: idConnections): string[] {
return resultsDas;
}
-export function wrapperEdgeVisibility(data: connectionFromTo[]): edgeVisibility[] {
- let transformedArray: edgeVisibility[] = data.map(function (item) {
+export function wrapperEdgeVisibility(data: ConnectionFromTo[]): EdgeVisibility[] {
+ let transformedArray: EdgeVisibility[] = data.map(function (item) {
const from_stringModified = item.from.replace('/', '_');
const to_stringModified = item.to.replace('/', '_');
const elementString = `${from_stringModified}_fromto_${to_stringModified}`;
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
index 6c7260176..1508e4c4c 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
@@ -1,5 +1,5 @@
import React, { useRef, useState, useMemo, useEffect } from 'react';
-import Scatterplot, { KeyedScatterplotProps } from './components/Scatterplot';
+import { ScatterPlot, KeyedScatterplotProps as KeyedScatterPlotProps } from './components/Scatterplot';
import { GraphMetadata } from '@graphpolaris/shared/lib/data-access/statistics';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
@@ -10,11 +10,11 @@ import { findConnectionsNodes, getRegionData, setExtension, filterArray, getUniq
import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
import {
UserSelection,
- regionData,
- dataConfig,
+ RegionData,
+ DataConfig,
AugmentedNodeAttributes,
VisualEdgesConfig,
- connectionFromTo,
+ ConnectionFromTo,
AugmentedEdgeAttributes,
DataPoint,
} from './components/types';
@@ -22,8 +22,7 @@ import ConfigPanel from './components/ConfigPanel';
import EdgesLayer, { KeyedEdgesLayerProps } from './components/EdgesLayer';
import { MultiGraph } from 'graphology';
-//import d3 from 'd3';
-import { select, selectAll, scaleOrdinal } from 'd3';
+import { select, selectAll } from 'd3';
import { buildGraphology, configVisualRegion, config, numColorsCategorical, marginAxis, isColorCircleFix } from './utils';
import { Input } from '../../..';
@@ -50,13 +49,13 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
const [divSize, setDivSize] = useState({ width: 0, height: 0 });
const [appState, setAppState] = useState({
isButtonClicked: false,
- scatterplots: [] as KeyedScatterplotProps[],
- dataRegions: [] as regionData[],
+ scatterPlots: [] as KeyedScatterPlotProps[],
+ dataRegions: [] as RegionData[],
});
const [stateEdges, setStateEdges] = useState({
edgePlotted: [] as KeyedEdgesLayerProps[],
});
- const [arrayConnections, setarrayConnections] = useState<connectionFromTo[][]>([]);
+ const [arrayConnections, setarrayConnections] = useState<ConnectionFromTo[][]>([]);
const [computedData, setComputedData] = useState({
region1: [] as DataPoint[],
region2: [] as DataPoint[],
@@ -87,7 +86,7 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
[augmentedNodes, augmentedEdges],
);
- const pushElement = (newElement: connectionFromTo[]) => {
+ const pushElement = (newElement: ConnectionFromTo[]) => {
setarrayConnections((prevArray) => [...prevArray, newElement]);
};
@@ -239,10 +238,10 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
} else {
colorEdges = config.edges.stroke;
- if (appState.scatterplots.length < numColorsCategorical) {
- colorEdges = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1];
+ if (appState.scatterPlots.length < numColorsCategorical) {
+ colorEdges = visualizationColors.GPCat.colors[14][appState.scatterPlots.length + 1];
} else {
- colorEdges = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1 - numColorsCategorical];
+ colorEdges = visualizationColors.GPCat.colors[14][appState.scatterPlots.length + 1 - numColorsCategorical];
}
}
@@ -252,8 +251,8 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
};
const newEdgePlot: KeyedEdgesLayerProps = {
- key: appState.scatterplots.length.toString(),
- dataConnections: arrayConnections[appState.scatterplots.length - 2],
+ key: appState.scatterPlots.length.toString(),
+ dataConnections: arrayConnections[appState.scatterPlots.length - 2],
visualConfig: configVisualEdges,
data1: computedData.region1,
data2: computedData.region2,
@@ -268,7 +267,7 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
}
}, [computedData.region2]);
- const handleUpdateData = (data: dataConfig) => {
+ const handleUpdateData = (data: DataConfig) => {
let colorCircle: string;
let strokeCircle: string;
@@ -276,23 +275,23 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
colorCircle = config.circle.fillClr;
strokeCircle = config.circle.strokeClr;
} else {
- if (appState.scatterplots.length < numColorsCategorical) {
- colorCircle = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1];
+ if (appState.scatterPlots.length < numColorsCategorical) {
+ colorCircle = visualizationColors.GPCat.colors[14][appState.scatterPlots.length + 1];
} else {
- colorCircle = visualizationColors.GPCat.colors[14][appState.scatterplots.length + 1 - numColorsCategorical];
+ colorCircle = visualizationColors.GPCat.colors[14][appState.scatterPlots.length + 1 - numColorsCategorical];
}
strokeCircle = config.circle.strokeClr;
}
const regionUserSelection: UserSelection = {
- name: `region${appState.scatterplots.length}`,
+ name: `region${appState.scatterPlots.length}`,
nodeName: data.entityVertical,
attributeAsRegion: data.attributeEntity,
attributeAsRegionSelection: data.attributeValueSelected,
placement: {
- xAxis: data.orderNameXaxis,
- yAxis: data.orderNameYaxis,
+ xAxis: data.orderNameXAxis,
+ yAxis: data.orderNameYAxis,
colorNodes: colorCircle,
colorNodesStroke: strokeCircle,
colorFillBrush: config.brush.fillClr,
@@ -300,7 +299,7 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
},
};
- const regionDataUser: regionData = getRegionData(augmentedNodes, regionUserSelection);
+ const regionDataUser: RegionData = getRegionData(augmentedNodes, regionUserSelection);
let xScaleShared: any;
let yScaleShared: any;
@@ -349,8 +348,8 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
}
const arrayIDs = regionDataUser.idData.map((item) => item);
- const newScatterplot: KeyedScatterplotProps = {
- key: appState.scatterplots.length,
+ const newScatterPlot: KeyedScatterPlotProps = {
+ key: appState.scatterPlots.length,
data: regionDataUser,
visualConfig: configVisualRegion,
xScaleRange: xScaleShared,
@@ -363,21 +362,21 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
setAppState({
...appState,
- scatterplots: [...appState.scatterplots, newScatterplot],
+ scatterPlots: [...appState.scatterPlots, newScatterPlot],
dataRegions: [...appState.dataRegions, regionDataUser],
});
- idBrushed.current[appState.scatterplots.length] = [];
+ idBrushed.current[appState.scatterPlots.length] = [];
- if (appState.scatterplots.length >= 2) {
+ if (appState.scatterPlots.length >= 2) {
configVisualEdges.current = {
...configVisualEdges.current,
- height: configVisualEdges.current.height + configVisualRegion.height * (appState.scatterplots.length - 1),
- offsetY: configVisualRegion.height * (appState.scatterplots.length - 1),
+ height: configVisualEdges.current.height + configVisualRegion.height * (appState.scatterPlots.length - 1),
+ offsetY: configVisualRegion.height * (appState.scatterPlots.length - 1),
};
}
- if (appState.scatterplots.length == 0) {
+ if (appState.scatterPlots.length == 0) {
} else {
if (graphologyGraph) {
const [connectedD, connectedD2] = findConnectionsNodes(
@@ -405,14 +404,14 @@ export const VisSemanticSubstrates = ({ data, configuration }: VisualizationProp
{divSize.width > 0 && (
<>
<div className="w-full regionContainer z-0">
- {appState.scatterplots.map((scatterplot) => (
- <Scatterplot {...scatterplot} width={divSize.width} />
+ {appState.scatterPlots.map((scatterPlot) => (
+ <ScatterPlot {...scatterPlot} width={divSize.width} />
))}
</div>
<div className="pointer-events-none absolute top-0 w-full flex flex-row justify-center">
- {stateEdges.edgePlotted.map((edegePlot, index) => (
+ {stateEdges.edgePlotted.map((edgePlot, index) => (
<div key={index} className="absolute">
- <EdgesLayer {...edegePlot} width={divSize.width} />
+ <EdgesLayer {...edgePlot} width={divSize.width} />
</div>
))}
</div>
--
GitLab