fix: renovate update errors

block · Jan 21, 2025 · 86a344f · 86a344f
1 parent e15633a
commit 86a344f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/frontend/console/src/features/graph/GraphPane.tsx b/frontend/console/src/features/graph/GraphPane.tsx
@@ -1,6 +1,7 @@
 import cytoscape from 'cytoscape'
-import type { FcoseLayoutOptions } from 'cytoscape-fcose'
+import type { LayoutOptions } from 'cytoscape'
 import fcose from 'cytoscape-fcose'
+import type { FcoseLayoutOptions } from 'cytoscape-fcose'
 
 import { useEffect, useRef, useState } from 'react'
 import type React from 'react'
@@ -9,8 +10,12 @@ import { useUserPreferences } from '../../providers/user-preferences-provider'
 import { createGraphStyles } from './graph-styles'
 import { type FTLNode, getGraphData } from './graph-utils'
 
+// @ts-ignore - Known type incompatibility with cytoscape plugins
 cytoscape.use(fcose)
 
+// Add this type intersection
+type CytoscapeFcoseLayout = LayoutOptions & FcoseLayoutOptions
+
 interface GraphPaneProps {
   onTapped?: (item: FTLNode | null, moduleName: string | null) => void
 }
@@ -189,24 +194,23 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
     })
 
     if (hasNewNodesWithoutPositions) {
-      const layoutOptions = {
+      const layoutOptions: CytoscapeFcoseLayout = {
         name: 'fcose',
-        animate: false,
         quality: 'proof',
+        randomize: false,
+        animate: false,
         nodeSeparation: 150,
         idealEdgeLength: 200,
         nodeRepulsion: 20000,
         padding: 50,
-        randomize: false,
         tile: true,
         tilingPaddingVertical: 100,
         tilingPaddingHorizontal: 100,
         fit: true,
-        componentSpacing: 100,
         edgeElasticity: 0.45,
         gravity: 0.75,
         initialEnergyOnIncremental: 0.5,
-      } as FcoseLayoutOptions
+      }
 
       const layout = cy.layout(layoutOptions)
       layout.run()

diff --git a/frontend/console/src/features/graph/graph-styles.ts b/frontend/console/src/features/graph/graph-styles.ts
@@ -1,7 +1,7 @@
-import type { Stylesheet } from 'cytoscape'
+import type { StylesheetCSS } from 'cytoscape'
 import colors from 'tailwindcss/colors'
 
-export const createGraphStyles = (isDarkMode: boolean): Stylesheet[] => {
+export const createGraphStyles = (isDarkMode: boolean): StylesheetCSS[] => {
   const theme = {
     primary: isDarkMode ? colors.indigo[400] : colors.indigo[200],
     background: isDarkMode ? colors.slate[700] : colors.slate[200],
@@ -17,7 +17,7 @@ export const createGraphStyles = (isDarkMode: boolean): Stylesheet[] => {
   return [
     {
       selector: 'node',
-      style: {
+      css: {
         'background-color': theme.primary,
         label: 'data(label)',
         'text-valign': 'center',
@@ -36,7 +36,7 @@ export const createGraphStyles = (isDarkMode: boolean): Stylesheet[] => {
     },
     {
       selector: 'edge',
-      style: {
+      css: {
         width: 2,
         'line-color': theme.arrow,
         'curve-style': 'bezier',
@@ -47,19 +47,16 @@ export const createGraphStyles = (isDarkMode: boolean): Stylesheet[] => {
     },
     {
       selector: '$node > node',
-      style: {
-        'padding-top': '10px',
-        'padding-left': '10px',
-        'padding-bottom': '10px',
-        'padding-right': '10px',
+      css: {
+        padding: '10px',
         'text-valign': 'top',
         'text-halign': 'center',
         'background-color': theme.background,
       },
     },
     {
       selector: 'node[type="groupNode"]',
-      style: {
+      css: {
         'background-color': theme.primary,
         shape: 'round-rectangle',
         width: '180px',
@@ -76,23 +73,23 @@ export const createGraphStyles = (isDarkMode: boolean): Stylesheet[] => {
     },
     {
       selector: ':parent',
-      style: {
+      css: {
         'text-valign': 'top',
         'text-halign': 'center',
         'background-opacity': 1,
       },
     },
     {
       selector: '.selected',
-      style: {
+      css: {
         'background-color': theme.selected.bg,
         'border-width': 2,
         'border-color': theme.selected.border,
       },
     },
     {
       selector: 'node[type="node"]',
-      style: {
+      css: {
         'background-color': 'data(backgroundColor)',
         color: theme.text,
         shape: 'round-rectangle',