Refactor DetailsPane and enhance Factoriopedia science pack functionality

- Streamlined the DetailsPane component by consolidating conditional rendering for improved readability.
- Introduced a new science pack dependency map in useFactorioData to manage science pack relationships.
- Enhanced science pack selection logic in Factoriopedia to dynamically include dependencies, ensuring accurate filtering of available options.
- Updated related functions to maintain consistent ordering and accessibility of science packs based on user selections.

Author: WhyIsSandwich

docs/.vitepress/components/DetailsPane.vue

@@ -1,9 +1,6 @@
 <template>
   <div :class="$style.detailsPane">
-    <div
-      v-if="selectedItem"
-      :class="$style.itemDetails"
-    >
+    <div v-if="selectedItem" :class="$style.itemDetails">
       <!-- Item Header with Controls and Tabs -->
       <div :class="$style.itemHeader">
         <div :class="$style.headerTitle">
@@ -22,10 +19,7 @@
             >
               Details
             </button>
-            <button
-              :class="{ [$style.active]: activeTab === 'raws' }"
-              @click="activeTab = 'raws'"
-            >
+            <button :class="{ [$style.active]: activeTab === 'raws' }" @click="activeTab = 'raws'">
               Raws
             </button>
           </div>
@@ -54,14 +48,8 @@
               >
                 History
               </button>
-              <div
-                v-if="showHistoryDropdown"
-                :class="$style.historyDropdown"
-              >
-                <div
-                  v-if="historyItems.length === 0"
-                  :class="$style.historyEmpty"
-                >
+              <div v-if="showHistoryDropdown" :class="$style.historyDropdown">
+                <div v-if="historyItems.length === 0" :class="$style.historyEmpty">
                   No recent items
                 </div>
                 <div
@@ -73,10 +61,10 @@
                   <SpriteIcon
                     v-if="
                       item.type === 'item' ||
-                        item.type === 'recipe' ||
-                        item.type === 'technology' ||
-                        item.type === 'fluid' ||
-                        item.type === 'tile'
+                      item.type === 'recipe' ||
+                      item.type === 'technology' ||
+                      item.type === 'fluid' ||
+                      item.type === 'tile'
                     "
                     :sprite-key="`${item.type}-${item.name}`"
                     :size="32"
@@ -91,10 +79,7 @@
       </div>
 
       <!-- Large Item Image (for entities and items) -->
-      <div
-        v-if="selectedItem.entity"
-        :class="$style.itemImageContainer"
-      >
+      <div v-if="selectedItem.entity" :class="$style.itemImageContainer">
         <FactorioSprite
           v-if="selectedItem.entity"
           :key="type + name"
@@ -111,10 +96,7 @@
           v-if="selectedItem?.description || detailsData.statistics?.length > 0"
           :class="$style.detailsInfoBox"
         >
-          <div
-            v-if="selectedItem?.description"
-            :class="$style.detailsDescription"
-          >
+          <div v-if="selectedItem?.description" :class="$style.detailsDescription">
             <FactorioRichText :text="selectedItem.description" />
           </div>
           <!-- Statistics -->
@@ -133,10 +115,7 @@
         </template>
       </div>
       <!-- Raws Tab Content -->
-      <div
-        v-if="activeTab === 'raws'"
-        :class="$style.rawsContent"
-      >
+      <div v-if="activeTab === 'raws'" :class="$style.rawsContent">
         <RawSection
           v-if="selectedItem?.recipe"
           title="Recipe Data"
@@ -202,10 +181,7 @@
       </div>
 
       <!-- No Selection State -->
-      <div
-        v-if="!selectedItem"
-        :class="$style.noSelection"
-      >
+      <div v-if="!selectedItem" :class="$style.noSelection">
         <div :class="$style.noSelectionContent">
           <h3>Select an item to view details</h3>
           <p>

docs/.vitepress/components/Factoriopedia.vue

