add Neopets ID to layer support modal

src/app/WardrobePage/support/ItemLayerSupportModal.js

@@ -132,6 +132,8 @@ function ItemLayerSupportModal({
             <Metadata>
               <MetadataLabel>DTI ID:</MetadataLabel>
               <MetadataValue>{itemLayer.id}</MetadataValue>
+              <MetadataLabel>Neopets ID:</MetadataLabel>
+              <MetadataValue>{itemLayer.remoteId}</MetadataValue>
               <MetadataLabel>Zone:</MetadataLabel>
               <MetadataValue>
                 {itemLayer.zone.label} ({itemLayer.zone.id})

src/app/components/useOutfitAppearance.js

@@ -118,6 +118,7 @@ export const itemAppearanceFragment = gql`
   fragment ItemAppearanceForOutfitPreview on ItemAppearance {
     layers {
       id
+      remoteId # HACK: This is for Support tools, but other views don't need it
       svgUrl
       imageUrl(size: SIZE_600)
       swfUrl # HACK: This is for Support tools, but other views don't need it

src/server/index.js

@@ -101,7 +101,14 @@ const typeDefs = gql`
 
   # Cache for 1 week (unlikely to change)
   type AppearanceLayer @cacheControl(maxAge: 604800) {
+    # The DTI ID. Guaranteed unique across all layers of all types.
     id: ID!
+
+    # The Neopets ID. Guaranteed unique across layers of the _same_ type, but
+    # not of different types. That is, it's allowed and common for an item
+    # layer and a pet layer to have the same remoteId.
+    remoteId: ID!
+
     zone: Zone!
     imageUrl(size: LayerImageSize): String
 
@@ -326,6 +333,10 @@ const resolvers = {
     },
   },
   AppearanceLayer: {
+    bodyId: async ({ id }, _, { swfAssetLoader }) => {
+      const layer = await swfAssetLoader.load(id);
+      return layer.remoteId;
+    },
     bodyId: async ({ id }, _, { swfAssetLoader }) => {
       const layer = await swfAssetLoader.load(id);
       return layer.bodyId;

src/server/query-tests/Item.test.js

@@ -71,6 +71,7 @@ describe("Item", () => {
             appearanceOn(speciesId: "54", colorId: "75") {
               layers {
                 id
+                remoteId
                 imageUrl(size: SIZE_600)
                 svgUrl
                 zone {

src/server/query-tests/__snapshots__/Item.test.js.snap

@@ -9,6 +9,7 @@ Object {
           Object {
             "id": "37128",
             "imageUrl": "https://impress-asset-images.s3.amazonaws.com/object/000/000/014/14856/600x600.png?v2-1587653266000",
+            "remoteId": "14856",
             "svgUrl": null,
             "zone": Object {
               "depth": 30,
@@ -35,6 +36,7 @@ Object {
           Object {
             "id": "37129",
             "imageUrl": "https://impress-asset-images.s3.amazonaws.com/object/000/000/014/14857/600x600.png?v2-0",
+            "remoteId": "14857",
             "svgUrl": null,
             "zone": Object {
               "depth": 44,
@@ -61,6 +63,7 @@ Object {
           Object {
             "id": "30203",
             "imageUrl": "https://impress-asset-images.s3.amazonaws.com/object/000/000/006/6829/600x600.png?v2-0",
+            "remoteId": "6829",
             "svgUrl": null,
             "zone": Object {
               "depth": 3,