diff --git a/src/stores/charts.js b/src/stores/charts.js index 31e40914..741b0776 100644 --- a/src/stores/charts.js +++ b/src/stores/charts.js @@ -29,7 +29,6 @@ export const useChartsStore = defineStore('Charts', () => { const mutualGraphStatus = reactive({ isFetching: false, hasFetched: false, - fetchError: '', completionNotified: false, friendSignature: 0, needsRefetch: false, @@ -103,7 +102,6 @@ export const useChartsStore = defineStore('Charts', () => { Object.assign(mutualGraphFetchState, createDefaultFetchState()); mutualGraphStatus.isFetching = false; mutualGraphStatus.hasFetched = false; - mutualGraphStatus.fetchError = ''; mutualGraphStatus.completionNotified = false; mutualGraphStatus.friendSignature = 0; mutualGraphStatus.needsRefetch = false; diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue index c241cd88..ea778540 100644 --- a/src/views/Charts/components/MutualFriends.vue +++ b/src/views/Charts/components/MutualFriends.vue @@ -75,7 +75,6 @@ const chartRef = ref(null); let chartInstance = null; let resizeObserver = null; - let lastRenderablePayload = null; const isFetching = computed({ get: () => status.isFetching, @@ -89,12 +88,6 @@ status.hasFetched = val; } }); - const fetchError = computed({ - get: () => status.fetchError, - set: (val) => { - status.fetchError = val; - } - }); const totalFriends = computed(() => friends.value.size); const isOptOut = computed(() => Boolean(currentUser.value?.hasSharedConnectionsOptOut)); @@ -181,9 +174,9 @@ return; } chartInstance = echarts.init(chartRef.value, chartTheme.value, { useDirtyRect: totalFriends.value > 1000 }); - if (lastRenderablePayload) { - updateChart(lastRenderablePayload); - } else if (graphReady.value) { + chartInstance.on('click', handleChartNodeClick); + + if (graphReady.value) { // @ts-ignore updateChart(graphPayload.value); } @@ -286,7 +279,6 @@ } isFetching.value = true; - fetchError.value = ''; status.completionNotified = false; status.needsRefetch = false; status.cancelRequested = false; @@ -376,23 +368,13 @@ } return; } - lastRenderablePayload = payload; if (!chartInstance) { return; } - chartInstance.setOption(createChartOption(payload), true); - registerChartEvents(); + chartInstance.setOption(createChartOption(payload)); nextTick(() => chartInstance?.resize()); } - function registerChartEvents() { - if (!chartInstance) { - return; - } - chartInstance.off('click', handleChartNodeClick); - chartInstance.on('click', handleChartNodeClick); - } - function handleChartNodeClick(params) { if (params?.dataType !== 'node') { return; diff --git a/src/views/Charts/composables/useMutualGraphChart.js b/src/views/Charts/composables/useMutualGraphChart.js index 06b5e4d1..f5c2b0de 100644 --- a/src/views/Charts/composables/useMutualGraphChart.js +++ b/src/views/Charts/composables/useMutualGraphChart.js @@ -63,21 +63,17 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { const links = []; const linkKeys = new Set(); - function ensureNode(id, name, rawUser) { + function ensureNode(id, name) { if (!id) { return null; } const existing = nodes.get(id); if (existing) { - if (!existing.rawUser && rawUser) { - existing.rawUser = rawUser; - } return existing; } const node = { id, - name: name || id, - value: name || id + name: name || id }; nodes.set(id, node); return node; @@ -108,7 +104,7 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { for (const [friendId, { friend, mutuals }] of mutualMap.entries()) { const friendRef = friend?.ref || cachedUsers.get(friendId); const friendName = friendRef?.displayName; - ensureNode(friendId, friendName, friendRef); + ensureNode(friendId, friendName); for (const mutual of mutuals) { if (!mutual?.id) { @@ -137,7 +133,7 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { node.symbolSize = size; node.label = { show: true, - formatter: `${displayName}` + formatter: displayName }; node.itemStyle = { ...(node.itemStyle || {}), @@ -205,14 +201,17 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { roamTrigger: 'global', data: nodes, links, - animationThreshold: 1000, label: { - position: 'right', - formatter: '{b}' + position: 'right' }, symbol: 'circle', emphasis: { focus: 'adjacency', + scale: true, + itemStyle: { + borderWidth: 3, + opacity: 1 + }, lineStyle: { width: 5, opacity: 0.5