feat(Signatures): Add additional filters support to signature list, show description icon

assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx

@@ -10,13 +10,17 @@ import {
   Setting,
   COSMIC_SIGNATURE,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
+import { SignatureGroup } from '@/hooks/Mapper/types';
 
 interface SystemLinkSignatureDialogProps {
   data: CommandLinkSignatureToSystem;
   setVisible: (visible: boolean) => void;
 }
 
-const signatureSettings: Setting[] = [{ key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true }];
+const signatureSettings: Setting[] = [
+  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
+  { key: SignatureGroup.Wormhole, name: 'Wormhole', value: true },
+];
 
 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
   const { outCommand } = useMapRootState();
@@ -59,6 +63,7 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
     >
       <SystemSignaturesContent
         systemId={`${data.solar_system_source}`}
+        hideLinkedSignatures
         settings={signatureSettings}
         onSelect={handleSelect}
         selectable={true}

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

@@ -12,6 +12,7 @@ import {
   SHIP,
   DRONE,
 } from './SystemSignatureSettingsDialog';
+import { SignatureGroup } from '@/hooks/Mapper/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 
@@ -27,6 +28,12 @@ const settings: Setting[] = [
   { key: STARBASE, name: 'Show Starbase', value: true },
   { key: SHIP, name: 'Show Ships', value: true },
   { key: DRONE, name: 'Show Drones And Charges', value: true },
+  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true },
+  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true },
+  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true },
+  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true },
+  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true },
+  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true },
 ];
 
 const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings';
@@ -91,8 +98,7 @@ export const SystemSignatures = () => {
                     </InfoDrawer>
                     <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
                       For delete any signature first of all you need select before
-                      <br /> and then use <b className="text-sky-500">Del</b> or{' '}
-                      <b className="text-sky-500">Backspace</b>
+                      <br /> and then use <b className="text-sky-500">Backspace</b>
                     </InfoDrawer>
                   </div>
                 ) as React.ReactNode,

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

@@ -3,6 +3,7 @@ import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
+import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -30,6 +31,7 @@ import { PrimeIcons } from 'primereact/api';
 import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
 import { useMapEventListener } from '@/hooks/Mapper/events';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
 
 type SystemSignaturesSortSettings = {
   sortField: string;
@@ -44,10 +46,17 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
 interface SystemSignaturesContentProps {
   systemId: string;
   settings: Setting[];
+  hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
 }
-export const SystemSignaturesContent = ({ systemId, settings, selectable, onSelect }: SystemSignaturesContentProps) => {
+export const SystemSignaturesContent = ({
+  systemId,
+  settings,
+  hideLinkedSignatures,
+  selectable,
+  onSelect,
+}: SystemSignaturesContentProps) => {
   const { outCommand } = useMapRootState();
 
   const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
@@ -80,13 +89,32 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     }
   }, []);
 
+  const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]);
+
   const filteredSignatures = useMemo(() => {
     return signatures
-      .filter(x => settings.find(y => y.key === x.kind)?.value)
+      .filter(x => {
+        if (hideLinkedSignatures && !!x.linked_system) {
+          return false;
+        }
+
+        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
+
+        if (isCosmicSignature) {
+          const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
+          if (showCosmicSignatures) {
+            return !x.group || groupSettings.find(y => y.key === x.group)?.value;
+          } else {
+            return !!x.group && groupSettings.find(y => y.key === x.group)?.value;
+          }
+        }
+
+        return settings.find(y => y.key === x.kind)?.value;
+      })
       .sort((a, b) => {
         return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime();
       });
-  }, [signatures, settings]);
+  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
 
   const handleGetSignatures = useCallback(async () => {
     const { signatures } = await outCommand({
@@ -354,13 +382,15 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
                 sortable
               ></Column>
 
-              <Column
-                bodyClassName="p-0 pl-1 pr-2"
-                field="group"
-                body={renderToolbar}
-                // headerClassName={headerClasses}
-                style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-              ></Column>
+              {!selectable && (
+                <Column
+                  bodyClassName="p-0 pl-1 pr-2"
+                  field="group"
+                  body={renderToolbar}
+                  // headerClassName={headerClasses}
+                  style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+                ></Column>
+              )}
             </DataTable>
           </>
         )}
@@ -370,12 +400,14 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
           content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
         />
 
-        <SignatureSettings
-          systemId={systemId}
-          show={showSignatureSettings}
-          onHide={() => setShowSignatureSettings(false)}
-          signatureData={selectedSignature}
-        />
+        {showSignatureSettings && (
+          <SignatureSettings
+            systemId={systemId}
+            show
+            onHide={() => setShowSignatureSettings(false)}
+            signatureData={selectedSignature}
+          />
+        )}
 
         {askUser && (
           <div className="absolute left-[1px] top-[29px] h-[calc(100%-30px)] w-[calc(100%-3px)] bg-stone-900/10 backdrop-blur-sm">

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderInfoColumn.tsx

@@ -1,5 +1,9 @@
+import { PrimeIcons } from 'primereact/api';
 import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { SystemViewStandalone, WHClassView } from '@/hooks/Mapper/components/ui-kit';
+
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+
 import clsx from 'clsx';
 import { renderName } from './renderName.tsx';
 import classes from './renderInfoColumn.module.scss';
@@ -32,13 +36,23 @@ export const renderInfoColumn = (row: SystemSignature) => {
             </span>
           </>
         )}
+        {row.description && (
+          <WdTooltipWrapper content={row.description}>
+            <span className={clsx(PrimeIcons.EXCLAMATION_CIRCLE, 'text-[12px]')}></span>
+          </WdTooltipWrapper>
+        )}
       </div>
     );
   }
 
-  if (row.description != null && row.description.length > 0) {
-    return <span title={row.description}>{row.description}</span>;
-  }
-
-  return renderName(row);
+  return (
+    <div className="flex gap-1 items-center">
+      {renderName(row)}{' '}
+      {row.description && (
+        <WdTooltipWrapper content={row.description}>
+          <span className={clsx(PrimeIcons.EXCLAMATION_CIRCLE, 'text-[12px]')}></span>
+        </WdTooltipWrapper>
+      )}
+    </div>
+  );
 };