fix(Map): Refactor Local - show ship name, change placement of ship name. Refactor On the Map - show corp and ally logo. Fixed problem with ellipsis at long character and ship names.

assets/js/hooks/Mapper/common-styles/fixes.scss

@@ -99,6 +99,11 @@
 .p-dropdown-item {
   padding: 0.25rem 0.5rem;
   font-size: 14px;
+  width: 100%;
+
+  .p-dropdown-item-label {
+    width: 100%;
+  }
 }
 
 .p-dropdown-item-group {

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx

@@ -17,13 +17,13 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 
-let render = 0;
+// let render = 0;
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
   const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
-  console.log('JOipP', `render ${nodeVars.id}`, render++);
+  // console.log('JOipP', `render ${nodeVars.id}`, render++);
 
   return (
     <>

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx

@@ -17,13 +17,13 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 
-let render = 0;
+// let render = 0;
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
   const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
-  console.log('JOipP', `render ${nodeVars.id}`, render++);
+  // console.log('JOipP', `render ${nodeVars.id}`, render++);
 
   return (
     <>

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.tsx

@@ -22,7 +22,7 @@ export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalC
       )}
       style={{ height: `${options.props.itemSize}px` }}
     >
-      <CharacterCard showShipName={showShipName} {...options} />
+      <CharacterCard showShipName={showShipName} showTicker {...options} />
     </div>
   );
 };

assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.module.scss

@@ -3,7 +3,7 @@
 }
 
 .SidebarOnTheMap {
-  width: 400px;
+  width: 500px;
   padding: 0 !important;
 
   :global {

assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx

@@ -1,15 +1,17 @@
 import classes from './OnTheMap.module.scss';
 import { Sidebar } from 'primereact/sidebar';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
 import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
 import clsx from 'clsx';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
-import { CharacterCard, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
+import { CharacterCard, TooltipPosition, WdCheckbox, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import useLocalStorageState from 'use-local-storage-state';
 import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
 
 type WindowLocalSettingsType = {
   compact: boolean;
@@ -33,7 +35,7 @@ const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: Virt
       })}
       style={{ height: options.props.itemSize + 'px' }}
     >
-      <CharacterCard showSystem {...item} />
+      <CharacterCard showCorporationLogo showAllyLogo showSystem showTicker {...item} />
     </div>
   );
 };
@@ -48,6 +50,8 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
     data: { characters, userCharacters },
   } = useMapRootState();
 
+  const [searchVal, setSearchVal] = useState('');
+
   const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:onTheMap:settings', {
     defaultValue: STORED_DEFAULT_VALUES,
   });
