diff --git a/web/src/components/query-summary/summary-panel.tsx b/web/src/components/query-summary/summary-panel.tsx
index 2f0ee67cd..c15416083 100644
--- a/web/src/components/query-summary/summary-panel.tsx
+++ b/web/src/components/query-summary/summary-panel.tsx
@@ -94,9 +94,11 @@ export const SummaryPanelContent: React.FC<{
 
   const listCardinalityContent = (
     values: (string | number)[],
-    compareFn: (a: string | number, b: string | number) => number
+    compareFn?: (a: string | number, b: string | number) => number
   ) => {
-    const sortedStrings = values.sort((a: string | number, b: string | number) => compareFn(a, b)) as string[];
+    const sortedStrings = compareFn
+      ? (values.sort((a: string | number, b: string | number) => compareFn(a, b)) as string[])
+      : values;
     return (
       <>
         {sortedStrings.map((v: string) => (
@@ -194,8 +196,8 @@ export const SummaryPanelContent: React.FC<{
             'ports',
             t('{{count}} Port(s)', { count: ports.length }),
             listCardinalityContent(
-              ports.map(p => formatPort(p)),
-              comparePorts
+              //sort ports before format to keep number order
+              ports.sort((p1, p2) => comparePorts(p1, p2)).map(p => formatPort(p))
             )
           )}
           {accordionItem(