kyd-shared-badge 0.2.32 → 0.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -479,6 +479,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       sources={graphInsights.business_rules_all as any}
                       searchedAt={updatedAt}
                       developerName={developerName || 'this developer'}
+                      genreMapping={genreMapping as Record<string, string[]>}
                     />
                   </div>
                 </Reveal>

package/src/components/AppendixTables.tsx

@@ -36,6 +36,8 @@ interface AppendixTableProps {
     sources: (string | DomainCSVRow | SanctionSource | BusinessRuleRow)[];
     searchedAt: string;
     developerName: string;
+    // Used for business_rules: map genres (e.g., Technical/Risk) to category arrays
+    genreMapping?: Record<string, string[]>;
 }
 
 const SanctionsRow = ({
@@ -125,7 +127,7 @@ const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource
 );
 
 
-const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName }) => {
+const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, genreMapping }) => {
     const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
     const [expanded, setExpanded] = useState<{ [k: number]: boolean }>({});
 
@@ -160,7 +162,22 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
         ? ["Issuing Entity", "List Name", "List Searched On", "Value", "Findings"]
         : type === 'domains'
         ? ["Country", "Entity Type", "Entity/Domain", "Searched On", "Value", "Findings"]
-        : ["Platform", "Category", "Observation", "Imapct"];
+        : ["Platform", "KYD Pillar", "Category", "Observation", "Weight Impact"];
+
+    // Build quick lookup: category -> KYD Pillar (e.g., Technical or Risk)
+    const categoryToPillar: Record<string, string> = (() => {
+        const map: Record<string, string> = {};
+        try {
+            const gm = genreMapping || {};
+            Object.keys(gm || {}).forEach((genre) => {
+                const cats = (gm as Record<string, string[]>)[genre] || [];
+                cats.forEach((c) => {
+                    if (typeof c === 'string') map[c] = genre;
+                });
+            });
+        } catch {}
+        return map;
+    })();
 
     const parsedSources = type === 'sanctions' 
         ? (sources).map((src) => {
@@ -179,18 +196,32 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
         }))
         : (sources as BusinessRuleRow[]).map(s => ({
             provider: s.provider,
+            // Keep original category label; pillar derived from genreMapping
             category: s.category || '',
             label: s.label || '',
             likert_label: s.likert_label || '',
             likert_value: s.likert_value || 0,
             weight: s.weight || 0,
             uid: s.uid || '',
+            pillar: categoryToPillar[(s.category || '')] || '',
         }));
 
     const sortedParsedSources = (type === 'sanctions')
         ? (parsedSources as SanctionSource[]).slice().sort((a, b) => (b.matched === true ? 1 : 0) - (a.matched === true ? 1 : 0))
         : type === 'business_rules'
-        ? (parsedSources as BusinessRuleRow[]).slice().sort((a, b) => (Number(b.weight || 0) - Number(a.weight || 0)))
+        ? (() => {
+            const orderForPillar = (p: string) => (p === 'Technical' ? 0 : p === 'Risk' ? 1 : 2);
+            return (parsedSources as (BusinessRuleRow & { pillar?: string })[]).slice().sort((a, b) => {
+                const ap = (a as any).pillar || '';
+                const bp = (b as any).pillar || '';
+                const cmpPillar = orderForPillar(ap) - orderForPillar(bp);
+                if (cmpPillar !== 0) return cmpPillar;
+                const ac = (a.category || '').localeCompare(b.category || '');
+                if (ac !== 0) return ac;
+                // Within same category, sort by descending weight for usefulness
+                return Number(b.weight || 0) - Number(a.weight || 0);
+            });
+        })()
         : parsedSources;
 
     const visibleParsedSources = (type === 'business_rules')
@@ -242,7 +273,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                             if (type === 'domains') {
                                 return <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} />
                             }
-                            const br = source as BusinessRuleRow;
+                            const br = source as BusinessRuleRow & { pillar?: string };
                             const anchorId = br.uid ? `rule-${br.uid}` : undefined;
                             const ProviderIcon = ({ name }: { name?: string }) => {
                                 const n = (name || '').toLowerCase();
@@ -258,18 +289,18 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                             };
                             return (
                                 <tr id={anchorId} key={index} className={'transition-colors hover:bg-black/5'}>
-                                    <td className={'px-4 py-4 whitespace-normal text-sm w-1/4'} style={{ color: 'var(--text-secondary)' }}>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>
                                         <span title={br.provider || ''} className={'inline-flex items-center text-4xl'} style={{ color: 'var(--text-main)' }}>
                                             <ProviderIcon name={br.provider} />
                                         </span>
                                     </td>
-                                    <td className={'px-4 py-4 whitespace-normal text-sm w-1/4'} style={{ color: 'var(--text-secondary)' }}>{br.category || '—'}</td>
-                                    <td className={'px-4 py-4 whitespace-normal text-sm font-medium w-1/4'} style={{ color: 'var(--text-main)' }}>{br.label || '—'}</td>
-                                    <td className={'px-4 py-4 whitespace-normal text-sm w-1/4'} style={{ color: 'var(--text-secondary)' }}>{(() => {
-                                        const weight = br.weight || 0;
-                                        if (weight > 0) return 'Positive';
-                                        if (weight < 0) return 'Negative';
-                                        return '—';
+                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.pillar || '—'}</td>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.category || '—'}</td>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm font-medium'} style={{ color: 'var(--text-main)' }}>{br.label || '—'}</td>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{(() => {
+                                        const weight = Number(br.weight || 0);
+                                        if (!Number.isFinite(weight)) return '—';
+                                        return weight.toFixed(3).replace(/\.000$/, '.0');
                                     })()}</td>
                                 </tr>
                             );

package/src/components/CategoryBars.tsx

@@ -67,7 +67,7 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                   }}
                 >
                   {/* signed fill originating from center */}
-                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: 'var(--bubble-foreground)' }} />
+                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? 'var(--status-negative, #EC6662)' : 'var(--status-positive, #02a389)' }} />
                 </div>
                 <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
                   <div