From 945caa84e3ae3cc0168a950a642bce75ef71908c Mon Sep 17 00:00:00 2001
From: Bob MacCallum <uncoolbob@gmail.com>
Date: Thu, 20 Feb 2025 18:51:18 +0000
Subject: [PATCH 01/26] WIP wired up to reporter service call

---
 .../records/AiExpressionSummary.tsx           | 94 +++++++++++++++++++
 .../GeneRecordClasses.GeneRecordClass.jsx     |  3 +
 .../js/client/types/aiExpressionTypes.ts      | 11 +++
 3 files changed, 108 insertions(+)
 create mode 100644 packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
 create mode 100644 packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
new file mode 100644
index 0000000000..b6e1aed2ad
--- /dev/null
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  CollapsibleSection,
+  RecordAttribute,
+} from '@veupathdb/wdk-client/lib/Components';
+import { Props } from '@veupathdb/wdk-client/lib/Views/Records/RecordAttributes/RecordAttributeSection';
+
+import { DefaultSectionTitle } from '@veupathdb/wdk-client/lib/Views/Records/SectionTitle';
+import { ErrorBoundary } from '@veupathdb/wdk-client/lib/Controllers';
+import { useWdkService } from '@veupathdb/wdk-client/lib/Hooks/WdkServiceHook';
+import { isGenomicsService } from '../../wrapWdkService';
+import {
+  AnswerSpec,
+  StandardReportConfig,
+} from '@veupathdb/wdk-client/lib/Utils/WdkModel';
+import { AiExpressionSummaryResponse } from '../../types/aiExpressionTypes';
+import { AnswerFormatting } from '@veupathdb/wdk-client/lib/Service/Mixins/SearchReportsService';
+
+/** Display AI Expression Summary UI and results in a collapsible section */
+export function AiExpressionSummary(props: Props) {
+  const {
+    attribute,
+    record,
+    recordClass,
+    isCollapsed,
+    onCollapsedChange,
+    title,
+  } = props;
+  const { displayName, help, name } = attribute;
+
+  const headerContent = title ?? (
+    <DefaultSectionTitle displayName={displayName} help={help} />
+  );
+
+  return (
+    <CollapsibleSection
+      id={name}
+      className={`wdk-RecordAttributeSectionItem`}
+      headerContent={headerContent}
+      isCollapsed={isCollapsed}
+      onCollapsedChange={onCollapsedChange}
+    >
+      <ErrorBoundary>
+        {record.attributes['ai_expression'] == 'YES' ? (
+          <CacheGate {...props} />
+        ) : (
+          <div>Sorry, this feature is not currently available.</div>
+        )}
+      </ErrorBoundary>
+    </CollapsibleSection>
+  );
+}
+
+// if the AI expression summary is cached, render it
+// otherwise render a "gate" where the user is given some verbiage
+// about the request taking a minute or two and a button to initiate
+// the request.
+
+function CacheGate(props: Props) {
+  const geneId = props.record.attributes['source_id']?.toString();
+  if (geneId == null) return null;
+
+  const cachedSummary = useAiExpression(geneId, false); // do not populate cache
+
+  return <div>this is going to be the AI summary</div>;
+}
+
+function useAiExpression(
+  geneId: string,
+  shouldPopulateCache: boolean
+): AiExpressionSummaryResponse | undefined {
+  return useWdkService(async (wdkService) => {
+    if (!isGenomicsService(wdkService)) throw new Error('nasty');
+    const { projectId } = await wdkService.getConfig();
+    const answerSpec = {
+      searchName: 'single_record_question_GeneRecordClasses_GeneRecordClass',
+      searchConfig: {
+        parameters: {
+          primaryKeys: `${geneId},${projectId}`,
+        },
+      },
+    };
+    const formatting = {
+      format: 'aiExpression',
+      formatConfig: {
+        shouldPopulateCache,
+      },
+    };
+    return await wdkService.getAnswer<AiExpressionSummaryResponse>(
+      answerSpec,
+      formatting
+    );
+  });
+}
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
index f3c9ea7e6d..17aac6fcbd 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
@@ -44,6 +44,7 @@ import {
 import betaImage from '@veupathdb/wdk-client/lib/Core/Style/images/beta2-30.png';
 import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
 import { AlphaFoldRecordSection } from './AlphaFoldAttributeSection';
+import { AiExpressionSummary } from './AiExpressionSummary';
 import { DEFAULT_TABLE_STATE } from '@veupathdb/wdk-client/lib/StoreModules/RecordStoreModule';
 import { Link } from 'react-router-dom';
 
@@ -354,6 +355,8 @@ export function RecordAttributeSection(props) {
   switch (restProps.attribute.name) {
     case 'alphafold_url':
       return <AlphaFoldRecordSection {...restProps} />;
+    case 'ai_expression':
+      return <AiExpressionSummary {...restProps} />;
     default:
       return <DefaultComponent {...restProps} />;
   }
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
new file mode 100644
index 0000000000..c485831e52
--- /dev/null
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
@@ -0,0 +1,11 @@
+export interface AiExpressionSummaryResponse {
+  headline: string;
+  one_paragraph_summary: string;
+  sections: AiExpressionSummarySection[];
+}
+
+interface AiExpressionSummarySection {
+  headline: string;
+  one_sentence_summary: string;
+  dataset_ids: string[];
+}

From 8979816207562c0db70b9dbfcd07ac957460eef9 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Sun, 23 Feb 2025 18:07:42 +0000
Subject: [PATCH 02/26] WIP

---
 .../records/AiExpressionSummary.tsx           | 81 +++++++++++++------
 .../js/client/types/aiExpressionTypes.ts      | 13 ++-
 2 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index b6e1aed2ad..3ecf092fb8 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  CollapsibleSection,
-  RecordAttribute,
-} from '@veupathdb/wdk-client/lib/Components';
+import React, { useEffect, useState } from 'react';
+import { CollapsibleSection } from '@veupathdb/wdk-client/lib/Components';
 import { Props } from '@veupathdb/wdk-client/lib/Views/Records/RecordAttributes/RecordAttributeSection';
 
 import { DefaultSectionTitle } from '@veupathdb/wdk-client/lib/Views/Records/SectionTitle';
@@ -10,22 +7,13 @@ import { ErrorBoundary } from '@veupathdb/wdk-client/lib/Controllers';
 import { useWdkService } from '@veupathdb/wdk-client/lib/Hooks/WdkServiceHook';
 import { isGenomicsService } from '../../wrapWdkService';
 import {
-  AnswerSpec,
-  StandardReportConfig,
-} from '@veupathdb/wdk-client/lib/Utils/WdkModel';
-import { AiExpressionSummaryResponse } from '../../types/aiExpressionTypes';
-import { AnswerFormatting } from '@veupathdb/wdk-client/lib/Service/Mixins/SearchReportsService';
+  AiExpressionSummary,
+  AiExpressionSummaryResponse,
+} from '../../types/aiExpressionTypes';
 
 /** Display AI Expression Summary UI and results in a collapsible section */
 export function AiExpressionSummary(props: Props) {
-  const {
-    attribute,
-    record,
-    recordClass,
-    isCollapsed,
-    onCollapsedChange,
-    title,
-  } = props;
+  const { attribute, record, isCollapsed, onCollapsedChange, title } = props;
   const { displayName, help, name } = attribute;
 
   const headerContent = title ?? (
@@ -42,7 +30,7 @@ export function AiExpressionSummary(props: Props) {
     >
       <ErrorBoundary>
         {record.attributes['ai_expression'] == 'YES' ? (
-          <CacheGate {...props} />
+          <AiSummaryGate {...props} />
         ) : (
           <div>Sorry, this feature is not currently available.</div>
         )}
@@ -51,21 +39,64 @@ export function AiExpressionSummary(props: Props) {
   );
 }
 
-// if the AI expression summary is cached, render it
+// If the AI expression summary is cached, render it
 // otherwise render a "gate" where the user is given some verbiage
 // about the request taking a minute or two and a button to initiate
 // the request.
 
-function CacheGate(props: Props) {
+function AiSummaryGate(props: Props) {
   const geneId = props.record.attributes['source_id']?.toString();
-  if (geneId == null) return null;
+  if (geneId == null) throw new Error('geneId should not be missing');
+
+  const [shouldPopulateCache, setShouldPopulateCache] = useState(false);
+
+  const aiExpressionSummary = useAiExpressionSummary(
+    geneId,
+    shouldPopulateCache
+  );
+
+  if (aiExpressionSummary) {
+    if (aiExpressionSummary[geneId]?.cacheStatus === 'hit') {
+      const summary = aiExpressionSummary[geneId].expressionSummary;
+      return <AiExpressionResult summary={summary} {...props} />;
+    } else {
+      // Cache miss: render button to populate cache
+      return (
+        <div>
+          <p>
+            Click below to start an AI summary of this gene. It could take up to
+            three minutes.
+          </p>
+          <button onClick={() => setShouldPopulateCache(true)}>
+            Start AI Summary
+          </button>
 
-  const cachedSummary = useAiExpression(geneId, false); // do not populate cache
+          {/* Debugging: Display cache miss reason if present */}
+          {aiExpressionSummary[geneId]?.reason && (
+            <p style={{ color: 'red' }}>
+              Debug: Cache miss reason - {aiExpressionSummary[geneId].reason}
+            </p>
+          )}
+        </div>
+      );
+    }
+  }
 
-  return <div>this is going to be the AI summary</div>;
+  return <div>🤖 Summarising... 🤖</div>;
+}
+
+function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
+  const headline = props.summary.headline;
+  return (
+    <div>
+      Here are today's headlines:
+      <br />
+      {headline}
+    </div>
+  );
 }
 
-function useAiExpression(
+function useAiExpressionSummary(
   geneId: string,
   shouldPopulateCache: boolean
 ): AiExpressionSummaryResponse | undefined {
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
index c485831e52..7d82c787ac 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
@@ -1,4 +1,15 @@
-export interface AiExpressionSummaryResponse {
+export type AiExpressionSummaryResponse = Record<
+  string,
+  AiExpressionGeneResponse
+>;
+
+export interface AiExpressionGeneResponse {
+  cacheStatus: 'hit' | 'miss';
+  reason?: string; // only for misses
+  expressionSummary: AiExpressionSummary;
+}
+
+export interface AiExpressionSummary {
   headline: string;
   one_paragraph_summary: string;
   sections: AiExpressionSummarySection[];

From 01a4ec98df6bb2e2cb9e66b58469e1c329f43c52 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Mon, 24 Feb 2025 17:56:45 +0000
Subject: [PATCH 03/26] bare bones UI is working, yay

---
 .../records/AiExpressionSummary.tsx           | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 3ecf092fb8..5f2687419f 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { CollapsibleSection } from '@veupathdb/wdk-client/lib/Components';
 import { Props } from '@veupathdb/wdk-client/lib/Views/Records/RecordAttributes/RecordAttributeSection';
 
@@ -64,8 +64,8 @@ function AiSummaryGate(props: Props) {
       return (
         <div>
           <p>
-            Click below to start an AI summary of this gene. It could take up to
-            three minutes.
+            Click below to request an AI summary of this gene. It could take up
+            to three minutes. When complete it will be cached for all users.
           </p>
           <button onClick={() => setShouldPopulateCache(true)}>
             Start AI Summary
@@ -81,8 +81,11 @@ function AiSummaryGate(props: Props) {
       );
     }
   }
-
-  return <div>🤖 Summarising... 🤖</div>;
+  if (shouldPopulateCache) {
+    return <div>🤖 Summarising... 🤖</div>;
+  } else {
+    return <div>Loading...</div>;
+  }
 }
 
 function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
@@ -100,26 +103,29 @@ function useAiExpressionSummary(
   geneId: string,
   shouldPopulateCache: boolean
 ): AiExpressionSummaryResponse | undefined {
-  return useWdkService(async (wdkService) => {
-    if (!isGenomicsService(wdkService)) throw new Error('nasty');
-    const { projectId } = await wdkService.getConfig();
-    const answerSpec = {
-      searchName: 'single_record_question_GeneRecordClasses_GeneRecordClass',
-      searchConfig: {
-        parameters: {
-          primaryKeys: `${geneId},${projectId}`,
+  return useWdkService(
+    async (wdkService) => {
+      if (!isGenomicsService(wdkService)) throw new Error('nasty');
+      const { projectId } = await wdkService.getConfig();
+      const answerSpec = {
+        searchName: 'single_record_question_GeneRecordClasses_GeneRecordClass',
+        searchConfig: {
+          parameters: {
+            primaryKeys: `${geneId},${projectId}`,
+          },
+        },
+      };
+      const formatting = {
+        format: 'aiExpression',
+        formatConfig: {
+          populateIfNotPresent: shouldPopulateCache,
         },
-      },
-    };
-    const formatting = {
-      format: 'aiExpression',
-      formatConfig: {
-        shouldPopulateCache,
-      },
-    };
-    return await wdkService.getAnswer<AiExpressionSummaryResponse>(
-      answerSpec,
-      formatting
-    );
-  });
+      };
+      return await wdkService.getAnswer<AiExpressionSummaryResponse>(
+        answerSpec,
+        formatting
+      );
+    },
+    [geneId, shouldPopulateCache]
+  );
 }

From 3e57501bc441917108c21a2bb249e7f9f574612e Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Mon, 24 Feb 2025 23:08:56 +0000
Subject: [PATCH 04/26] unrelated import path fix in @veupathdb/components

---
 packages/libs/components/src/components/tidytree/TreeTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/libs/components/src/components/tidytree/TreeTable.tsx b/packages/libs/components/src/components/tidytree/TreeTable.tsx
index 86aaece058..f161b9148a 100644
--- a/packages/libs/components/src/components/tidytree/TreeTable.tsx
+++ b/packages/libs/components/src/components/tidytree/TreeTable.tsx
@@ -4,7 +4,7 @@ import {
   HorizontalDendrogramProps,
 } from '../../components/tidytree/HorizontalDendrogram';
 import Mesa from '@veupathdb/coreui/lib/components/Mesa';
-import { MesaStateProps } from '../../../../coreui/lib/components/Mesa/types';
+import { MesaStateProps } from '@veupathdb/coreui/lib/components/Mesa/types';
 
 import './TreeTable.scss';
 

From a40901befe8cb7ecfc3476b3ce0e51abc8396137 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Mon, 24 Feb 2025 23:09:26 +0000
Subject: [PATCH 05/26] basic table done - needs expandable child rows

---
 .../libs/coreui/src/components/Mesa/types.ts  |  2 +-
 .../records/AiExpressionSummary.tsx           | 68 +++++++++++++++++--
 .../js/client/types/aiExpressionTypes.ts      |  2 +-
 3 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/packages/libs/coreui/src/components/Mesa/types.ts b/packages/libs/coreui/src/components/Mesa/types.ts
index 7b4b70ff12..39e9c165e4 100644
--- a/packages/libs/coreui/src/components/Mesa/types.ts
+++ b/packages/libs/coreui/src/components/Mesa/types.ts
@@ -108,7 +108,7 @@ interface MesaAction<Row, Key = DefaultColumnKey<Row>> {
 
 type DefaultColumnValue<Row, Key> = Key extends keyof Row ? Row[Key] : unknown;
 
-interface CellProps<
+export interface CellProps<
   Row,
   Key = DefaultColumnKey<Row>,
   Value = DefaultColumnValue<Row, Key>
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 5f2687419f..7203580ae1 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -9,7 +9,15 @@ import { isGenomicsService } from '../../wrapWdkService';
 import {
   AiExpressionSummary,
   AiExpressionSummaryResponse,
+  AiExpressionSummarySection,
 } from '../../types/aiExpressionTypes';
+import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
+import { AttributeValue } from '@veupathdb/wdk-client/lib/Utils/WdkModel';
+import Mesa from '@veupathdb/coreui/lib/components/Mesa';
+import {
+  MesaStateProps,
+  CellProps,
+} from '@veupathdb/coreui/lib/components/Mesa/types';
 
 /** Display AI Expression Summary UI and results in a collapsible section */
 export function AiExpressionSummary(props: Props) {
@@ -88,13 +96,63 @@ function AiSummaryGate(props: Props) {
   }
 }
 
+// Note that `safeHtml()` does NOT sanitise dangerous HTML elements and attributes.
+// for example, this would render and the JavaScript will execute:
+// const danger = `<img src="x" onerror="alert('XSS!')" />`;
+// See https://github.com/VEuPathDB/web-monorepo/issues/1170
+
 function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
-  const headline = props.summary.headline;
+  const {
+    record,
+    summary: { headline, one_paragraph_summary, sections },
+  } = props;
+
+  // make a lookup from dataset_id to the experiment info (display_name, assay_type) etc
+  const expressionGraphs = record.tables['ExpressionGraphs'];
+  const experiments = expressionGraphs.reduce<
+    Record<string, Record<string, AttributeValue>>
+  >((result, current) => {
+    const dataset_id = current['dataset_id'] as string;
+    result[dataset_id] = { ...current };
+    return result;
+  }, {});
+
+  const renderCell = (props: CellProps<AiExpressionSummarySection>) =>
+    safeHtml(props.value.toString());
+
+  // create the sections table
+  const mesaState: MesaStateProps<AiExpressionSummarySection> = {
+    rows: sections,
+    columns: [
+      {
+        key: 'headline',
+        name: 'Section',
+        renderCell,
+        style: { fontWeight: 'bold' },
+      },
+      {
+        key: 'one_sentence_summary',
+        name: 'Summary',
+        renderCell,
+      },
+    ],
+    options: {},
+  };
+
   return (
-    <div>
-      Here are today's headlines:
-      <br />
-      {headline}
+    <div className="ai-generated">
+      {safeHtml(headline, undefined, 'h4')}
+      <div style={{ maxWidth: '40em' }}>
+        {safeHtml(one_paragraph_summary, undefined, 'p')}
+      </div>
+      <p>
+        <i>
+          The AI has organized {expressionGraphs.length} experiments into{' '}
+          {sections.length} sections, hopefully with the most biologically
+          relevant first:
+        </i>
+      </p>
+      <Mesa state={mesaState} />
     </div>
   );
 }
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
index 7d82c787ac..1f5c7ef6c7 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
@@ -15,7 +15,7 @@ export interface AiExpressionSummary {
   sections: AiExpressionSummarySection[];
 }
 
-interface AiExpressionSummarySection {
+export interface AiExpressionSummarySection {
   headline: string;
   one_sentence_summary: string;
   dataset_ids: string[];

From 99bcada1b27430d6ebbabd88517074ec417ac240 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 00:04:50 +0000
Subject: [PATCH 06/26] loading flow improvements, number of experiments column

---
 .../records/AiExpressionSummary.tsx           | 33 ++++++++++++++-----
 .../js/client/types/aiExpressionTypes.ts      | 11 ++++++-
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 7203580ae1..a914faaf85 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
-import { CollapsibleSection } from '@veupathdb/wdk-client/lib/Components';
+import {
+  CollapsibleSection,
+  Loading,
+} from '@veupathdb/wdk-client/lib/Components';
 import { Props } from '@veupathdb/wdk-client/lib/Views/Records/RecordAttributes/RecordAttributeSection';
 
 import { DefaultSectionTitle } from '@veupathdb/wdk-client/lib/Views/Records/SectionTitle';
@@ -37,11 +40,13 @@ export function AiExpressionSummary(props: Props) {
       onCollapsedChange={onCollapsedChange}
     >
       <ErrorBoundary>
-        {record.attributes['ai_expression'] == 'YES' ? (
-          <AiSummaryGate {...props} />
-        ) : (
-          <div>Sorry, this feature is not currently available.</div>
-        )}
+        <div style={{ minHeight: '8em' }}>
+          {record.attributes['ai_expression'] == 'YES' ? (
+            <AiSummaryGate {...props} />
+          ) : (
+            <div>Sorry, this feature is not currently available.</div>
+          )}
+        </div>
       </ErrorBoundary>
     </CollapsibleSection>
   );
@@ -67,7 +72,7 @@ function AiSummaryGate(props: Props) {
     if (aiExpressionSummary[geneId]?.cacheStatus === 'hit') {
       const summary = aiExpressionSummary[geneId].expressionSummary;
       return <AiExpressionResult summary={summary} {...props} />;
-    } else {
+    } else if (!shouldPopulateCache) {
       // Cache miss: render button to populate cache
       return (
         <div>
@@ -90,7 +95,12 @@ function AiSummaryGate(props: Props) {
     }
   }
   if (shouldPopulateCache) {
-    return <div>🤖 Summarising... 🤖</div>;
+    return (
+      <>
+        <div>🤖 Summarising... 🤖</div>
+        <Loading />
+      </>
+    );
   } else {
     return <div>Loading...</div>;
   }
@@ -117,6 +127,7 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
     return result;
   }, {});
 
+  // custom renderer (to handle <i>tags</i> mainly)
   const renderCell = (props: CellProps<AiExpressionSummarySection>) =>
     safeHtml(props.value.toString());
 
@@ -135,6 +146,12 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
         name: 'Summary',
         renderCell,
       },
+      {
+        key: 'summaries',
+        name: '# Experiments',
+        renderCell: (cellProps) => cellProps.row.summaries.length,
+        style: { textAlign: 'right' },
+      },
     ],
     options: {},
   };
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
index 1f5c7ef6c7..e4ad797fdf 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
@@ -18,5 +18,14 @@ export interface AiExpressionSummary {
 export interface AiExpressionSummarySection {
   headline: string;
   one_sentence_summary: string;
-  dataset_ids: string[];
+  summaries: AiExperimentSummary[];
+}
+
+export interface AiExperimentSummary {
+  one_sentence_summary: string;
+  notes: string;
+  confidence: number;
+  biological_importance: number;
+  dataset_id: string;
+  experiment_keywords: string[];
 }

From 4dfb84f947848758c82c37c93f5169bcc17966e5 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 12:05:58 +0000
Subject: [PATCH 07/26] div height consistency when clicking button

---
 .../js/client/components/records/AiExpressionSummary.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index a914faaf85..05368a2918 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -96,10 +96,10 @@ function AiSummaryGate(props: Props) {
   }
   if (shouldPopulateCache) {
     return (
-      <>
-        <div>🤖 Summarising... 🤖</div>
+      <div>
+        <p>🤖 Summarising... 🤖</p>
         <Loading />
-      </>
+      </div>
     );
   } else {
     return <div>Loading...</div>;
@@ -148,7 +148,7 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
       },
       {
         key: 'summaries',
-        name: '# Experiments',
+        name: '# Datasets',
         renderCell: (cellProps) => cellProps.row.summaries.length,
         style: { textAlign: 'right' },
       },

From 98c1e1e067bca11d31cbfd990bffcd0d15179353 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 19:45:23 +0000
Subject: [PATCH 08/26] expandable rows and some tweaks

---
 .../records/AiExpressionSummary.tsx           | 78 +++++++++++++++----
 1 file changed, 63 insertions(+), 15 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 05368a2918..a7c971b25b 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import {
   CollapsibleSection,
+  Link,
   Loading,
 } from '@veupathdb/wdk-client/lib/Components';
 import { Props } from '@veupathdb/wdk-client/lib/Views/Records/RecordAttributes/RecordAttributeSection';
@@ -13,6 +14,7 @@ import {
   AiExpressionSummary,
   AiExpressionSummaryResponse,
   AiExpressionSummarySection,
+  AiExperimentSummary,
 } from '../../types/aiExpressionTypes';
 import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
 import { AttributeValue } from '@veupathdb/wdk-client/lib/Utils/WdkModel';
@@ -117,6 +119,8 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
     summary: { headline, one_paragraph_summary, sections },
   } = props;
 
+  const [expandedRows, setExpandedRows] = useState<number[]>([]);
+
   // make a lookup from dataset_id to the experiment info (display_name, assay_type) etc
   const expressionGraphs = record.tables['ExpressionGraphs'];
   const experiments = expressionGraphs.reduce<
@@ -132,12 +136,12 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
     safeHtml(props.value.toString());
 
   // create the sections table
-  const mesaState: MesaStateProps<AiExpressionSummarySection> = {
+  const mainTableState: MesaStateProps<AiExpressionSummarySection> = {
     rows: sections,
     columns: [
       {
         key: 'headline',
-        name: 'Section',
+        name: 'Topic',
         renderCell,
         style: { fontWeight: 'bold' },
       },
@@ -145,31 +149,75 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
         key: 'one_sentence_summary',
         name: 'Summary',
         renderCell,
+        //	style: { maxWidth: '30em' },
       },
       {
         key: 'summaries',
-        name: '# Datasets',
+        name: `#\u00A0Datasets`, // non-breaking space
         renderCell: (cellProps) => cellProps.row.summaries.length,
         style: { textAlign: 'right' },
       },
     ],
-    options: {},
+    options: {
+      childRow: (props) => {
+        // NOTE: the typing of `ChildRowProps` seems wrong
+        // as it is called with two args, not one, see
+        // https://github.com/VEuPathDB/web-monorepo/blob/d1d03fcd051cd7a54706fe879e4af4b1fc220d88/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx#L26
+        const rowIndex = props as unknown as number;
+        const rowData = sections[rowIndex];
+        return (
+          <ErrorBoundary>
+            <ul>
+              {rowData.summaries.map((summary) => {
+                return (
+                  <li
+                    key={summary.dataset_id}
+                    style={{ marginBottom: '0.5em', marginLeft: '4em' }}
+                  >
+                    <>
+                      <Link to="#ExpressionGraphs" onclick="alert('hello')">
+                        {experiments[summary.dataset_id].display_name}
+                      </Link>{' '}
+                      ({experiments[summary.dataset_id].assay_type})
+                      <br />
+                      {safeHtml(summary.one_sentence_summary)}
+                    </>
+                  </li>
+                );
+              })}
+            </ul>
+          </ErrorBoundary>
+        );
+      },
+      getRowId: (row) => row.headline,
+    },
+    eventHandlers: {
+      onExpandedRowsChange: (rowIndexes) => setExpandedRows(rowIndexes),
+    },
+    uiState: {
+      expandedRows,
+    },
   };
 
   return (
     <div className="ai-generated">
-      {safeHtml(headline, undefined, 'h4')}
-      <div style={{ maxWidth: '40em' }}>
-        {safeHtml(one_paragraph_summary, undefined, 'p')}
+      <div style={{ marginLeft: '15px', maxWidth: '50em' }}>
+        {safeHtml(headline, undefined, 'h4')}
+        {safeHtml(
+          one_paragraph_summary,
+          { style: { background: 'yellow' } },
+          'p'
+        )}
+        <p>
+          <i>
+            The AI has classified {expressionGraphs.length} experiments into the{' '}
+            {sections.length} topics below, aiming to present the most
+            biologically relevant information first. As this method is still
+            evolving, results may vary.
+          </i>
+        </p>
       </div>
-      <p>
-        <i>
-          The AI has organized {expressionGraphs.length} experiments into{' '}
-          {sections.length} sections, hopefully with the most biologically
-          relevant first:
-        </i>
-      </p>
-      <Mesa state={mesaState} />
+      <Mesa state={mainTableState} />
     </div>
   );
 }

From 26e3cd8ca178fd873f7952ab93a8f7eb85da6f35 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 20:07:12 +0000
Subject: [PATCH 09/26] SCSS styling the structured summary

---
 .../records/AiExpressionSummary.scss          |  8 +++++++
 .../records/AiExpressionSummary.tsx           | 23 ++++++++++---------
 2 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
new file mode 100644
index 0000000000..b011a6ed67
--- /dev/null
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
@@ -0,0 +1,8 @@
+div.ai-summary {
+  p {
+    ul {
+      margin-top: 0.5em;
+      margin-bottom: 1em;
+    }
+  }
+}
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index a7c971b25b..af1af733db 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -14,7 +14,6 @@ import {
   AiExpressionSummary,
   AiExpressionSummaryResponse,
   AiExpressionSummarySection,
-  AiExperimentSummary,
 } from '../../types/aiExpressionTypes';
 import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
 import { AttributeValue } from '@veupathdb/wdk-client/lib/Utils/WdkModel';
@@ -24,6 +23,9 @@ import {
   CellProps,
 } from '@veupathdb/coreui/lib/components/Mesa/types';
 
+// Styles
+import './AiExpressionSummary.scss';
+
 /** Display AI Expression Summary UI and results in a collapsible section */
 export function AiExpressionSummary(props: Props) {
   const { attribute, record, isCollapsed, onCollapsedChange, title } = props;
@@ -201,19 +203,18 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
 
   return (
     <div className="ai-generated">
-      <div style={{ marginLeft: '15px', maxWidth: '50em' }}>
+      <div
+        className="ai-summary"
+        style={{ marginLeft: '15px', maxWidth: '50em' }}
+      >
         {safeHtml(headline, undefined, 'h4')}
-        {safeHtml(
-          one_paragraph_summary,
-          { style: { background: 'yellow' } },
-          'p'
-        )}
+        {safeHtml(one_paragraph_summary, undefined, 'p')}
         <p>
           <i>
-            The AI has classified {expressionGraphs.length} experiments into the{' '}
-            {sections.length} topics below, aiming to present the most
-            biologically relevant information first. As this method is still
-            evolving, results may vary.
+            The results from {expressionGraphs.length} experiments have been
+            organized into the {sections.length} topics below. The AI was
+            instructed to present the most biologically relevant information
+            first. As this method is still evolving, results may vary.
           </i>
         </p>
       </div>

From 64438faffca9771815a637f941a87d4f8cc205ab Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 20:14:27 +0000
Subject: [PATCH 10/26] equal margins in expandable rows

---
 .../js/client/components/records/AiExpressionSummary.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index af1af733db..113ff64352 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -174,7 +174,11 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
                 return (
                   <li
                     key={summary.dataset_id}
-                    style={{ marginBottom: '0.5em', marginLeft: '4em' }}
+                    style={{
+                      marginBottom: '0.5em',
+                      marginLeft: '4em',
+                      marginRight: '4em',
+                    }}
                   >
                     <>
                       <Link to="#ExpressionGraphs" onclick="alert('hello')">

From 48b10160667218bb5038995f998a9b10870344c2 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 20:50:56 +0000
Subject: [PATCH 11/26] remove failed debugging

---
 .../js/client/components/records/AiExpressionSummary.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 113ff64352..8b543c930c 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -181,7 +181,7 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
                     }}
                   >
                     <>
-                      <Link to="#ExpressionGraphs" onclick="alert('hello')">
+                      <Link to="#ExpressionGraphs">
                         {experiments[summary.dataset_id].display_name}
                       </Link>{' '}
                       ({experiments[summary.dataset_id].assay_type})

From c3161476285dfe4dfddb325189336af6fba3724d Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 20:51:15 +0000
Subject: [PATCH 12/26] refactor expression graph opener into util function

---
 .../GeneRecordClasses.GeneRecordClass.jsx     | 44 +++++--------------
 .../js/client/components/records/utils.js     | 40 +++++++++++++++++
 2 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
index 0ef44476b7..8889da8a55 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx
@@ -37,7 +37,7 @@ import * as Gbrowse from '../common/Gbrowse';
 import { OverviewThumbnails } from '../common/OverviewThumbnails';
 import { SnpsAlignmentForm } from '../common/Snps';
 import { addCommentLink } from '../common/UserComments';
-import { withRequestFields } from './utils';
+import { withRequestFields, scrollToAndOpenExpressionGraph } from './utils';
 import {
   usePreferredOrganismsEnabledState,
   usePreferredOrganismsState,
@@ -1757,39 +1757,15 @@ const TranscriptionSummaryForm = connect(
           // Find the associated expression graph row data
           // FIXME: Look up the expression graph entry by dataset_id instead of display_name
           // This will require adding the dataset_id as a data attribute
-          const expressionGraphIndex = ExpressionGraphs.findIndex(
-            ({ display_name }) =>
-              e.target.dataset.unformatted.startsWith(display_name)
-          );
-
-          const expressionGraphTableElement =
-            document.getElementById('ExpressionGraphs');
-
-          const expressionGraphTableRowElement =
-            expressionGraphTableElement?.querySelector(
-              `tr#row_id_${expressionGraphIndex}`
-            );
-
-          // If the expression graph table is available...
-          if (
-            expressionGraphIndex !== -1 &&
-            expressionGraphTableRowElement != null
-          ) {
-            // Make sure the table section is open
-            this.props.updateSectionVisibility('ExpressionGraphs', true);
-            // Add a history entry so users can use the back button to go back to *this* section
-            window.history.pushState(null, null, '#ExpressionGraphs');
-
-            expressionGraphTableRowElement.scrollIntoView();
-
-            this.props.updateTableState('ExpressionGraphs', {
-              ...this.props.expressionGraphsTableState,
-              selectedRow: expressionGraphIndex,
-              expandedRows: (
-                this.props.expressionGraphsTableState?.expandedRows ?? []
-              ).concat([expressionGraphIndex]),
-            });
-          }
+          scrollToAndOpenExpressionGraph({
+            expressionGraphs: ExpressionGraphs,
+            findIndexFn: ({ display_name }) =>
+              e.target.dataset.unformatted.startsWith(display_name),
+            tableId: 'ExpressionGraphs',
+            updateSectionVisibility: this.props.updateSectionVisibility,
+            updateTableState: this.props.updateTableState,
+            tableState: this.props.expressionGraphsTableState,
+          });
         }
       });
 
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
index cf4d5cdcf8..f0ebb3a158 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
@@ -51,3 +51,43 @@ export function renderNodeLabelMarkup(dataProp) {
 
   return memoize(compose(stripHTML, getDataProperty), getDataProperty);
 }
+
+export function scrollToAndOpenExpressionGraph({
+  expressionGraphs,
+  findIndexFn,
+  tableId,
+  updateSectionVisibility,
+  updateTableState,
+  tableState,
+}) {
+  // Find the associated expression graph row data
+  const expressionGraphIndex = expressionGraphs.findIndex(findIndexFn);
+
+  const expressionGraphTableElement = document.getElementById(tableId);
+
+  const expressionGraphTableRowElement =
+    expressionGraphTableElement?.querySelector(
+      `tr#row_id_${expressionGraphIndex}`
+    );
+
+  // If the expression graph table is available...
+  if (expressionGraphIndex !== -1 && expressionGraphTableRowElement != null) {
+    // Ensure the table section is visible
+    updateSectionVisibility(tableId, true);
+
+    // Add a history entry so users can use the back button to go back to this section
+    window.history.pushState(null, null, `#${tableId}`);
+
+    // Scroll to the expression graph row
+    expressionGraphTableRowElement.scrollIntoView();
+
+    // Update table state (select and expand the row)
+    updateTableState(tableId, {
+      ...tableState,
+      selectedRow: expressionGraphIndex,
+      expandedRows: (tableState?.expandedRows ?? []).concat([
+        expressionGraphIndex,
+      ]),
+    });
+  }
+}

From 6e9d61750da4be1f06fe822a75d17438052418cf Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 21:51:14 +0000
Subject: [PATCH 13/26] wired in scroll-to and redux

---
 .../records/AiExpressionSummary.tsx           | 52 ++++++++++++++++---
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 8b543c930c..60b0e92230 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
 import {
   CollapsibleSection,
-  Link,
   Loading,
 } from '@veupathdb/wdk-client/lib/Components';
 import { Props } from '@veupathdb/wdk-client/lib/Views/Records/RecordAttributes/RecordAttributeSection';
@@ -22,6 +22,10 @@ import {
   MesaStateProps,
   CellProps,
 } from '@veupathdb/coreui/lib/components/Mesa/types';
+import { RecordActions } from '@veupathdb/wdk-client/lib/Actions';
+import { DEFAULT_TABLE_STATE } from '@veupathdb/wdk-client/lib/StoreModules/RecordStoreModule';
+import { State as ReduxState } from '@veupathdb/wdk-client/lib/StoreModules/RecordStoreModule';
+import { scrollToAndOpenExpressionGraph } from './utils';
 
 // Styles
 import './AiExpressionSummary.scss';
@@ -115,7 +119,23 @@ function AiSummaryGate(props: Props) {
 // const danger = `<img src="x" onerror="alert('XSS!')" />`;
 // See https://github.com/VEuPathDB/web-monorepo/issues/1170
 
-function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
+const mapState = (record: ReduxState) => ({
+  expressionGraphsTableState:
+    record.tableStates?.ExpressionGraphs ?? DEFAULT_TABLE_STATE,
+});
+
+const mapDispatch = {
+  updateSectionVisibility: RecordActions.updateSectionVisibility,
+  updateTableState: RecordActions.updateTableState,
+};
+
+const connector = connect(mapState, mapDispatch);
+type PropsFromRedux = ConnectedProps<typeof connector>;
+type AiExpressionResultProps = Props & {
+  summary: AiExpressionSummary;
+} & PropsFromRedux;
+
+const AiExpressionResult = connector((props: AiExpressionResultProps) => {
   const {
     record,
     summary: { headline, one_paragraph_summary, sections },
@@ -161,11 +181,11 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
       },
     ],
     options: {
-      childRow: (props) => {
+      childRow: (badProps) => {
         // NOTE: the typing of `ChildRowProps` seems wrong
         // as it is called with two args, not one, see
         // https://github.com/VEuPathDB/web-monorepo/blob/d1d03fcd051cd7a54706fe879e4af4b1fc220d88/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx#L26
-        const rowIndex = props as unknown as number;
+        const rowIndex = badProps as unknown as number;
         const rowData = sections[rowIndex];
         return (
           <ErrorBoundary>
@@ -181,9 +201,25 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
                     }}
                   >
                     <>
-                      <Link to="#ExpressionGraphs">
-                        {experiments[summary.dataset_id].display_name}
-                      </Link>{' '}
+                      <a
+                        onClick={() =>
+                          scrollToAndOpenExpressionGraph({
+                            expressionGraphs: expressionGraphs,
+                            findIndexFn: ({
+                              dataset_id,
+                            }: {
+                              dataset_id: string;
+                            }) => dataset_id === summary.dataset_id,
+                            tableId: 'ExpressionGraphs',
+                            updateSectionVisibility:
+                              props.updateSectionVisibility,
+                            updateTableState: props.updateTableState,
+                            tableState: props.expressionGraphsTableState,
+                          })
+                        }
+                      >
+                        {experiments[summary.dataset_id].display_name as string}
+                      </a>{' '}
                       ({experiments[summary.dataset_id].assay_type})
                       <br />
                       {safeHtml(summary.one_sentence_summary)}
@@ -225,7 +261,7 @@ function AiExpressionResult(props: Props & { summary: AiExpressionSummary }) {
       <Mesa state={mainTableState} />
     </div>
   );
-}
+});
 
 function useAiExpressionSummary(
   geneId: string,

From 789921612c57b42e0ecd8eee6163de9067a1198d Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 22:02:29 +0000
Subject: [PATCH 14/26] use numeric rowIds

---
 .../components/records/AiExpressionSummary.tsx    | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 60b0e92230..8cd778da5d 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -135,6 +135,8 @@ type AiExpressionResultProps = Props & {
   summary: AiExpressionSummary;
 } & PropsFromRedux;
 
+type RowType = AiExpressionSummarySection & { rowId: number };
+
 const AiExpressionResult = connector((props: AiExpressionResultProps) => {
   const {
     record,
@@ -154,12 +156,17 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
   }, {});
 
   // custom renderer (to handle <i>tags</i> mainly)
-  const renderCell = (props: CellProps<AiExpressionSummarySection>) =>
+  const renderCell = (props: CellProps<RowType>) =>
     safeHtml(props.value.toString());
 
+  const numberedSections = sections.map((section, index) => ({
+    ...section,
+    rowId: index,
+  }));
+
   // create the sections table
-  const mainTableState: MesaStateProps<AiExpressionSummarySection> = {
-    rows: sections,
+  const mainTableState: MesaStateProps<RowType> = {
+    rows: numberedSections,
     columns: [
       {
         key: 'headline',
@@ -231,7 +238,7 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
           </ErrorBoundary>
         );
       },
-      getRowId: (row) => row.headline,
+      getRowId: (row) => row.rowId,
     },
     eventHandlers: {
       onExpandedRowsChange: (rowIndexes) => setExpandedRows(rowIndexes),

From eed0427ea817b8da846fcd79fb5c687fcebb3222 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Tue, 25 Feb 2025 22:31:40 +0000
Subject: [PATCH 15/26] add clickable rows to toggle child row expansion

---
 .../records/AiExpressionSummary.tsx           | 42 ++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 8cd778da5d..8141387de4 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -114,37 +114,30 @@ function AiSummaryGate(props: Props) {
   }
 }
 
-// Note that `safeHtml()` does NOT sanitise dangerous HTML elements and attributes.
-// for example, this would render and the JavaScript will execute:
-// const danger = `<img src="x" onerror="alert('XSS!')" />`;
-// See https://github.com/VEuPathDB/web-monorepo/issues/1170
+type RowType = AiExpressionSummarySection & { rowId: number };
 
+// Jump through some hoops to connect the redux store
 const mapState = (record: ReduxState) => ({
   expressionGraphsTableState:
     record.tableStates?.ExpressionGraphs ?? DEFAULT_TABLE_STATE,
 });
-
 const mapDispatch = {
   updateSectionVisibility: RecordActions.updateSectionVisibility,
   updateTableState: RecordActions.updateTableState,
 };
-
 const connector = connect(mapState, mapDispatch);
 type PropsFromRedux = ConnectedProps<typeof connector>;
+
 type AiExpressionResultProps = Props & {
   summary: AiExpressionSummary;
 } & PropsFromRedux;
 
-type RowType = AiExpressionSummarySection & { rowId: number };
-
 const AiExpressionResult = connector((props: AiExpressionResultProps) => {
   const {
     record,
     summary: { headline, one_paragraph_summary, sections },
   } = props;
 
-  const [expandedRows, setExpandedRows] = useState<number[]>([]);
-
   // make a lookup from dataset_id to the experiment info (display_name, assay_type) etc
   const expressionGraphs = record.tables['ExpressionGraphs'];
   const experiments = expressionGraphs.reduce<
@@ -155,9 +148,28 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
     return result;
   }, {});
 
-  // custom renderer (to handle <i>tags</i> mainly)
-  const renderCell = (props: CellProps<RowType>) =>
-    safeHtml(props.value.toString());
+  // custom renderer (to handle <i>, <ul>, <li> and <strong> tags, mainly)
+  // and provide click to toggle row expansion functionality
+
+  const [expandedRows, setExpandedRows] = useState<number[]>([]);
+
+  const RenderCellWithHtmlAndClickHandler = (props: CellProps<RowType>) => {
+    const myRowId = props.row.rowId;
+    const handleClick = () => {
+      setExpandedRows(
+        (prevRows) =>
+          prevRows.includes(myRowId)
+            ? prevRows.filter((id) => id !== myRowId) // Remove if already expanded
+            : [...prevRows, myRowId] // Add if not expanded
+      );
+    };
+    return <div onClick={handleClick}>{safeHtml(props.value.toString())}</div>;
+  };
+
+  // Note that `safeHtml()` does NOT sanitise dangerous HTML elements and attributes.
+  // for example, this would render and the JavaScript will execute:
+  // const danger = `<img src="x" onerror="alert('XSS!')" />`;
+  // See https://github.com/VEuPathDB/web-monorepo/issues/1170
 
   const numberedSections = sections.map((section, index) => ({
     ...section,
@@ -171,13 +183,13 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
       {
         key: 'headline',
         name: 'Topic',
-        renderCell,
+        renderCell: RenderCellWithHtmlAndClickHandler,
         style: { fontWeight: 'bold' },
       },
       {
         key: 'one_sentence_summary',
         name: 'Summary',
-        renderCell,
+        renderCell: RenderCellWithHtmlAndClickHandler,
         //	style: { maxWidth: '30em' },
       },
       {

From 59ed257ad177774d0c7ccba2bfcb0d7ce039a8e5 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Thu, 27 Feb 2025 16:27:35 +0000
Subject: [PATCH 16/26] US spelling

---
 .../js/client/components/records/AiExpressionSummary.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 8141387de4..a8130a150c 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -105,7 +105,7 @@ function AiSummaryGate(props: Props) {
   if (shouldPopulateCache) {
     return (
       <div>
-        <p>🤖 Summarising... 🤖</p>
+        <p>🤖 Summarizing... 🤖</p>
         <Loading />
       </div>
     );

From 5165e0de59acb56d193b550555408fdfaaadead2 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Fri, 28 Feb 2025 12:17:43 +0000
Subject: [PATCH 17/26] rename sections to topics

---
 .../components/records/AiExpressionSummary.tsx     | 14 +++++++-------
 .../js/client/types/aiExpressionTypes.ts           |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index a8130a150c..1579bf1abe 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -135,7 +135,7 @@ type AiExpressionResultProps = Props & {
 const AiExpressionResult = connector((props: AiExpressionResultProps) => {
   const {
     record,
-    summary: { headline, one_paragraph_summary, sections },
+    summary: { headline, one_paragraph_summary, topics },
   } = props;
 
   // make a lookup from dataset_id to the experiment info (display_name, assay_type) etc
@@ -171,14 +171,14 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
   // const danger = `<img src="x" onerror="alert('XSS!')" />`;
   // See https://github.com/VEuPathDB/web-monorepo/issues/1170
 
-  const numberedSections = sections.map((section, index) => ({
-    ...section,
+  const numberedTopics = topics.map((topic, index) => ({
+    ...topic,
     rowId: index,
   }));
 
-  // create the sections table
+  // create the topics table
   const mainTableState: MesaStateProps<RowType> = {
-    rows: numberedSections,
+    rows: numberedTopics,
     columns: [
       {
         key: 'headline',
@@ -205,7 +205,7 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
         // as it is called with two args, not one, see
         // https://github.com/VEuPathDB/web-monorepo/blob/d1d03fcd051cd7a54706fe879e4af4b1fc220d88/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx#L26
         const rowIndex = badProps as unknown as number;
-        const rowData = sections[rowIndex];
+        const rowData = topics[rowIndex];
         return (
           <ErrorBoundary>
             <ul>
@@ -271,7 +271,7 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
         <p>
           <i>
             The results from {expressionGraphs.length} experiments have been
-            organized into the {sections.length} topics below. The AI was
+            organized into the {topics.length} topics below. The AI was
             instructed to present the most biologically relevant information
             first. As this method is still evolving, results may vary.
           </i>
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
index e4ad797fdf..fb738de132 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
@@ -12,7 +12,7 @@ export interface AiExpressionGeneResponse {
 export interface AiExpressionSummary {
   headline: string;
   one_paragraph_summary: string;
-  sections: AiExpressionSummarySection[];
+  topics: AiExpressionSummarySection[];
 }
 
 export interface AiExpressionSummarySection {

From 27c90137150a49edc4400488fb1f3bb62e8e888a Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Fri, 28 Feb 2025 13:21:38 +0000
Subject: [PATCH 18/26] can take up to three minutes

---
 .../js/client/components/records/AiExpressionSummary.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 1579bf1abe..c42a66043f 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -105,7 +105,7 @@ function AiSummaryGate(props: Props) {
   if (shouldPopulateCache) {
     return (
       <div>
-        <p>🤖 Summarizing... 🤖</p>
+        <p>🤖 Summarizing... (can take up to three minutes) 🤖</p>
         <Loading />
       </div>
     );

From 8a8065d20c1a9d228c74f715c66a6e6f48b55560 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Fri, 28 Feb 2025 17:37:52 +0000
Subject: [PATCH 19/26] fix mouse pointer for experiment links

---
 .../js/client/components/records/AiExpressionSummary.scss     | 4 ++++
 .../js/client/components/records/AiExpressionSummary.tsx      | 1 +
 2 files changed, 5 insertions(+)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
index b011a6ed67..5c437c0456 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
@@ -6,3 +6,7 @@ div.ai-summary {
     }
   }
 }
+
+a.javascript-link {
+  cursor: grab;
+}
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index c42a66043f..ca36fb04ba 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -221,6 +221,7 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
                   >
                     <>
                       <a
+                        className="javascript-link"
                         onClick={() =>
                           scrollToAndOpenExpressionGraph({
                             expressionGraphs: expressionGraphs,

From f8c10f2f02e6edd780212412f3b16c8f4a0b9681 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Fri, 28 Feb 2025 18:13:23 +0000
Subject: [PATCH 20/26] add gate for less than 5 datasets

---
 .../records/AiExpressionSummary.tsx           | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index ca36fb04ba..fa007fc0e5 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -30,6 +30,8 @@ import { scrollToAndOpenExpressionGraph } from './utils';
 // Styles
 import './AiExpressionSummary.scss';
 
+const MIN_DATASETS_FOR_AI_SUMMARY = 5;
+
 /** Display AI Expression Summary UI and results in a collapsible section */
 export function AiExpressionSummary(props: Props) {
   const { attribute, record, isCollapsed, onCollapsedChange, title } = props;
@@ -39,6 +41,16 @@ export function AiExpressionSummary(props: Props) {
     <DefaultSectionTitle displayName={displayName} help={help} />
   );
 
+  const microarrayDatasetCount = props.record.attributes[
+    'microarray_dataset_count'
+  ]
+    ? Number(props.record.attributes['microarray_dataset_count'].toString())
+    : 0;
+  const rnaseqDatasetCount = props.record.attributes['rnaseq_dataset_count']
+    ? Number(props.record.attributes['rnaseq_dataset_count'].toString())
+    : 0;
+  const datasetCount = microarrayDatasetCount + rnaseqDatasetCount;
+
   return (
     <CollapsibleSection
       id={name}
@@ -48,13 +60,20 @@ export function AiExpressionSummary(props: Props) {
       onCollapsedChange={onCollapsedChange}
     >
       <ErrorBoundary>
-        <div style={{ minHeight: '8em' }}>
-          {record.attributes['ai_expression'] == 'YES' ? (
-            <AiSummaryGate {...props} />
+        {record.attributes['ai_expression'] == 'YES' ? (
+          datasetCount < MIN_DATASETS_FOR_AI_SUMMARY ? (
+            <div>
+              The AI Expression Summary feature is not available for genes with
+              fewer than {MIN_DATASETS_FOR_AI_SUMMARY} transcriptomics datasets.
+            </div>
           ) : (
-            <div>Sorry, this feature is not currently available.</div>
-          )}
-        </div>
+            <div style={{ minHeight: '8em' }}>
+              <AiSummaryGate {...props} />
+            </div>
+          )
+        ) : (
+          <div>Sorry, this feature is not currently available.</div>
+        )}
       </ErrorBoundary>
     </CollapsibleSection>
   );

From 0713886e330e471d70f9b7d8ffff85b38f31db06 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Fri, 28 Feb 2025 18:41:22 +0000
Subject: [PATCH 21/26] improve scroll-to behaviour

---
 .../js/client/components/records/utils.js     | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
index f0ebb3a158..682e24508e 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
@@ -63,31 +63,33 @@ export function scrollToAndOpenExpressionGraph({
   // Find the associated expression graph row data
   const expressionGraphIndex = expressionGraphs.findIndex(findIndexFn);
 
-  const expressionGraphTableElement = document.getElementById(tableId);
-
-  const expressionGraphTableRowElement =
-    expressionGraphTableElement?.querySelector(
-      `tr#row_id_${expressionGraphIndex}`
-    );
-
   // If the expression graph table is available...
-  if (expressionGraphIndex !== -1 && expressionGraphTableRowElement != null) {
+  if (expressionGraphIndex !== -1) {
     // Ensure the table section is visible
     updateSectionVisibility(tableId, true);
-
     // Add a history entry so users can use the back button to go back to this section
     window.history.pushState(null, null, `#${tableId}`);
 
-    // Scroll to the expression graph row
-    expressionGraphTableRowElement.scrollIntoView();
+    const expressionGraphTableElement = document.getElementById(tableId);
+    const expressionGraphTableRowElement =
+      expressionGraphTableElement?.querySelector(
+        `tr#row_id_${expressionGraphIndex}`
+      );
+
+    if (expressionGraphTableRowElement != null) {
+      // Update table state (select and expand the row)
+      updateTableState(tableId, {
+        ...tableState,
+        selectedRow: expressionGraphIndex,
+        expandedRows: (tableState?.expandedRows ?? []).concat([
+          expressionGraphIndex,
+        ]),
+      });
 
-    // Update table state (select and expand the row)
-    updateTableState(tableId, {
-      ...tableState,
-      selectedRow: expressionGraphIndex,
-      expandedRows: (tableState?.expandedRows ?? []).concat([
-        expressionGraphIndex,
-      ]),
-    });
+      // Delay scrolling by 100ms
+      setTimeout(() => {
+        expressionGraphTableRowElement.scrollIntoView();
+      }, 100);
+    }
   }
 }

From 8a9cf8a79d97c0e6234d6a8bf748f879c6d8ac83 Mon Sep 17 00:00:00 2001
From: Bob MacCallum <uncoolbob@gmail.com>
Date: Sun, 2 Mar 2025 20:13:03 +0000
Subject: [PATCH 22/26] pre-open transcript expression table when ai results
 render

---
 .../js/client/components/records/AiExpressionSummary.tsx   | 7 ++++++-
 .../wdkCustomization/js/client/components/records/utils.js | 5 +----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index fa007fc0e5..b1e28bf713 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import {
   CollapsibleSection,
@@ -167,6 +167,11 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
     return result;
   }, {});
 
+  // pre-open the main expression table so the links to it work reliably
+  useEffect(() => {
+    props.updateSectionVisibility('ExpressionGraphs', true);
+  }, []);
+
   // custom renderer (to handle <i>, <ul>, <li> and <strong> tags, mainly)
   // and provide click to toggle row expansion functionality
 
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
index 682e24508e..3f08b35dcb 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/utils.js
@@ -86,10 +86,7 @@ export function scrollToAndOpenExpressionGraph({
         ]),
       });
 
-      // Delay scrolling by 100ms
-      setTimeout(() => {
-        expressionGraphTableRowElement.scrollIntoView();
-      }, 100);
+      expressionGraphTableRowElement.scrollIntoView();
     }
   }
 }

From 032f4f19fd9c64b97eb7ad2995d0fc49604daff5 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Thu, 6 Mar 2025 18:45:51 +0000
Subject: [PATCH 23/26] first stab at this

---
 .../records/AiExpressionSummary.tsx           | 79 ++++++++++++-------
 .../js/client/types/aiExpressionTypes.ts      | 17 +++-
 2 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index b1e28bf713..ecd0948b0a 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import {
   CollapsibleSection,
@@ -31,6 +31,7 @@ import { scrollToAndOpenExpressionGraph } from './utils';
 import './AiExpressionSummary.scss';
 
 const MIN_DATASETS_FOR_AI_SUMMARY = 5;
+const POLL_TIME_MS = 5000;
 
 /** Display AI Expression Summary UI and results in a collapsible section */
 export function AiExpressionSummary(props: Props) {
@@ -94,38 +95,60 @@ function AiSummaryGate(props: Props) {
     geneId,
     shouldPopulateCache
   );
+  const geneResponse = aiExpressionSummary?.[geneId];
+  const completeExpressionSummary =
+    geneResponse?.resultStatus === 'present' && geneResponse?.expressionSummary
+      ? geneResponse.expressionSummary
+      : undefined;
 
-  if (aiExpressionSummary) {
-    if (aiExpressionSummary[geneId]?.cacheStatus === 'hit') {
-      const summary = aiExpressionSummary[geneId].expressionSummary;
-      return <AiExpressionResult summary={summary} {...props} />;
-    } else if (!shouldPopulateCache) {
-      // Cache miss: render button to populate cache
-      return (
-        <div>
-          <p>
-            Click below to request an AI summary of this gene. It could take up
-            to three minutes. When complete it will be cached for all users.
-          </p>
-          <button onClick={() => setShouldPopulateCache(true)}>
-            Start AI Summary
-          </button>
+  const [pollingCounter, setPollingCounter] = useState(-1);
+  const pollingTimeout = useRef<ReturnType<typeof setTimeout>>();
+  const pollingResponse = useAiExpressionSummary(geneId, false, pollingCounter);
 
-          {/* Debugging: Display cache miss reason if present */}
-          {aiExpressionSummary[geneId]?.reason && (
-            <p style={{ color: 'red' }}>
-              Debug: Cache miss reason - {aiExpressionSummary[geneId].reason}
-            </p>
-          )}
-        </div>
+  // update polling counter when the main request is active
+  useEffect(() => {
+    if (shouldPopulateCache && completeExpressionSummary == null) {
+      pollingTimeout.current = setTimeout(
+        () => setPollingCounter(pollingCounter + 1),
+        POLL_TIME_MS
       );
     }
+    return () => clearTimeout(pollingTimeout.current);
+  }, [shouldPopulateCache, completeExpressionSummary, pollingCounter]);
+
+  if (completeExpressionSummary) {
+    return (
+      <AiExpressionResult summary={completeExpressionSummary} {...props} />
+    );
+  } else if (!shouldPopulateCache) {
+    // Cache miss: render button to populate cache
+    return (
+      <div>
+        <p>
+          Click below to request an AI summary of this gene. It could take up to
+          three minutes. When complete it will be cached for all users.
+        </p>
+        <button onClick={() => setShouldPopulateCache(true)}>
+          Start AI Summary
+        </button>
+
+        {/* Debugging: Display cache miss reason if present */}
+        <p style={{ color: 'red' }}>
+          Debug: resultStatus = {geneResponse?.resultStatus}
+        </p>
+      </div>
+    );
   }
   if (shouldPopulateCache) {
+    const { numExperiments = 0, numExperimentsComplete = 0 } =
+      pollingResponse?.[geneId] ?? {};
+
     return (
       <div>
-        <p>🤖 Summarizing... (can take up to three minutes) 🤖</p>
-        <Loading />
+        <p>🤖 Summarizing... 🤖</p>
+        <Loading>
+          {numExperimentsComplete}/{numExperiments}
+        </Loading>
       </div>
     );
   } else {
@@ -309,11 +332,13 @@ const AiExpressionResult = connector((props: AiExpressionResultProps) => {
 
 function useAiExpressionSummary(
   geneId: string,
-  shouldPopulateCache: boolean
+  shouldPopulateCache: boolean,
+  pollingCounter: number = 0
 ): AiExpressionSummaryResponse | undefined {
   return useWdkService(
     async (wdkService) => {
       if (!isGenomicsService(wdkService)) throw new Error('nasty');
+      if (pollingCounter < 0) return undefined;
       const { projectId } = await wdkService.getConfig();
       const answerSpec = {
         searchName: 'single_record_question_GeneRecordClasses_GeneRecordClass',
@@ -334,6 +359,6 @@ function useAiExpressionSummary(
         formatting
       );
     },
-    [geneId, shouldPopulateCache]
+    [geneId, shouldPopulateCache, pollingCounter]
   );
 }
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
index fb738de132..d5277c9ca7 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/types/aiExpressionTypes.ts
@@ -3,10 +3,21 @@ export type AiExpressionSummaryResponse = Record<
   AiExpressionGeneResponse
 >;
 
+type StatusString =
+  | 'present'
+  | 'missing'
+  | 'failed'
+  | 'expired'
+  | 'corrupted'
+  | 'undetermined';
+
+type SummaryStatusString = StatusString | 'experiments_incomplete';
+
 export interface AiExpressionGeneResponse {
-  cacheStatus: 'hit' | 'miss';
-  reason?: string; // only for misses
-  expressionSummary: AiExpressionSummary;
+  resultStatus: SummaryStatusString;
+  numExperiments?: number;
+  numExperimentsComplete?: number;
+  expressionSummary?: AiExpressionSummary;
 }
 
 export interface AiExpressionSummary {

From 8bf5bb1373cbb4d080c245284b631ee660dedd64 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Thu, 6 Mar 2025 18:49:41 +0000
Subject: [PATCH 24/26] handle initial loading properly

---
 .../js/client/components/records/AiExpressionSummary.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index ecd0948b0a..6f44e6fd23 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -116,7 +116,9 @@ function AiSummaryGate(props: Props) {
     return () => clearTimeout(pollingTimeout.current);
   }, [shouldPopulateCache, completeExpressionSummary, pollingCounter]);
 
-  if (completeExpressionSummary) {
+  if (aiExpressionSummary == null) {
+    return <div>Loading...</div>;
+  } else if (completeExpressionSummary) {
     return (
       <AiExpressionResult summary={completeExpressionSummary} {...props} />
     );
@@ -138,8 +140,7 @@ function AiSummaryGate(props: Props) {
         </p>
       </div>
     );
-  }
-  if (shouldPopulateCache) {
+  } else {
     const { numExperiments = 0, numExperimentsComplete = 0 } =
       pollingResponse?.[geneId] ?? {};
 
@@ -151,8 +152,6 @@ function AiSummaryGate(props: Props) {
         </Loading>
       </div>
     );
-  } else {
-    return <div>Loading...</div>;
   }
 }
 

From ad4c07e8243dbe3bd3e3caeab663afdc067f313d Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Fri, 7 Mar 2025 16:17:36 +0000
Subject: [PATCH 25/26] fixed up Loading spinner behaviour

---
 .../components/records/AiExpressionSummary.scss       |  8 ++++++++
 .../client/components/records/AiExpressionSummary.tsx | 11 +++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
index 5c437c0456..27ac3bb5f9 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
@@ -10,3 +10,11 @@ div.ai-summary {
 a.javascript-link {
   cursor: grab;
 }
+
+.AiExpressionResult-Loading {
+  text-align: center;
+  padding: 0;
+  margin-top: 4em;
+  height: unset;
+  max-width: 125px;
+}
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 6f44e6fd23..85f3566427 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -141,14 +141,17 @@ function AiSummaryGate(props: Props) {
       </div>
     );
   } else {
-    const { numExperiments = 0, numExperimentsComplete = 0 } =
+    const { numExperiments, numExperimentsComplete } =
       pollingResponse?.[geneId] ?? {};
-
+    const progressString =
+      numExperiments != null && numExperimentsComplete != null
+        ? `${numExperimentsComplete}/${numExperiments + 1}`
+        : '';
     return (
       <div>
         <p>🤖 Summarizing... 🤖</p>
-        <Loading>
-          {numExperimentsComplete}/{numExperiments}
+        <Loading radius={25} className="AiExpressionResult-Loading">
+          <span>{progressString}</span>
         </Loading>
       </div>
     );

From b3a5764e9850866534bc143a94bb79e5d1847de5 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Sat, 8 Mar 2025 00:01:28 +0000
Subject: [PATCH 26/26] final progress styling tweaks

---
 .../js/client/components/records/AiExpressionSummary.scss     | 4 ++--
 .../js/client/components/records/AiExpressionSummary.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
index 27ac3bb5f9..fd89ba55d1 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.scss
@@ -14,7 +14,7 @@ a.javascript-link {
 .AiExpressionResult-Loading {
   text-align: center;
   padding: 0;
-  margin-top: 4em;
+  margin-top: 3em;
   height: unset;
-  max-width: 125px;
+  max-width: 75px;
 }
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
index 85f3566427..f36b9f3d6c 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/AiExpressionSummary.tsx
@@ -146,10 +146,10 @@ function AiSummaryGate(props: Props) {
     const progressString =
       numExperiments != null && numExperimentsComplete != null
         ? `${numExperimentsComplete}/${numExperiments + 1}`
-        : '';
+        : '🤖';
     return (
       <div>
-        <p>🤖 Summarizing... 🤖</p>
+        <p>Summarizing...</p>
         <Loading radius={25} className="AiExpressionResult-Loading">
           <span>{progressString}</span>
         </Loading>