Convert remaining files to TypeScript (#116)

* convert to typescript

* organize imports

* sort type definition properties for improved clarity and consistency

Author: Flet

ui/src/App.tsx

@@ -1,11 +1,11 @@
 import './App.css'
 
+import { ConfigProvider, theme } from 'antd'
 import { BrowserRouter } from 'react-router'
+import { useDarkModeSetting } from './hooks/useDarkModeSetting'
 import { AuthenticationProvider } from './providers/AuthenticationProvider'
 import { MessageProvider } from './providers/MessageProvider'
 import { MainRouter } from './routes/MainRouter'
-import { ConfigProvider, theme } from 'antd'
-import { useDarkModeSetting } from './hooks/useDarkModeSetting'
 
 import { themeConfig } from './themeConfig'
 

ui/src/components/ApiKeyModal/index.tsx

@@ -1,8 +1,8 @@
 import { CopyOutlined } from '@ant-design/icons'
-import { Modal, Tag, Typography, Spin } from 'antd'
-import { examples } from './examples'
-import { useMessageApi } from '../../providers/MessageProvider'
+import { Modal, Spin, Tag, Typography } from 'antd'
 import { useApiKey } from '../../hooks/useApiKey'
+import { useMessageApi } from '../../providers/MessageProvider'
+import { examples } from './examples'
 
 const { Paragraph, Text } = Typography
 

ui/src/components/FileFlow/FileTreeCard.tsx

@@ -1,35 +1,36 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  ReactFlow,
   Background,
+  Controls,
+  type Edge,
+  MiniMap,
+  type Node,
+  ReactFlow,
+  applyEdgeChanges,
+  applyNodeChanges,
   isNode,
   useEdgesState,
   useNodesState,
-  applyNodeChanges,
-  applyEdgeChanges,
-  Controls,
-  MiniMap,
   useReactFlow,
 } from '@xyflow/react'
-import { initialEdges, initialNodes } from '../../data/initialData.js'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { IndexConnectEdge } from './EdgeTypes/IndexConnectEdge'
 import EventNode from './NodeTypes/EventNode'
 import '@xyflow/react/dist/style.css'
 import ClickGuide from '../../utils/ClickGuide'
+import DownloadImage from '../../utils/DownloadImage'
 import ExceededGuide from '../../utils/ExceededGuide'
 import NodeSearchPanel from '../../utils/NodeSearchPanel'
 import ShowFileListing from '../../utils/ShowFileListing'
 import { antdColors } from '../../utils/colors'
-import { getDagreLayout } from '../../utils/dagreLayout.js'
-import DownloadImage from '../../utils/DownloadImage'
+import { getDagreLayout } from '../../utils/dagreLayout'
 import {
   toggleChildrenVisibility,
   transformElasticSearchDataToElements,
 } from '../../utils/layoutUtils.js'
 
 import { useDarkModeSetting } from '../../hooks/useDarkModeSetting'
