Custom signatures (#37)

* feat(signatures): Add custom info to system signatures

* feat(connections): Add custom info to system connections

* feat(Map): Add system signature type

* feat(Map): Update wormhole types info

* feat(Map): Add undo action for removed systems

* feat(Map): Delete systems on Backspace hotkey

* feat(Map): Update k-space systems background & styles

* feat(Map): Update systems status background styles

* feat(Map): add support for new wh type data. add signatures settings modal menu; reworked signatures widget - was added info of wormhole;

---------

Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai>

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

@@ -13,9 +13,10 @@ export const SystemInfoContent = ({ systemId }: SystemInfoContentProps) => {
     data: { systems, wormholesData },
   } = useMapRootState();
 
-  const sys = getSystemById(systems, systemId)!;
+  const sys = getSystemById(systems, 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 } =
+    sys.system_static_info || {};
   const isWH = isWormholeSpace(system_class);
   const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
 

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

@@ -1,10 +1,10 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
 
-import { DataTable, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
+import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useRefState from 'react-usestateref';
@@ -22,12 +22,14 @@ import {
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
 import {
   renderIcon,
-  renderName,
+  renderInfoColumn,
   renderTimeLeft,
-  renderLinkedSystem,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-// import { PrimeIcons } from 'primereact/api';
 import useLocalStorageState from 'use-local-storage-state';
+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';
 
 type SystemSignaturesSortSettings = {
   sortField: string;
@@ -53,6 +55,7 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
   const [nameColumnWidth, setNameColumnWidth] = useState('auto');
   const [parsedSignatures, setParsedSignatures] = useState<SystemSignature[]>([]);
   const [askUser, setAskUser] = useState(false);
+  const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
 
   const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
 
@@ -164,6 +167,8 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
   }, [parsedSignatures, handleUpdateSignatures]);
 
   const handleSelectSignatures = useCallback(
+    // TODO still will be good to define types if we use typescript
+    // @ts-ignore
     e => {
       if (selectable) {
         onSelect?.(e.value);
@@ -212,6 +217,18 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     handleGetSignatures();
   }, [systemId]);
 
+  useMapEventListener(event => {
+    switch (event.name) {
+      case Commands.signaturesUpdated:
+        if (event.data?.toString() !== systemId.toString()) {
+          return;
+        }
+
+        handleGetSignatures();
+        return true;
+    }
+  });
+
   useEffect(() => {
     const observer = new ResizeObserver(handleResize);
     if (tableRef.current) {
@@ -240,13 +257,22 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     setHoveredSig(null);
   }, []);
 
-  // const renderToolbar = (/*row: SystemSignature*/) => {
-  //   return (
-  //     <div className="flex justify-end items-center gap-2">
-  //       <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
-  //     </div>
-  //   );
-  // };
+  const renderToolbar = (/*row: SystemSignature*/) => {
+    return (
+      <div className="flex justify-end items-center gap-2 mr-[4px]">
+        <WdTooltipWrapper content="To Edit Signature do double click">
+          <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
+        </WdTooltipWrapper>
+      </div>
+    );
+  };
+
+  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
+
+  const handleRowClick = (e: DataTableRowClickEvent) => {
+    setSelectedSignature(e.data as SystemSignature);
+    setShowSignatureSettings(true);
+  };
 
   return (
     <>
@@ -257,6 +283,7 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
           </div>
         ) : (
           <>
+            {/* @ts-ignore */}
             <DataTable
               className={classes.Table}
               value={filteredSignatures}
@@ -268,6 +295,7 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
               dataKey="eve_id"
               tableClassName="w-full select-none"
               resizableColumns={false}
+              onRowDoubleClick={handleRowClick}
               rowHover
               selectAll
               sortField={sortSettings.sortField}
@@ -291,7 +319,7 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
               <Column
                 bodyClassName="p-0 px-1"
                 field="group"
-                body={renderIcon}
+                body={x => renderIcon(x)}
                 style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
               ></Column>
 
@@ -310,41 +338,29 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
                 sortable
               ></Column>
               <Column
-                field="name"
-                header="Name"
+                field="info"
+                // header="Info"
                 bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderName}
+                body={renderInfoColumn}
                 style={{ maxWidth: nameColumnWidth }}
                 hidden={compact || medium}
-                sortable
               ></Column>
-              <Column
-                field="linked_system"
-                header="Leads To"
-                headerClassName="whitespace-nowrap"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderLinkedSystem}
-                style={{ maxWidth: nameColumnWidth }}
-                hidden={compact}
-                sortable
-              ></Column>
-
               <Column
                 field="updated_at"
                 header="Updated"
                 dataType="date"
-                bodyClassName="w-[80px] text-ellipsis overflow-hidden whitespace-nowrap"
+                bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
                 body={renderTimeLeft}
                 sortable
               ></Column>
 
-              {/*<Column*/}
-              {/*  bodyClassName="p-0 pl-1 pr-2"*/}
-              {/*  field="group"*/}
-              {/*  body={renderToolbar}*/}
-              {/*  headerClassName={headerClasses}*/}
-              {/*  style={{ maxWidth: 26, minWidth: 26, width: 26 }}*/}
-              {/*></Column>*/}
+              <Column
+                bodyClassName="p-0 pl-1 pr-2"
+                field="group"
+                body={renderToolbar}
+                // headerClassName={headerClasses}
+                style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+              ></Column>
             </DataTable>
           </>
         )}
@@ -353,6 +369,14 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
           ref={tooltipRef}
           content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
         />
+
+        <SignatureSettings
+          systemId={systemId}
+          show={showSignatureSettings}
+          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">
             <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">

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

@@ -2,3 +2,4 @@ export * from './renderIcon';
 export * from './renderName';
 export * from './renderTimeLeft';
 export * from './renderLinkedSystem';
+export * from './renderInfoColumn';

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

@@ -1,7 +1,7 @@
-import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { GroupType, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { GROUPS } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
-export const renderIcon = (row: SystemSignature) => {
+export const renderIcon = (row: SystemSignature, customSize?: Omit<GroupType, 'icon' | 'id'>) => {
   if (row.group == null) {
     return null;
   }
@@ -13,7 +13,7 @@ export const renderIcon = (row: SystemSignature) => {
 
   return (
     <div className="flex justify-center items-center">
-      <img src={group.icon} style={{ width: group.w, height: group.h }} />
+      <img src={group.icon} style={{ width: customSize?.w ?? group.w, height: customSize?.h ?? group.h }} />
     </div>
   );
 };

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

@@ -0,0 +1,3 @@
+.whFontSize {
+  font-size: 11px !important;
+}

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

@@ -0,0 +1,44 @@
+import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { SystemViewStandalone, WHClassView } from '@/hooks/Mapper/components/ui-kit';
+import clsx from 'clsx';
+import { renderName } from './renderName.tsx';
+import classes from './renderInfoColumn.module.scss';
+
+export const renderInfoColumn = (row: SystemSignature) => {
+  if (!row.group || row.group === SignatureGroup.Wormhole) {
+    return (
+      <div className="flex justify-start items-center gap-[6px]">
+        {row.type && (
+          <WHClassView
+            className="text-[11px]"
+            classNameWh={classes.whFontSize}
+            highlightName
+            hideWhClass={!!row.linked_system}
+            whClassName={row.type}
+            noOffset
+            useShortTitle
+          />
+        )}
+
+        {row.linked_system && (
+          <>
+            {/*<span className="w-4 h-4 hero-arrow-long-right"></span>*/}
+            <span title={row.linked_system?.solar_system_name}>
+              <SystemViewStandalone
+                className={clsx('select-none text-center cursor-context-menu')}
+                hideRegion
+                {...row.linked_system}
+              />
+            </span>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  if (row.description != null && row.description.length > 0) {
+    return <span title={row.description}>{row.description}</span>;
+  }
+
+  return renderName(row);
+};