@@ -208,6 +208,7 @@ const {
   precomputeCategoryStructure,
   createUnifiedSelectionObject,
   getSciencePackNamesFromTechnologies,
+  getSciencePackDependencyMap,
   createSciencePackVisibility
 } = useFactorioData()
 const selectedItem = ref(null)
@@ -298,20 +299,71 @@ const sciencePackOptions = computed(() => {
     })
 })
 
+const sciencePackDependencyMap = computed(() => getSciencePackDependencyMap())
+
+const sciencePackOrderLookup = computed(() => {
+  const lookup = new Map()
+  sciencePackOptions.value.forEach((pack, index) => {
+    lookup.set(pack.name, index)
+  })
+  return lookup
+})
+
 function clearSciencePackFilters() {
   selectedSciencePacks.value = []
 }
 
+function collectSciencePackDependencies(packName, dependencyMap, collected = new Set()) {
+  const dependencies = dependencyMap?.[packName] || []
+  dependencies.forEach(dependencyName => {
+    if (!collected.has(dependencyName)) {
+      collected.add(dependencyName)
+      collectSciencePackDependencies(dependencyName, dependencyMap, collected)
+    }
+  })
+  return collected
+}
+
+function pruneInaccessibleSciencePacks(selectedSet, dependencyMap) {
+  let changed = true
+  while (changed) {
+    changed = false
+    for (const packName of Array.from(selectedSet)) {
+      const dependencies = dependencyMap?.[packName] || []
+      const hasMissingDependency = dependencies.some(dependencyName => !selectedSet.has(dependencyName))
+      if (hasMissingDependency) {
+        selectedSet.delete(packName)
+        changed = true
+      }
+    }
+  }
+}
+
+function toOrderedSciencePackArray(selectedSet) {
+  const orderLookup = sciencePackOrderLookup.value
+  return Array.from(selectedSet).sort((left, right) => {
+    const leftOrder = orderLookup.get(left) ?? Number.MAX_SAFE_INTEGER
+    const rightOrder = orderLookup.get(right) ?? Number.MAX_SAFE_INTEGER
+    if (leftOrder !== rightOrder) return leftOrder - rightOrder
+    return left.localeCompare(right)
+  })
+}
+
 function toggleSciencePack(packName) {
   if (!packName) return
 
+  const dependencyMap = sciencePackDependencyMap.value
   const selected = new Set(selectedSciencePacks.value)
   if (selected.has(packName)) {
     selected.delete(packName)
+    pruneInaccessibleSciencePacks(selected, dependencyMap)
   } else {
     selected.add(packName)
+    collectSciencePackDependencies(packName, dependencyMap).forEach(dependencyName => {
+      selected.add(dependencyName)
+    })
   }
-  selectedSciencePacks.value = Array.from(selected)
+  selectedSciencePacks.value = toOrderedSciencePackArray(selected)
 }
 
 // Computed property for filtered and grouped recipes

src/composables/__tests__/useUnifiedObjects.test.js

@@ -155,4 +155,164 @@ describe('useUnifiedObjects.createUnifiedObjectByKey', () => {
     expect(recipeObject.subgroup).toBe('chemicals')
     expect(recipeObject.order).toBe('r-1')
   })