-import type { StrelkaNodeData } from '../../utils/indexDataUtils.js'
-import type { StrelkaResponse } from '../../services/api.types.js'
+import type { StrelkaResponse } from '../../services/api.types'
+import type { StrelkaNodeData } from '../../utils/indexDataUtils'
 
 const nodeTypes = {
   event: EventNode,
@@ -48,8 +49,8 @@ export interface FileTreeCardProps {
   fileYaraFilter: string
   fileIocFilter: string
   fileNameFilter: string
-  selectedNodeData: StrelkaNodeData
-  setSelectedNodeData: (nodeData: StrelkaNodeData) => void
+  selectedNodeData: StrelkaResponse
+  setSelectedNodeData: (nodeData: StrelkaResponse) => void
 }
 
 const FileTreeCard = (props: FileTreeCardProps) => {
@@ -66,14 +67,13 @@ const FileTreeCard = (props: FileTreeCardProps) => {
   const [searchTerm, setSearchTerm] = useState('')
   const { fitView } = useReactFlow()
 
-  const layoutedElements = useMemo(
-    () => getDagreLayout(initialNodes, initialEdges),
-    [],
-  )
-  const layoutedNodes = layoutedElements.filter(isNode)
-  const layoutedEdges = layoutedElements.filter((el) => !isNode(el))
+  const layoutedElements = useMemo(() => getDagreLayout([], []), [])
+  const layoutedNodes = layoutedElements.filter(
+    isNode,
+  ) as Node<StrelkaNodeData>[]
+  const layoutedEdges = layoutedElements.filter((el) => !isNode(el)) as Edge[]
   const [nodes, setNodes] = useNodesState(layoutedNodes)
-  const [edges, setEdges] = useEdgesState(layoutedEdges)
+  const [edges, setEdges] = useEdgesState<Edge>(layoutedEdges)
   const showClickGuide = !selectedNodeData
   const [showExceededGuide, setShowExceededGuide] = useState(false)
   const ref = useRef(null)
@@ -107,34 +107,28 @@ const FileTreeCard = (props: FileTreeCardProps) => {
   )
 
   const filteredNodes = useMemo(() => {
-    let nodesToFilter = fileTypeFilter
-      ? nodes.filter((node) =>
-          (node.data as unknown as StrelkaNodeData).nodeMain.includes(
-            fileTypeFilter,
-          ),
-        )
-      : nodes
+    let nodesToFilter = nodes
+
+    if (fileTypeFilter) {
+      nodesToFilter = nodesToFilter.filter((node) =>
+        node.data.nodeMain.includes(fileTypeFilter),
+      )
+    }
 
     if (fileNameFilter) {
       nodesToFilter = nodesToFilter.filter((node) =>
-        (node.data as unknown as StrelkaNodeData).nodeRelationshipId?.includes(
-          fileNameFilter,
-        ),
+        node.data.nodeRelationshipId?.includes(fileNameFilter),
       )
     }
     if (fileYaraFilter) {
       nodesToFilter = nodesToFilter.filter((node) =>
-        (node.data as unknown as StrelkaNodeData).nodeYaraList?.includes(
-          fileYaraFilter,
-        ),
+        node.data.nodeYaraList?.includes(fileYaraFilter),
       )
     }
 
     if (fileIocFilter) {
       nodesToFilter = nodesToFilter.filter((node) =>
-        (node.data as unknown as StrelkaNodeData).nodeIocList?.includes(
-          fileIocFilter,
-        ),
+        node.data.nodeIocList?.includes(fileIocFilter),
       )
     }
 
@@ -155,10 +149,9 @@ const FileTreeCard = (props: FileTreeCardProps) => {
     fileNameFilter,
   ])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: use the correct dependencies
   useEffect(() => {
     fitView({ padding: 0.2 })
-  }, [fileTypeFilter, fileYaraFilter, fileNameFilter, fitView])
+  }, [fitView])
 
   const handleNodeClick = (_event, node) => {
     if (node.type === 'index') {
@@ -255,8 +248,8 @@ const FileTreeCard = (props: FileTreeCardProps) => {
 
     const layoutedData = getDagreLayout(nodesToLayout, edgesToLayout)
 
-    setNodes(layoutedData.filter(isNode))
-    setEdges(layoutedData.filter((el) => !isNode(el)))
+    setNodes(layoutedData.filter(isNode) as Node<StrelkaNodeData>[])
+    setEdges(layoutedData.filter((el) => !isNode(el)) as Edge[])
   }, [data, setEdges, setNodes])
 
   const { isDarkMode } = useDarkModeSetting()

ui/src/components/FileFlow/FileTreeCardWithProvider.tsx

@@ -1,5 +1,5 @@
 import { ReactFlowProvider } from '@xyflow/react'
-import FileTreeCard, { type FileTreeCardProps } from './FileTreeCard' // Adjust the import path as needed
+import FileTreeCard, { type FileTreeCardProps } from './FileTreeCard'
 
 function FileTreeCardWithProvider(props: FileTreeCardProps) {
   return (

ui/src/components/FileOverviews/EmailOverview/EmailOverviewLanding.tsx

@@ -1,6 +1,6 @@
 import { CollapseCard } from '../../CollapseCard'
-import EmailOverviewCard from './EmailOverviewCard'
 import type { OverviewLandingProps } from '../types'
+import EmailOverviewCard from './EmailOverviewCard'
 
 const EmailOverviewLanding = (props: OverviewLandingProps) => {
   const { selectedNodeData, expanded, onExpandChange } = props

ui/src/components/FileOverviews/FileIocsOverview/FileIocsOverviewLanding.tsx

@@ -1,8 +1,8 @@
 import { Collapse, Tag, Typography } from 'antd'
-import { antdColors } from '../../../utils/colors'
-import FileIocsOverviewCard from './FileIocsOverviewCard'
 import { useState } from 'react'
+import { antdColors } from '../../../utils/colors'
 import type { FileIocsOverviewProps } from '../types'
+import FileIocsOverviewCard from './FileIocsOverviewCard'
 
 const { Text } = Typography
 

ui/src/components/FileOverviews/FileTypeOverview/FileTypeOverviewLanding.tsx

@@ -1,8 +1,8 @@
 import { Collapse, Tag, Typography } from 'antd'
 import { useState } from 'react'
 import { antdColors } from '../../../utils/colors'
-import FileTypeOverviewCard from './FileTypeOverviewCard'
 import type { ScanData } from '../types'
+import FileTypeOverviewCard from './FileTypeOverviewCard'
 
 const { Text } = Typography
 

ui/src/components/FileOverviews/FileYara/FileYaraLanding.tsx

@@ -1,6 +1,6 @@
-import YaraOverviewCard from './YaraOverviewCard'
 import { CollapseCard } from '../../CollapseCard'
 import type { OverviewLandingProps } from '../types'
+import YaraOverviewCard from './YaraOverviewCard'
 
 const YaraOverviewLanding = (props: OverviewLandingProps) => {
   const { selectedNodeData, expanded, onExpandChange } = props

ui/src/components/FileOverviews/FileYara/YaraOverviewCard.tsx

@@ -1,8 +1,8 @@
 import { Col, Input, List, Row, Tag, Typography } from 'antd'
 import { useMemo, useState } from 'react'
-import type { OverviewCardProps } from '../types'
-import { getColorForString } from '../../../utils/colors'
 import type { StrelkaResponse } from '../../../services/api.types'
+import { getColorForString } from '../../../utils/colors'
+import type { OverviewCardProps } from '../types'
 
 const { Text, Paragraph } = Typography
 

ui/src/components/FileOverviews/HeaderFooterOverview/HeaderFooterLanding.tsx

@@ -1,6 +1,6 @@
-import FileHeaderFooterCard from './HeaderFooterCard'
 import { CollapseCard } from '../../CollapseCard'
 import type { OverviewLandingProps } from '../types'
+import FileHeaderFooterCard from './HeaderFooterCard'
 
 const HeaderFooterLanding = (props: OverviewLandingProps) => {
   const { selectedNodeData, expanded, onExpandChange } = props