Refactoring and fixing problems (#317)

* fix(Map): fix design of kills widget, fix design of signatures widget - refactor a lot of code, fixed problem with tooltip blinking

* fix(Map): refactor Tracking dialog, refactor Activity tracker, refactor codebase and some styles

* fix(Core): don't count character passage on manual add connection

* refactor(Core): improved characters tracking API

* fix(Core): fixed link signature to system on 'leads to' set

* fix(Map): Refactor map settings and prepared it to easier using

* fix(Map): Add support new command for following update

* fix(Map): Add support new command for main update

* refactor(Core): Reduce map init data by using cached system static data

* refactor(Core): Reduce map init data by extract signatures loading to a separate event

* fix(Core): adjusted IP rate limits

* fix(Map): Update design of tracking characters. Added icons for following and main. Added ability to see that character on the station or structure

---------

Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai>
Co-authored-by: Dmitry Popov <dmitriypopovsamara@gmail.com>

assets/js/hooks/Mapper/components/mapInterface/widgets/CommentsWidget/CommentsWidget.tsx

@@ -44,6 +44,7 @@ export const CommentsWidget = () => {
 
   return (
     <Widget
+      contentClassName="my-1"
       label={
         <div ref={containerRef} className="flex justify-between items-center gap-1 text-xs w-full">
           <div className="flex items-center gap-1">

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemInfo/SystemInfo.tsx

@@ -5,20 +5,20 @@ import { SystemInfoContent } from './SystemInfoContent';
 import { PrimeIcons } from 'primereact/api';
 import { useState, useCallback } from 'react';
 import { SystemSettingsDialog } from '@/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx';
-import { getSystemById } from '@/hooks/Mapper/helpers';
 import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 export const SystemInfo = () => {
   const [visible, setVisible] = useState(false);
 
   const {
-    data: { selectedSystems, systems },
+    data: { selectedSystems },
   } = useMapRootState();
 
   const [systemId] = selectedSystems;
 
-  const sys = getSystemById(systems, systemId)!;
-  const { solar_system_name: solarSystemName } = sys?.system_static_info || {};
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+  const { solar_system_name: solarSystemName } = systemStaticInfo || {};
 
   const isNotSelectedSystem = selectedSystems.length !== 1;
 

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemInfo/SystemInfoContent/SystemInfoContent.tsx

@@ -3,6 +3,7 @@ import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormhol
 import { useMemo } from 'react';
 import { getSystemById, sortWHClasses } from '@/hooks/Mapper/helpers';
 import { InfoDrawer, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 interface SystemInfoContentProps {
   systemId: string;
@@ -14,9 +15,9 @@ export const SystemInfoContent = ({ systemId }: SystemInfoContentProps) => {
   } = useMapRootState();
 
   const sys = getSystemById(systems, systemId)! || {};
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
   const { description } = sys;
-  const { system_class, region_name, constellation_name, statics, effect_name, effect_power } =
-    sys.system_static_info || {};
+  const { system_class, region_name, constellation_name, statics, effect_name, effect_power } = systemStaticInfo || {};
   const isWH = isWormholeSpace(system_class);
   const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
 

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKills.tsx

@@ -1,106 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import { SystemKillsContent } from './SystemKillsContent/SystemKillsContent';
-import { KillsHeader } from './components/SystemKillsHeader';
-import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
-import { useSystemKills } from './hooks/useSystemKills';
-import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';
-
-export const SystemKills: React.FC = React.memo(() => {
-  const {
-    data: { selectedSystems, systems, isSubscriptionActive },
-    outCommand,
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems || [];
-  const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
-
-  const systemNameMap = useMemo(() => {
-    const map: Record<string, string> = {};
-    systems.forEach(sys => {
-      map[sys.id] = sys.temporary_name || sys.name || '???';
-    });
-    return map;
-  }, [systems]);
-
-  const systemBySolarSystemId = useMemo(() => {
-    const map: Record<number, SolarSystemRawType> = {};
-    systems.forEach(sys => {
-      if (sys.system_static_info?.solar_system_id != null) {
-        map[sys.system_static_info.solar_system_id] = sys;
-      }
-    });
-    return map;
-  }, [systems]);
-
-  const [settings] = useKillsWidgetSettings();
-  const visible = settings.showAll;
-
-  const { kills, isLoading, error } = useSystemKills({
-    systemId,
-    outCommand,
-    showAllVisible: visible,
-    sinceHours: settings.timeRange,
-  });
-
-  const isNothingSelected = !systemId && !visible;
-  const showLoading = isLoading && kills.length === 0;
-
-  const filteredKills = useMemo(() => {
-    if (!settings.whOnly || !visible) return kills;
-    return kills.filter(kill => {
-      const system = systemBySolarSystemId[kill.solar_system_id];
-      if (!system) {
-        console.warn(`System with id ${kill.solar_system_id} not found.`);
-        return false;
-      }
-      return isWormholeSpace(system.system_static_info.system_class);
-    });
-  }, [kills, settings.whOnly, systemBySolarSystemId, visible]);
-
-  return (
-    <div className="h-full flex flex-col">
-      <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
-        {!isSubscriptionActive ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">
-              Kills available with &#39;Active&#39; map subscription only (contact map administrators)
-            </span>
-          </div>
-        ) : isNothingSelected ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">
-              No system selected (or toggle &quot;Show all systems&quot;)
-            </span>
-          </div>
-        ) : showLoading ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
-          </div>
-        ) : error ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-red-400 text-sm">{error}</span>
-          </div>
-        ) : !filteredKills || filteredKills.length === 0 ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
-          </div>
-        ) : (
-          <SystemKillsContent
-            kills={filteredKills}
-            systemNameMap={systemNameMap}
-            onlyOneSystem={!visible}
-            timeRange={settings.timeRange}
-          />
-        )}
-      </Widget>
-
-      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
-    </div>
-  );
-});
-
-SystemKills.displayName = 'SystemKills';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss

@@ -1,35 +0,0 @@
-// Custom scrollbar styling is now handled by the global custom-scrollbar class
-.scrollerContent {
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 100% !important;
-}
-
-// VirtualScroller specific styles that can't be handled with Tailwind
-.VirtualScroller {
-  overflow: hidden !important;
-  display: flex !important;
-  flex-direction: column !important;
-  height: 100% !important;
-
-  // Target this specific VirtualScroller instance
-  &:global(.p-virtualscroller) {
-    height: 100% !important;
-
-    :global(.p-virtualscroller-content) {
-      height: 100% !important;
-    }
-  }
-}
-
-// Fix for PrimeReact VirtualScroller - these need to be global
-:global {
-  .p-virtualscroller {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .p-virtualscroller-content {
-    flex: 1;
-  }
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillItemTemplate.tsx

@@ -1,20 +0,0 @@
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import { KillRow } from './SystemKillsRow';
-import clsx from 'clsx';
-
-export function KillItemTemplate(
-  systemNameMap: Record<string, string>,
-  onlyOneSystem: boolean,
-  kill: DetailedKill,
-  options: VirtualScrollerTemplateOptions,
-) {
-  const systemIdStr = String(kill.solar_system_id);
-  const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
-
-  return (
-    <div style={{ height: `${options.props.itemSize}px` }} className={clsx({ 'bg-gray-900': options.odd })}>
-      <KillRow killDetails={kill} systemName={systemName} onlyOneSystem={onlyOneSystem} />
-    </div>
-  );
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsRow.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { KillRowDetail } from './KillRowDetail.tsx';
-
-export interface KillRowProps {
-  killDetails: DetailedKill;
-  systemName: string;
-  onlyOneSystem?: boolean;
-}
-
-const KillRowComponent: React.FC<KillRowProps> = ({ killDetails, systemName, onlyOneSystem = false }) => {
-  return <KillRowDetail killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
-};
-
-export const KillRow = React.memo(KillRowComponent);

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/index.ts

@@ -1 +0,0 @@
-export * from './SystemKills';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.module.scss

@@ -1,79 +0,0 @@
-.verticalTabsContainer {
-  display: flex;
-  width: 100%;
-  min-height: 300px;
-
-  :global {
-    .p-tabview {
-      width: 100%;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .p-tabview-panels {
-      padding: 6px 1rem !important;
-      flex-grow: 1;
-    }
-
-    .p-tabview-nav-container {
-      border-right: none;
-      height: 100%;
-    }
-
-    .p-tabview-nav {
-      flex-direction: column;
-      width: 150px;
-      min-height: 100%;
-      border: none;
-
-      li {
-        width: 100%;
-        border-right: 4px solid var(--surface-hover);
-        background-color: var(--surface-card);
-
-        transition:
-          background-color 200ms,
-          border-right-color 200ms;
-
-        &:hover {
-          background-color: var(--surface-hover);
-          border-right: 4px solid var(--surface-100);
-        }
-
-        .p-tabview-nav-link {
-          transition: color 200ms;
-
-          justify-content: flex-end;
-          padding: 10px;
-          //background-color: var(--surface-card);
-          background-color: initial;
-          border: none;
-          color: var(--gray-400);
-
-          border-radius: initial;
-          font-weight: 400;
-          margin: 0;
-        }
-
-        &.p-tabview-selected {
-          background-color: var(--surface-50);
-          border-right: 4px solid var(--primary-color);
-
-          .p-tabview-nav-link {
-            font-weight: 600;
-            color: var(--primary-color);
-          }
-
-          &:hover {
-            //background-color: var(--surface-hover);
-            border-right: 4px solid var(--primary-color);
-          }
-        }
-      }
-    }
-
-    .p-tabview-panel {
-      flex-grow: 1;
-    }
-  }
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx

@@ -2,7 +2,6 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
 import { Button } from 'primereact/button';
 import { TabPanel, TabView } from 'primereact/tabview';
-import styles from './SystemSignatureSettingsDialog.module.scss';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 import { Dropdown } from 'primereact/dropdown';
 import {
@@ -72,26 +71,24 @@ export const SystemSignatureSettingsDialog = ({
     <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg h-[500px]">
       <div className="flex flex-col gap-3 justify-between h-full">
         <div className="flex flex-col gap-2">
-          <div className={styles.verticalTabsContainer}>
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
-              className={styles.verticalTabView}
-            >
-              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {SIGNATURE_SETTINGS.filterFlags.map(renderSetting)}
-                </div>
-              </TabPanel>
-              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
-                  <div className="my-2 border-t border-stone-700/50"></div>
-                  {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
-                </div>
-              </TabPanel>
-            </TabView>
-          </div>
+          <TabView
+            activeIndex={activeIndex}
+            onTabChange={e => setActiveIndex(e.index)}
+            className="vertical-tabs-container"
+          >
+            <TabPanel header="Filters">
+              <div className="w-full h-full flex flex-col gap-1">
+                {SIGNATURE_SETTINGS.filterFlags.map(renderSetting)}
+              </div>
+            </TabPanel>
+            <TabPanel header="User Interface">
+              <div className="w-full h-full flex flex-col gap-1">
+                {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
+                <div className="my-2 border-t border-stone-700/50"></div>
+                {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
+              </div>
+            </TabPanel>
+          </TabView>
         </div>
 
         <div className="flex gap-2 justify-end">

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/SystemKillsList.tsx

@@ -1,26 +1,26 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
-import classes from './SystemKillsContent.module.scss';
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
 
-export const ITEM_HEIGHT = 35;
+export const KILLS_ROW_HEIGHT = 40;
 
-export interface SystemKillsContentProps {
+export type SystemKillsContentProps = {
   kills: DetailedKill[];
-  systemNameMap: Record<string, string>;
   onlyOneSystem?: boolean;
   timeRange?: number;
   limit?: number;
-}
+} & WithClassName;
 
-export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
+export const SystemKillsList = ({
   kills,
-  systemNameMap,
   onlyOneSystem = false,
   timeRange = 4,
   limit,
-}) => {
+  className,
+}: SystemKillsContentProps) => {
   const processedKills = useMemo(() => {
     if (!kills || kills.length === 0) return [];
 
@@ -47,30 +47,17 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
     return filteredKills;
   }, [kills, timeRange, limit]);
 
-  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
-
-  // Define style for the VirtualScroller
-  const virtualScrollerStyle: React.CSSProperties = {
-    boxSizing: 'border-box',
-    height: '100%', // Use 100% height to fill the container
-  };
+  const itemTemplate = useSystemKillsItemTemplate(onlyOneSystem);
 
   return (
-    <div className="h-full w-full flex flex-col overflow-hidden" data-testid="system-kills-content">
-      <VirtualScroller
-        items={processedKills}
-        itemSize={ITEM_HEIGHT}
-        itemTemplate={itemTemplate}
-        className={`w-full h-full flex-1 select-none ${classes.VirtualScroller}`}
-        style={virtualScrollerStyle}
-        pt={{
-          content: {
-            className: `custom-scrollbar ${classes.scrollerContent}`,
-          },
-        }}
-      />
-    </div>
+    <VirtualScroller
+      items={processedKills}
+      itemSize={KILLS_ROW_HEIGHT}
+      itemTemplate={itemTemplate}
+      className={clsx(
+        'w-full flex-1 select-none !h-full overflow-x-hidden overflow-y-auto custom-scrollbar',
+        className,
+      )}
+    />
   );
 };
-
-export default SystemKillsContent;

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/index.ts

@@ -0,0 +1 @@
+export * from './SystemKillsList';

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/WSystemKills.tsx

@@ -0,0 +1,109 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+import { SystemKillsList } from './SystemKillsList';
+import { KillsHeader } from './components/SystemKillsHeader';
+import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
+import { useSystemKills } from './hooks/useSystemKills';
+import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+
+const SystemKillsContent = () => {
+  const {
+    data: { selectedSystems, isSubscriptionActive },
+    outCommand,
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+
+  const [settings] = useKillsWidgetSettings();
+  const visible = settings.showAll;
+
+  const { kills, isLoading, error } = useSystemKills({
+    systemId,
+    outCommand,
+    showAllVisible: visible,
+    sinceHours: settings.timeRange,
+  });
+
+  const isNothingSelected = !systemId && !visible;
+  const showLoading = isLoading && kills.length === 0;
+
+  const filteredKills = useMemo(() => {
+    if (!settings.whOnly || !visible) return kills;
+    return kills.filter(kill => {
+      if (!systemStaticInfo) {
+        console.warn(`System with id ${kill.solar_system_id} not found.`);
+        return false;
+      }
+      return isWormholeSpace(systemStaticInfo.system_class);
+    });
+  }, [kills, settings.whOnly, systemStaticInfo, visible]);
+
+  if (!isSubscriptionActive) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          Kills available with &#39;Active&#39; map subscription only (contact map administrators)
+        </span>
+      </div>
+    );
+  }
+
+  if (isNothingSelected) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          No system selected (or toggle &quot;Show all systems&quot;)
+        </span>
+      </div>
+    );
+  }
+
+  if (showLoading) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-red-400 text-sm">{error}</span>
+      </div>
+    );
+  }
+
+  if (!filteredKills || filteredKills.length === 0) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
+      </div>
+    );
+  }
+
+  return <SystemKillsList kills={filteredKills} onlyOneSystem={!visible} timeRange={settings.timeRange} />;
+};
+
+export const WSystemKills = () => {
+  const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
+  const {
+    data: { selectedSystems },
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const handleOpenSettings = useCallback(() => setSettingsDialogVisible(true), []);
+
+  return (
+    <Widget label={<KillsHeader systemId={systemId} onOpenSettings={handleOpenSettings} />}>
+      <SystemKillsContent />
+      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
+    </Widget>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillItemTemplate.tsx

@@ -0,0 +1,24 @@
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { KillRowDetail } from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx';
+import clsx from 'clsx';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+
+export const KillItemTemplate = (
+  onlyOneSystem: boolean,
+  kill: DetailedKill,
+  options: VirtualScrollerTemplateOptions,
+) => {
+  const systemName = getSystemStaticInfo(kill.solar_system_id)?.solar_system_name || `System ${kill.solar_system_id}`;
+
+  return (
+    <div style={{ height: `${options.props.itemSize}px` }}>
+      <KillRowDetail
+        killDetails={kill}
+        systemName={systemName}
+        onlyOneSystem={onlyOneSystem}
+        className={clsx(options.odd && 'bg-stone-800/50')}
+      />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import {
@@ -14,14 +14,15 @@ import {
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import classes from './KillRowDetail.module.scss';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
 
-export interface CompactKillRowProps {
+export type CompactKillRowProps = {
   killDetails: DetailedKill;
   systemName: string;
   onlyOneSystem: boolean;
-}
+} & WithClassName;
 
-export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+export const KillRowDetail = ({ killDetails, systemName, onlyOneSystem, className }: CompactKillRowProps) => {
   const {
     killmail_id = 0,
     // Victim data
@@ -80,13 +81,24 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
     'Victim',
   );
 
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id,
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = useMemo(
+    () =>
+      getAttackerPrimaryImageAndTooltip(
+        attackerIsNpc,
+        attackerAllianceLogoUrl,
+        attackerCorpLogoUrl,
+        final_blow_alliance_name,
+        final_blow_corp_name,
+        final_blow_ship_type_id,
+      ),
+    [
+      attackerAllianceLogoUrl,
+      attackerCorpLogoUrl,
+      attackerIsNpc,
+      final_blow_alliance_name,
+      final_blow_corp_name,
+      final_blow_ship_type_id,
+    ],
   );
 
   // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
@@ -100,6 +112,8 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
       className={clsx(
         'h-10 flex items-center border-b border-stone-800',
         'text-xs whitespace-nowrap overflow-hidden leading-none',
+        'px-1',
+        className,
       )}
     >
       {/* Victim Section */}
@@ -142,12 +156,14 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
           {victim_char_name}
           <span className="text-stone-400"> / {victimAffiliationTicker}</span>
         </div>
-        <div className="truncate text-stone-300">
-          {victim_ship_name}
+        <div className="truncate text-stone-300 flex items-center gap-1">
+          <span className="text-stone-400 overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
+            {victim_ship_name}
+          </span>
           {killValueFormatted && (
             <>
-              <span className="ml-1 text-stone-400">/</span>
-              <span className="ml-1 text-green-400">{killValueFormatted}</span>
+              <span className="text-stone-400">/</span>
+              <span className="text-green-400">{killValueFormatted}</span>
             </>
           )}
         </div>

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKills.ts

@@ -1,10 +1,9 @@
 import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import debounce from 'lodash.debounce';
-import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useKillsWidgetSettings } from './useKillsWidgetSettings';
-import { useMapEventListener, MapEvent } from '@/hooks/Mapper/events';
 
 interface UseSystemKillsProps {
   systemId?: string;
@@ -29,10 +28,6 @@ function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceH
   return Object.values(byId);
 }
 
-interface DetailedKillsEvent extends MapEvent<Commands> {
-  payload: Record<string, DetailedKill[]>;
-}
-
 export function useSystemKills({ systemId, outCommand, showAllVisible = false, sinceHours = 24 }: UseSystemKillsProps) {
   const { data, update } = useMapRootState();
   const { detailedKills = {}, systems = [] } = data;
@@ -41,32 +36,6 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
 
   const effectiveSinceHours = sinceHours;
 
-  const updateDetailedKills = useCallback(
-    (newKillsMap: Record<string, DetailedKill[]>) => {
-      update(prev => {
-        const oldKills = prev.detailedKills ?? {};
-        const updated = { ...oldKills };
-        for (const [sid, killsArr] of Object.entries(newKillsMap)) {
-          updated[sid] = killsArr;
-        }
-        return { ...prev, detailedKills: updated };
-      }, true);
-    },
-    [update],
-  );
-
-  useMapEventListener((event: MapEvent<Commands>) => {
-    if (event.name === Commands.detailedKillsUpdated) {
-      const detailedEvent = event as DetailedKillsEvent;
-      if (systemId && !Object.keys(detailedEvent.payload).includes(systemId.toString())) {
-        return false;
-      }
-      updateDetailedKills(detailedEvent.payload);
-      return true;
-    }
-    return false;
-  });
-
   const effectiveSystemIds = useMemo(() => {
     if (showAllVisible) {
       return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKillsItemTemplate.ts

@@ -4,10 +4,9 @@ import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { KillItemTemplate } from '../components/KillItemTemplate';
 
-export function useSystemKillsItemTemplate(systemNameMap: Record<string, string>, onlyOneSystem: boolean) {
+export function useSystemKillsItemTemplate(onlyOneSystem: boolean) {
   return useCallback(
-    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) =>
-      KillItemTemplate(systemNameMap, onlyOneSystem, kill, options),
-    [systemNameMap, onlyOneSystem],
+    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) => KillItemTemplate(onlyOneSystem, kill, options),
+    [onlyOneSystem],
   );
 }

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/index.ts

@@ -0,0 +1 @@
+export * from './WSystemKills';

assets/js/hooks/Mapper/components/mapInterface/widgets/index.ts

@@ -3,4 +3,4 @@ export * from './SystemInfo';
 export * from './RoutesWidget';
 export * from './SystemSignatures';
 export * from './SystemStructures';
-export * from './SystemKills';
+export * from './WSystemKills';