fix mutual graph

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;

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;

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