@@ -61,13 +65,54 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
   );
 
   const sorted = useMemo(() => {
-    const out = characters.map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id) })).sort(sortCharacters);
+    let out = characters.map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id) })).sort(sortCharacters);
+
+    if (searchVal !== '') {
+      out = out.filter(x => {
+        const normalized = searchVal.toLowerCase();
+
+        if (x.name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.corporation_name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.alliance_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.corporation_ticker.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.alliance_ticker?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_type_info.name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_type_info.group_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
     if (showOffline && !settings.hideOffline) {
       return out;
     }
 
     return out.filter(x => x.online);
-  }, [showOffline, characters, settings.hideOffline, userCharacters]);
+  }, [showOffline, searchVal, characters, settings.hideOffline, userCharacters]);
 
   return (
     <Sidebar
@@ -79,7 +124,30 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
       icons={<></>}
     >
       <div className={clsx(classes.SidebarContent, '')}>
-        <div className={'flex justify-end items-center gap-2 px-3'}>
+        <div className={'flex justify-between items-center gap-2 px-2 pt-1'}>
+          <IconField>
+            {searchVal.length > 0 && (
+              <WdImgButton
+                className="pi pi-trash"
+                textSize={WdImageSize.large}
+                tooltip={{
+                  content: 'Clear',
+                  className: 'pi p-input-icon',
+                  position: TooltipPosition.top,
+                }}
+                onClick={() => setSearchVal('')}
+              />
+            )}
+            <InputText
+              id="label"
+              aria-describedby="label"
+              autoComplete="off"
+              value={searchVal}
+              placeholder="Type to search"
+              onChange={e => setSearchVal(e.target.value)}
+            />
+          </IconField>
+
           {showOffline && (
             <WdCheckbox
               size="m"

assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingCharactersList.tsx

@@ -44,7 +44,7 @@ export const TrackingCharactersList = () => {
         bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
         headerClassName="[&_div]:ml-2"
         body={row => {
-          return <CharacterCard showShipName={false} showSystem={false} isOwn {...row.character} />;
+          return <CharacterCard showCorporationLogo showTicker isOwn {...row.character} />;
         }}
       />
     </DataTable>

assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingSettings.tsx

@@ -10,8 +10,8 @@ const renderValCharacterTemplate = (row: TrackingCharacter | undefined) => {
   }
 
   return (
-    <div className="py-1">
+    <div className="py-1 w-full">
-      <CharacterCard compact showShipName={false} showSystem={false} isOwn {...row.character} />
+      <CharacterCard compact isOwn {...row.character} />
     </div>
   );
 };
@@ -21,7 +21,11 @@ const renderCharacterTemplate = (row: TrackingCharacter | undefined) => {
     return <div className="h-[33px] flex items-center">Character is not selected</div>;
   }
 
-  return <CharacterCard showShipName={false} showSystem={false} isOwn {...row.character} />;
+  return (
+    <div className="w-full">
+      <CharacterCard isOwn {...row.character} />
+    </div>
+  );
 };
 
 export const TrackingSettings = () => {

assets/js/hooks/Mapper/components/ui-kit/CharacterCard/CharacterCard.tsx

@@ -4,15 +4,24 @@ import { SystemView } from '@/hooks/Mapper/components/ui-kit/SystemView';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers';
 import { emitMapEvent } from '@/hooks/Mapper/events';
-import { CharacterPortrait, CharacterPortraitSize } from '@/hooks/Mapper/components/ui-kit';
+import {
+  TooltipPosition,
+  WdEveEntityPortrait,
+  WdEveEntityPortraitSize,
+  WdEveEntityPortraitType,
+  WdTooltipWrapper,
+} from '@/hooks/Mapper/components/ui-kit';
 import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
 import classes from './CharacterCard.module.scss';
 
 type CharacterCardProps = {
   compact?: boolean;
   showSystem?: boolean;
+  showTicker?: boolean;
   showShipName?: boolean;
   useSystemsCache?: boolean;
+  showCorporationLogo?: boolean;
+  showAllyLogo?: boolean;
 } & CharacterTypeRaw &
   WithIsOwnCharacter;
 
@@ -29,6 +38,9 @@ export const CharacterCard = ({
   isOwn,
   showSystem,
   showShipName,
+  showCorporationLogo,
+  showAllyLogo,
+  showTicker,
   useSystemsCache,
   ...char
 }: CharacterCardProps) => {
@@ -46,26 +58,80 @@ export const CharacterCard = ({
 
   if (compact) {
     return (
-      <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
+      <div className="text-xs box-border w-full" onClick={handleSelect}>
         <div className="w-full flex items-center gap-1 relative">
-          <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w18} />
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w18} />
+
+          {showCorporationLogo && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {showAllyLogo && char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
           {isDocked(char.location) && <span className={classes.Docked} />}
-          <div className="flex flex-grow overflow-hidden text-left">
+          <div className="flex flex-grow-[2] overflow-hidden text-left w-[50px]">
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className="flex min-w-0">
-              <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
+              <span
-              <span className="text-gray-400">
+                className={clsx(
-                {!locationShown && showShipName && shipNameText ? `- ${shipNameText}` : `[${tickerText}]`}
+                  'overflow-hidden text-ellipsis whitespace-nowrap',
+                  isOwn ? 'text-orange-400' : 'text-gray-200',
+                )}
+                title={char.name}
+              >
+                {char.name}
               </span>
+              {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
             </div>
           </div>
+
           {shipType && (
-            <div
+            <>
-              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
+              {!showShipName && (
-              style={{ maxWidth: '120px' }}
+                <div
-              title={shipType}
+                  className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
-            >
+                  style={{ maxWidth: '120px' }}
-              {shipType}
+                  title={shipType}
-            </div>
+                >
+                  {shipType}
+                </div>
+              )}
+              {showShipName && (
+                <div className="flex flex-grow-[1] justify-end w-[50px]">
+                  <div className="min-w-0">
+                    <div
+                      className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
+                      style={{ maxWidth: '120px' }}
+                      title={shipNameText}
+                    >
+                      {shipNameText}
+                    </div>
+                  </div>
+                </div>
+              )}
+              {char.ship && (
+                <WdTooltipWrapper position={TooltipPosition.top} content={char.ship.ship_type_info.name}>
+                  <WdEveEntityPortrait
+                    type={WdEveEntityPortraitType.ship}
+                    eveId={char.ship.ship_type_id.toString()}
+                    size={WdEveEntityPortraitSize.w18}
+                  />
+                </WdTooltipWrapper>
+              )}
+            </>
           )}
         </div>
       </div>
@@ -75,11 +141,41 @@ export const CharacterCard = ({
   return (
     <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
       <div className="w-full flex items-center gap-2">
-        <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w33} />
+        <div className="flex items-center gap-1">
-        <div className="flex flex-col flex-grow overflow-hidden">
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w33} />
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+
-            <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
+          {showCorporationLogo && (
-            <span className="text-gray-400">[{tickerText}]</span>
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {showAllyLogo && char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            </WdTooltipWrapper>
+          )}
+        </div>
+
+        <div className="flex flex-col flex-grow overflow-hidden  w-[50px]">
+          <div className="flex min-w-0">
+            <span
+              className={clsx(
+                'overflow-hidden text-ellipsis whitespace-nowrap',
+                isOwn ? 'text-orange-400' : 'text-gray-200',
+              )}
+            >
+              {char.name}
+            </span>
+            {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
           </div>
           {locationShown ? (
             <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
@@ -97,15 +193,30 @@ export const CharacterCard = ({
           )}
         </div>
         {shipType && (
-          <div className="flex-shrink-0 self-start">
+          <>
-            <div
+            <div className="flex flex-col flex-shrink-0 items-end self-start">
-              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap"
+              <div
-              style={{ maxWidth: '200px' }}
+                className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
-              title={shipType}
+                title={shipType}
-            >
+              >
-              {shipType}
+                {shipType}
+              </div>
+              <div
+                className="flex justify-end text-stone-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
+                title={shipNameText}
+              >
+                {shipNameText}
+              </div>
             </div>
-          </div>
+
+            {char.ship && (
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.ship}
+                eveId={char.ship.ship_type_id.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            )}
+          </>
         )}
       </div>
     </div>

assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/CharacterPortrait.tsx

@@ -1,47 +0,0 @@
-import clsx from 'clsx';
-import { WithClassName } from '@/hooks/Mapper/types/common.ts';
-
-export enum CharacterPortraitSize {
-  default,
-  w18,
-  w33,
-}
-
-// TODO IF YOU NEED ANOTHER ONE SIZE PLEASE ADD IT HERE and IN CharacterPortraitSize
-const getSize = (size: CharacterPortraitSize) => {
-  switch (size) {
-    case CharacterPortraitSize.w18:
-      return 'min-w-[18px] min-h-[18px] w-[18px] h-[18px]';
-    case CharacterPortraitSize.w33:
-      return 'min-w-[33px] min-h-[33px] w-[33px] h-[33px]';
-    default:
-      return '';
-  }
-};
-
-export type CharacterPortraitProps = {
-  characterEveId: string | undefined;
-  size?: CharacterPortraitSize;
-} & WithClassName;
-
-export const CharacterPortrait = ({
-  characterEveId,
-  size = CharacterPortraitSize.default,
-  className,
-}: CharacterPortraitProps) => {
-  if (characterEveId == null) {
-    return null;
-  }
-
-  return (
-    <span
-      className={clsx(
-        getSize(size),
-        'flex transition-[border-color,opacity] duration-250 border border-gray-800 bg-transparent rounded-none',
-        'wd-bg-default',
-        className,
-      )}
-      style={{ backgroundImage: `url(https://images.evetech.net/characters/${characterEveId}/portrait)` }}
-    />
-  );
-};

assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/index.ts

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

assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/WdEveEntityPortrait.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+
+export enum WdEveEntityPortraitType {
+  character,
+  corporation,
+  alliance,
+  ship,
+}
+
+export enum WdEveEntityPortraitSize {
+  default,
+  w18,
+  w33,
+}
+
+export const getLogo = (type: WdEveEntityPortraitType, eveId: string | number) => {
+  switch (type) {
+    case WdEveEntityPortraitType.alliance:
+      return `url(https://images.evetech.net/alliances/${eveId}/logo?size=64)`;
+    case WdEveEntityPortraitType.corporation:
+      return `url(https://images.evetech.net/corporations/${eveId}/logo?size=64)`;
+    case WdEveEntityPortraitType.character:
+      return `url(https://images.evetech.net/characters/${eveId}/portrait)`;
+    case WdEveEntityPortraitType.ship:
+      return `url(https://images.evetech.net/types/${eveId}/icon)`;
+  }
+
+  return '';
+};
+
+// TODO IF YOU NEED ANOTHER ONE SIZE PLEASE ADD IT HERE and IN WdEveEntityPortraitSize
+const getSize = (size: WdEveEntityPortraitSize) => {
+  switch (size) {
+    case WdEveEntityPortraitSize.w18:
+      return 'min-w-[18px] min-h-[18px] w-[18px] h-[18px]';
+    case WdEveEntityPortraitSize.w33:
+      return 'min-w-[33px] min-h-[33px] w-[33px] h-[33px]';
+    default:
+      return '';
+  }
+};
+
+export type WdEveEntityPortraitProps = {
+  eveId: string | undefined;
+  type?: WdEveEntityPortraitType;
+  size?: WdEveEntityPortraitSize;
+} & WithClassName;
+
+export const WdEveEntityPortrait = ({
+  eveId,
+  size = WdEveEntityPortraitSize.default,
+  type = WdEveEntityPortraitType.character,
+  className,
+}: WdEveEntityPortraitProps) => {
+  if (eveId == null) {
+    return null;
+  }
+
+  return (
+    <span
+      className={clsx(
+        getSize(size),
+        'flex transition-[border-color,opacity] duration-250 border border-gray-800 bg-transparent rounded-none',
+        'wd-bg-default',
+        className,
+      )}
+      style={{ backgroundImage: getLogo(type, eveId) }}
+    />
+  );
+};

assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/index.ts

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

assets/js/hooks/Mapper/components/ui-kit/index.ts

@@ -14,6 +14,6 @@ export * from './TimeAgo';
 export * from './WdTooltipWrapper';
 export * from './WdResponsiveCheckBox';
 export * from './WdRadioButton';
-export * from './CharacterPortrait';
+export * from './WdEveEntityPortrait';
 export * from './WdTransition';
 export * from './LoadingWrapper';

assets/js/hooks/Mapper/types/character.ts

@@ -28,8 +28,8 @@ export type CharacterTypeRaw = {
   ship: ShipTypeRaw | null;
 
   alliance_id: number | null;
-  alliance_name: number | null;
+  alliance_name: string | null;
-  alliance_ticker: number | null;
+  alliance_ticker: string | null;
   corporation_id: number;
   corporation_name: string;
   corporation_ticker: string;