+
+  it('ignores same-key prototypes with mismatched internal names', () => {
+    const { createUnifiedObjectByKey } = useUnifiedObjects()
+    const factorioData = {
+      item: {
+        foo: {
+          type: 'item',
+          name: 'foo',
+          subgroup: 'misc',
+          order: 'a',
+          displayName: 'Foo'
+        }
+      },
+      recipe: {
+        foo: {
+          type: 'recipe',
+          name: 'bar',
+          subgroup: 'misc',
+          order: 'b',
+          displayName: 'Bar Recipe',
+          main_product: 'bar',
+          results: [{ name: 'bar' }]
+        }
+      },
+      entity: {},
+      fluid: {},
+      tile: {},
+      equipment: {},
+      'item-subgroup': {},
+      'item-group': {}
+    }
+
+    const unified = createUnifiedObjectByKey('foo', factorioData)
+    const fooItem = unified.find(entry => entry.source === 'item')
+    const recipeObject = unified.find(entry => entry.source === 'recipe')
+
+    expect(fooItem).toBeDefined()
+    expect(fooItem.recipe).toBeUndefined()
+    expect(recipeObject).toBeUndefined()
+  })
+
+  it('keeps intentional cross-name place_as_tile relationships', () => {
+    const { createUnifiedObjectByKey } = useUnifiedObjects()
+    const factorioData = {
+      item: {
+        landfill: {
+          type: 'item',
+          name: 'landfill',
+          subgroup: 'terrain',
+          order: 'a',
+          displayName: 'Landfill',
+          place_as_tile: { result: 'landfill-tile' }
+        }
+      },
+      recipe: {},
+      entity: {},
+      fluid: {},
+      tile: {
+        'landfill-tile': {
+          type: 'tile',
+          name: 'landfill-tile',
+          subgroup: 'terrain',
+          order: 'a',
+          displayName: 'Landfill Tile'
+        }
+      },
+      equipment: {},
+      'item-subgroup': {},
+      'item-group': {}
+    }
+
+    const unified = createUnifiedObjectByKey('landfill', factorioData)
+    const landfillItem = unified.find(entry => entry.source === 'item')
+
+    expect(landfillItem).toBeDefined()
+    expect(landfillItem.types).toContain('tile')
+    expect(landfillItem.tile?.name).toBe('landfill-tile')
+  })
+
+  it('merges cross-name item/entity via place_result and minable output', () => {
+    const { createUnifiedObjectByKey } = useUnifiedObjects()
+    const factorioData = {
+      item: {
+        'long-handed-inserter': {
+          type: 'item',
+          name: 'long-handed-inserter',
+          subgroup: 'inserter',
+          order: 'a',
+          displayName: 'Long-handed inserter',
+          place_result: 'bob-red-inserter'
+        }
+      },
+      recipe: {},
+      entity: {
+        'bob-red-inserter': {
+          type: 'inserter',
+          name: 'bob-red-inserter',
+          subgroup: 'inserter',
+          order: 'a',
+          displayName: 'Bob red inserter',
+          minable: {
+            results: [{ name: 'long-handed-inserter' }]
+          }
+        }
+      },
+      fluid: {},
+      tile: {},
+      equipment: {},
+      'item-subgroup': {},
+      'item-group': {}
+    }
+
+    const unified = createUnifiedObjectByKey('long-handed-inserter', factorioData)
+    const itemObject = unified.find(entry => entry.source === 'item')
+
+    expect(itemObject).toBeDefined()
+    expect(itemObject.types).toContain('entity')
+    expect(itemObject.entity?.name).toBe('bob-red-inserter')
+  })
+
+  it('merges cross-name entity/item when looked up by entity key', () => {
+    const { createUnifiedObjectByKey } = useUnifiedObjects()
+    const factorioData = {
+      item: {
+        'long-handed-inserter': {
+          type: 'item',
+          name: 'long-handed-inserter',
+          subgroup: 'inserter',
+          order: 'a',
+          displayName: 'Long-handed inserter',
+          place_result: 'bob-red-inserter'
+        }
+      },
+      recipe: {},
+      entity: {
+        'bob-red-inserter': {
+          type: 'inserter',
+          name: 'bob-red-inserter',
+          subgroup: 'inserter',
+          order: 'a',
+          displayName: 'Bob red inserter',
+          minable: {
+            results: [{ name: 'long-handed-inserter' }]
+          }
+        }
+      },
+      fluid: {},
+      tile: {},
+      equipment: {},
+      'item-subgroup': {},
+      'item-group': {}
+    }
+
+    const unified = createUnifiedObjectByKey('bob-red-inserter', factorioData)
+    const entityObject = unified.find(entry => entry.source === 'entity')
+
+    expect(entityObject).toBeDefined()
+    expect(entityObject.types).toContain('item')
+    expect(entityObject.item?.name).toBe('long-handed-inserter')
+  })
 })