Merge pull request #356 from visdesignlab/340-shortdesc

Show short description in alttxt pane by default

e2e-tests/alttext.spec.ts

@@ -94,6 +94,16 @@ test('Alt Text', async ({ page }) => {
   await page.getByRole('button', { name: 'Save' }).click();
   await plotInformation.click();
 
+  /// /////////////////
+  // Short Description
+  /// /////////////////
+  await expect(page.getByText("This is an UpSet plot"))
+    .toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
+  await page.getByRole('button', { name: 'Show More' }).click();
+  await page.getByRole('button', { name: 'Show Less' }).click();
+  await expect(page.getByText('This is an UpSet plot which')).toBeVisible();
+  await page.getByRole('button', { name: 'Show More' }).click();
+
   /// /////////////////
   // Alt Text Output
   /// /////////////////

packages/app/src/components/Body.tsx

@@ -1,4 +1,4 @@
-import { Upset, getAltTextConfig } from '@visdesignlab/upset2-react';
+import { AltText, Upset, getAltTextConfig } from '@visdesignlab/upset2-react';
 import { UpsetConfig, getRows } from '@visdesignlab/upset2-core';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { encodedDataAtom } from '../atoms/dataAtom';
@@ -55,29 +55,30 @@ export const Body = ({ yOffset, data, config }: Props) => {
    * If an error occurs during the generation, an error message is returned.
    * Alt text generation currently is not supported for aggregated plots
    * and an error message is returned if the plot is aggregated.
+   * @throws Error with descriptive message if an error occurs while generating the alttxt
    * @returns A promise that resolves to the generated alt text.
    */
-  async function generateAltText(): Promise<string> {
+  async function generateAltText(): Promise<AltText> {
     const state = provObject.provenance.getState();
     const config = getAltTextConfig(state, data, getRows(data, state));
 
     if (config.firstAggregateBy !== "None") {
-      return "Alt text generation is not yet supported for aggregated plots. To generate an alt text, set aggregation to 'None' in the left sidebar.";
+      throw new Error("Alt text generation is not yet supported for aggregated plots. To generate an alt text, set aggregation to 'None' in the left sidebar.");
     }
 
     let response;
     try {
       response = await api.generateAltText(true, config);
     } catch (e: any) {
       if (e.response.status === 500) {
-        return "Server error while generating alt text. Please try again later. If the issue persists, please contact an UpSet developer at vdl-faculty@sci.utah.edu.";
+        throw Error("Server error while generating alt text. Please try again later. If the issue persists, please contact an UpSet developer at vdl-faculty@sci.utah.edu.");
       } else if (e.response.status === 400) {
-        return "Error generating alt text. Contact an upset developer at vdl-faculty@sci.utah.edu.";
+        throw Error("Error generating alt text. Contact an upset developer at vdl-faculty@sci.utah.edu.");
       } else {
-        return "Unknown error while generating alt text: " + e.response.statusText + ". Please contact an UpSet developer at vdl-faculty@sci.utah.edu.";
+        throw Error("Unknown error while generating alt text: " + e.response.statusText + ". Please contact an UpSet developer at vdl-faculty@sci.utah.edu.");
       }
     }
-    return response.alttxt.longDescription;
+    return response.alttxt;
   }
 
   if (data === null) return null;

packages/upset/src/components/AltTextSidebar.tsx

@@ -22,11 +22,12 @@ import { ProvenanceContext } from './Root';
 import { plotInformationSelector } from '../atoms/config/plotInformationAtom';
 import ReactMarkdownWrapper from './custom/ReactMarkdownWrapper';
 import { upsetConfigAtom } from '../atoms/config/upsetConfigAtoms';
+import { AltText } from '../types';
 
 type Props = {
   open: boolean;
   close: () => void;
-  generateAltText: () => Promise<string>;
+  generateAltText: () => Promise<AltText>;
 }
 
 const plotInfoItem = {
@@ -52,7 +53,9 @@ export const AltTextSidebar: FC<Props> = ({ open, close, generateAltText }) => {
 
   const currState = useRecoilValue(upsetConfigAtom);
 
-  const [textDescription, setTextDescription] = useState('');
+  const [altText, setAltText] = useState<AltText | null>(null);
+  const [textGenErr, setTextGenErr] = useState(false);
+  const [useLong, setUseLong] = useState(false);
   const [isEditable, setIsEditable] = useState(false);
 
   const [plotInformation, setPlotInformation] = useState(plotInformationState);
@@ -67,9 +70,19 @@ export const AltTextSidebar: FC<Props> = ({ open, close, generateAltText }) => {
   // When new options are added to the alt-text API, they should be added here as well
   useEffect(() => {
     async function generate(): Promise<void> {
-      const resp = await generateAltText();
-
-      setTextDescription(resp);
+      try {
+        setAltText(await generateAltText());
+        setTextGenErr(false);
+      } catch (e) {
+        const msg: string = (e as Error).message;
+        // We want the error message to display on the frontend
+        setAltText({
+          longDescription: msg,
+          shortDescription: msg,
+          techniqueDescription: msg,
+        });
+        setTextGenErr(true);
+      }
     }
 
     generate();
@@ -233,7 +246,9 @@ export const AltTextSidebar: FC<Props> = ({ open, close, generateAltText }) => {
         </Box>
         <Box marginTop={2}>
           <div css={css`overflow-y: auto; padding-bottom: 4rem;`}>
-            <ReactMarkdownWrapper text={textDescription} />
+            {useLong && !textGenErr && <Button onClick={() => setUseLong(false)}>Show Less</Button>}
+            <ReactMarkdownWrapper text={altText ? useLong ? altText.longDescription : altText.shortDescription : ''} />
+            {!useLong && !textGenErr && <Button onClick={() => setUseLong(true)}>Show More</Button>}
           </div>
         </Box>
       </div>

packages/upset/src/types.ts

@@ -2,68 +2,94 @@ import { CoreUpsetData, UpsetConfig } from '@visdesignlab/upset2-core';
 import { UpsetProvenance, UpsetActions } from './provenance';
 
 /**
- * Represents the props for the Upset component.
- */
+* Represents the props for the Upset component.
+*/
 export interface UpsetProps {
-        /**
-         * Specifies whether the parent component has a fixed height.
-         */
-        parentHasHeight?: boolean;
-
-        /**
-         * The data for the Upset component.
-         */
-        data: CoreUpsetData;
-
-        /**
-         * Optional configuration for the Upset component.
-         */
-        config?: Partial<UpsetConfig>;
-
-        /**
-         * The number of attributes to load.
-         */
-        loadAttributes?: number;
-
-        /**
-         * External provenance information for the Upset component.
-         */
-        extProvenance?: {
-            provenance: UpsetProvenance;
-            actions: UpsetActions;
-        };
-
-        /**
-         * The vertical offset for the Upset component.
-         */
-        yOffset?: number;
-
-        /**
-         * Visualization settings for the provenance component.
-         */
-        provVis?: {
-            open: boolean;
-            close: () => void;
-        };
-
-        /**
-         * Sidebar settings for the element component.
-         */
-        elementSidebar?: {
-            open: boolean;
-            close: () => void;
-        };
-
-        /**
-         * Sidebar settings for the alt text component.
-         */
-        altTextSidebar?: {
-            open: boolean;
-            close: () => void;
-        };
-
-        /**
-         * Generates alternative text for the Upset component.
-         */
-        generateAltText?: () => Promise<string>;
+  /**
+  * Specifies whether the parent component has a fixed height.
+  */
+  parentHasHeight?: boolean;
+  
+  /**
+  * The data for the Upset component.
+  */
+  data: CoreUpsetData;
+  
+  /**
+  * Optional configuration for the Upset component.
+  */
+  config?: Partial<UpsetConfig>;
+  
+  /**
+  * The number of attributes to load.
+  */
+  loadAttributes?: number;
+  
+  /**
+  * External provenance information for the Upset component.
+  */
+  extProvenance?: {
+    provenance: UpsetProvenance;
+    actions: UpsetActions;
+  };
+  
+  /**
+  * The vertical offset for the Upset component.
+  */
+  yOffset?: number;
+  
+  /**
+  * Visualization settings for the provenance component.
+  */
+  provVis?: {
+    open: boolean;
+    close: () => void;
+  };
+  
+  /**
+  * Sidebar settings for the element component.
+  */
+  elementSidebar?: {
+    open: boolean;
+    close: () => void;
+  };
+  
+  /**
+  * Sidebar settings for the alt text component.
+  */
+  altTextSidebar?: {
+    open: boolean;
+    close: () => void;
+  };
+  
+  /**
+  * Generates alternative text for the Upset component.
+  */
+  generateAltText?: () => Promise<AltText>;
 }
+
+/**
+* Represents the alternative text for an Upset plot.
+*/
+export interface AltText {
+  /**
+  * The long description for the Upset plot.
+  */
+  longDescription: string;
+
+  /**
+  * The short description for the Upset plot.
+  */
+  shortDescription: string;
+
+  /**
+  * The technique description for the Upset plot.
+  */
+  techniqueDescription: string;
+
+  /**
+  * Optional warnings for the Upset plot.
+  * Not yet implemented by the API as of 4/22/24
+  */
+  warnings?: string;
+}