Optimize column width based on text length

packages/core/services/AnnotationService/DatabaseAnnotationService/index.ts

@@ -1,13 +1,14 @@
 import { isNil, uniq } from "lodash";
 
 import AnnotationService, { AnnotationDetails, AnnotationValue } from "..";
-import DatabaseService from "../../DatabaseService";
+import DatabaseService, { DatabaseQuery } from "../../DatabaseService";
 import DatabaseServiceNoop from "../../DatabaseService/DatabaseServiceNoop";
+import { TOP_LEVEL_FILE_ANNOTATIONS } from "../../../constants";
 import { AnnotationType } from "../../../entity/AnnotationFormatter";
 import Annotation from "../../../entity/Annotation";
 import FileFilter from "../../../entity/FileFilter";
 import IncludeFilter from "../../../entity/FileFilter/IncludeFilter";
-import { Source } from "../../../entity/SearchParams";
+import { DEFAULT_COLUMN_WIDTH, Source } from "../../../entity/SearchParams";
 import SQLBuilder from "../../../entity/SQLBuilder";
 
 interface Config {
@@ -27,6 +28,29 @@ export default class DatabaseAnnotationService implements AnnotationService {
     private readonly databaseService: DatabaseService;
     private readonly dataSourceNames: string[];
     private readonly metadataSource: Source | undefined;
+    // Get sample character width for computing column widths based on content length.
+    // This is a bit hacky but it's nontrivial to get character width without rendering text
+    // into the DOM, and we need it to compute column widths before rendering.
+    // Grab this one at import to avoid having to re-measure it every time we want
+    // to compute optimal column widths for annotations
+    private readonly sampleCharWidthInPx = DatabaseAnnotationService.measureTextWidth(
+        "S",
+        "16px Open Sans"
+    );
+
+    /**
+     * Measures the width in pixels of the given text rendered with the specified
+     * CSS font shorthand (e.g. "14px Arial", "bold 12px sans-serif").
+     */
+    private static measureTextWidth(text: string, font: string): number {
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context) {
+            return 0;
+        }
+        context.font = font;
+        return context.measureText(text).width;
+    }
 
     constructor(
         config: Config = { dataSourceNames: [], databaseService: new DatabaseServiceNoop() }
@@ -170,6 +194,97 @@ export default class DatabaseAnnotationService implements AnnotationService {
         return results.filter((result) => result.length > 0).map((result) => result[0].column_name);
     }
 
+    /**
+     * Fetch the length of the longest value for each annotation, which can be used to compute optimal column widths in the UI.
+     * This is a bit of a hack, but it allows us to avoid fetching all values for an annotation just to compute column widths.
+     */
+    public async fetchOptimalWidthForAnnotations(
+        annotationNames: string[],
+        ignoreWidthLimit = false
+    ): Promise<Record<string, number>> {
+        // Try to fetch values for new annotations to compute optimal column widths
+        const widthByAnnotation: Record<string, number> = {};
+        try {
+            const fetchQuery = this.fetchLengthiestValues(annotationNames);
+            // Set a timeout on this query in case it takes too long to return,
+            // since it could potentially be slow for annotations with very long values
+            // which is fine and we will just cancel it and fall back to default column widths in that case
+            const timeoutPromise = new Promise<never>((_, reject) =>
+                setTimeout(() => {
+                    fetchQuery.cancel?.();
+                    reject(new Error("Timeout fetching annotation values"));
+                }, 1000)
+            );
+            const annotationToLength = await Promise.race([fetchQuery.promise, timeoutPromise]);
+            for (const [annotation, length] of Object.entries(annotationToLength)) {
+                // Grab whichever is longer, the longest value or the header
+                // to compute the column width needed to fit this column without truncation
+                const maxLengthOfColumn = Math.max(length, annotation.length);
+                // Convert this length to a pixel width using our sample character width
+                // + some extra pixels for padding
+                const maxLengthOfColumnInPx =
+                    Math.ceil(maxLengthOfColumn * this.sampleCharWidthInPx) + 8;
+                // Avoid letting width get too large for extremely long values by capping it
+                const width = ignoreWidthLimit
+                    ? maxLengthOfColumnInPx
+                    : Math.min(maxLengthOfColumnInPx, DEFAULT_COLUMN_WIDTH * 3);
+                widthByAnnotation[annotation] = width;
+            }
+        } catch {
+            // If fetching values fails entirely, fall through to default widths
+        }
+        for (const annotationName of annotationNames) {
+            if (!widthByAnnotation.hasOwnProperty(annotationName)) {
+                widthByAnnotation[annotationName] = DEFAULT_COLUMN_WIDTH;
+            }
+        }
+        for (const annotation of TOP_LEVEL_FILE_ANNOTATIONS) {
+            if (!widthByAnnotation.hasOwnProperty(annotation.name)) {
+                widthByAnnotation[annotation.name] = DEFAULT_COLUMN_WIDTH;
+            }
+        }
+        return widthByAnnotation;
+    }
+
+    /**
+     * Fetch the length of the longest value for each annotation, which can be used to compute optimal column widths in the UI.
+     * This is a bit of a hack, but it allows us to avoid fetching all values for an annotation just to compute column widths.
+     */
+    private fetchLengthiestValues(
+        annotationNames: string[]
+    ): DatabaseQuery<{ [annotation: string]: number }> {
+        if (!this.dataSourceNames.length || annotationNames.length === 0) {
+            return { promise: Promise.resolve({}) };
+        }
+
+        const aggregateDataSourceName = this.dataSourceNames.sort().join(", ");
+        const sql = new SQLBuilder()
+            .select(
+                annotationNames
+                    .map(
+                        (annotation) =>
+                            `MAX(LENGTH(CAST("${annotation}" AS VARCHAR))) AS "${annotation}"`
+                    )
+                    .join(", ")
+            )
+            .from(aggregateDataSourceName)
+            .toSQL();
+
+        const query = this.databaseService.query<{ [annotation: string]: number }[]>(sql);
+        return {
+            promise: query.promise.then((results): { [annotation: string]: number } => {
+                const annotationToLength: { [annotation: string]: number } = {};
+                for (const row of results) {
+                    for (const [annotation, length] of Object.entries(row)) {
+                        annotationToLength[annotation] = length;
+                    }
+                }
+                return annotationToLength;
+            }),
+            cancel: query.cancel,
+        };
+    }
+
     /**
      * Validate annotation values according the type the annotation they belong to.
      */

packages/core/services/AnnotationService/DatabaseAnnotationService/test/DatabaseAnnotationService.test.ts

@@ -1,9 +1,11 @@
 import { expect } from "chai";
 import sinon from "sinon";
 
-import FileFilter, { FilterType } from "../../../../entity/FileFilter";
 import DatabaseService from "../../../DatabaseService";
 import DatabaseServiceNoop from "../../../DatabaseService/DatabaseServiceNoop";
+import { TOP_LEVEL_FILE_ANNOTATIONS } from "../../../../constants";
+import FileFilter, { FilterType } from "../../../../entity/FileFilter";
+import { DEFAULT_COLUMN_WIDTH } from "../../../../entity/SearchParams";
 import SQLBuilder from "../../../../entity/SQLBuilder";
 
 import DatabaseAnnotationService from "..";
@@ -14,7 +16,7 @@ describe("DatabaseAnnotationService", () => {
             select_key: name.toLowerCase() + index,
         }));
         class MockDatabaseService extends DatabaseServiceNoop {
-            public query(): { promise: Promise<{ [key: string]: string }[]> } {
+            public query(): { promise: Promise<any> } {
                 return { promise: Promise.resolve(annotations) };
             }
         }
@@ -38,7 +40,7 @@ describe("DatabaseAnnotationService", () => {
             column_type: "VARCHAR",
         }));
         class MockDatabaseService extends DatabaseServiceNoop {
-            public query(): { promise: Promise<{ [key: string]: string }[]> } {
+            public query(): { promise: Promise<any> } {
                 return { promise: Promise.resolve(annotations) };
             }
         }
@@ -95,7 +97,7 @@ describe("DatabaseAnnotationService", () => {
             bar: name + index,
         }));
         class MockDatabaseService extends DatabaseServiceNoop {
-            public query(): { promise: Promise<{ [key: string]: string }[]> } {
+            public query(): { promise: Promise<any> } {
                 return { promise: Promise.resolve(annotations) };
             }
         }
@@ -154,7 +156,7 @@ describe("DatabaseAnnotationService", () => {
         });
 
         class MockDatabaseService extends DatabaseService {
-            public query(sql: string): { promise: Promise<{ [key: string]: string }[]> } {
+            public query(sql: string): { promise: Promise<any> } {
                 querySpy(sql); // pass SQL to the spy func
                 return { promise: Promise.resolve([]) };
             }
@@ -246,7 +248,7 @@ describe("DatabaseAnnotationService", () => {
         const annotationNames = ["Cell Line", "Is Split Scene", "Whatever"];
         const sampleRow = Object.fromEntries(annotationNames.map((name) => [name, "dummy value"]));
         class MockDatabaseService extends DatabaseService {
-            public query(sql: string): { promise: Promise<{ [key: string]: string }[]> } {
+            public query(sql: string): { promise: Promise<any> } {
                 if (sql.includes("SELECT *") && sql.includes("LIMIT 1")) {
                     // First query for fetchAvailableAnnotationsForHierarchy gets the available
                     // column names with a SELECT * FROM ... LIMIT 1
@@ -278,4 +280,143 @@ describe("DatabaseAnnotationService", () => {
             expect(values).to.deep.equal(annotationNames);
         });
     });
+
+    describe("fetchOptimalWidthForAnnotations", () => {
+        it("caps width at DEFAULT_COLUMN_WIDTH * 3 when ignoreWidthLimit is false", async () => {
+            // Return a very long value length that would exceed the cap
+            class MockDatabaseService extends DatabaseServiceNoop {
+                public query(): { promise: Promise<any> } {
+                    return {
+                        promise: Promise.resolve([{ LongAnnotation: 500 }]),
+                    };
+                }
+            }
+            const annotationService = new DatabaseAnnotationService({
+                dataSourceNames: ["source1"],
+                databaseService: new MockDatabaseService(),
+            });
+
+            const result = await annotationService.fetchOptimalWidthForAnnotations([
+                "LongAnnotation",
+            ]);
+
+            expect(result["LongAnnotation"]).to.be.at.most(DEFAULT_COLUMN_WIDTH * 3);
+        });
+
+        it("does not cap width when ignoreWidthLimit is true", async () => {
+            // Return a very long value length that would exceed the cap
+            class MockDatabaseService extends DatabaseServiceNoop {
+                public query(): { promise: Promise<any> } {
+                    return {
+                        promise: Promise.resolve([{ LongAnnotation: 500 }]),
+                    };
+                }
+            }
+            const annotationService = new DatabaseAnnotationService({
+                dataSourceNames: ["source1"],
+                databaseService: new MockDatabaseService(),
+            });
+
+            const result = await annotationService.fetchOptimalWidthForAnnotations(
+                ["LongAnnotation"],
+                true
+            );
+
+            // With ignoreWidthLimit=true, width should not be capped
+            expect(result["LongAnnotation"]).to.be.greaterThan(DEFAULT_COLUMN_WIDTH * 3);
+        });
+
+        it("falls back to DEFAULT_COLUMN_WIDTH when query fails", async () => {
+            class MockDatabaseService extends DatabaseServiceNoop {
+                public query(): { promise: Promise<any> } {
+                    return {
+                        promise: Promise.reject(new Error("query error")),
+                    };
+                }
+            }
+            const annotationService = new DatabaseAnnotationService({
+                dataSourceNames: ["source1"],
+                databaseService: new MockDatabaseService(),
+            });
+
+            const result = await annotationService.fetchOptimalWidthForAnnotations(["SomeColumn"]);
+
+            expect(result["SomeColumn"]).to.equal(DEFAULT_COLUMN_WIDTH);
+        });
+
+        it("includes TOP_LEVEL_FILE_ANNOTATIONS with default widths when not in query results", async () => {
+            class MockDatabaseService extends DatabaseServiceNoop {
+                public query(): { promise: Promise<any> } {
+                    return {
+                        promise: Promise.resolve([{ CustomAnnotation: 15 }]),
+                    };
+                }
+            }
+            const annotationService = new DatabaseAnnotationService({
+                dataSourceNames: ["source1"],
+                databaseService: new MockDatabaseService(),
+            });
+
+            const result = await annotationService.fetchOptimalWidthForAnnotations([
+                "CustomAnnotation",
+            ]);
+
+            // All top-level file annotations should be present with default widths
+            for (const annotation of TOP_LEVEL_FILE_ANNOTATIONS) {
+                expect(result).to.have.property(annotation.name);
+                expect(result[annotation.name]).to.equal(DEFAULT_COLUMN_WIDTH);
+            }
+        });
+
+        it("returns default widths when dataSourceNames is empty", async () => {
+            const annotationService = new DatabaseAnnotationService({
+                dataSourceNames: [],
+                databaseService: new DatabaseServiceNoop(),
+            });
+
+            const result = await annotationService.fetchOptimalWidthForAnnotations(["SomeColumn"]);
+
+            // fetchLengthiestValues returns {} for empty data sources, so all should be default
+            expect(result["SomeColumn"]).to.equal(DEFAULT_COLUMN_WIDTH);
+        });
+
+        it("uses annotation name length when it is longer than the longest value", async () => {
+            // Annotation name "VeryLongAnnotationName" (22 chars) > longest value length (5)
+            class MockDatabaseService extends DatabaseServiceNoop {
+                public query(): { promise: Promise<any> } {
+                    return {
+                        promise: Promise.resolve([{ VeryLongAnnotationName: 5 }]),
+                    };
+                }
+            }
+            const annotationService = new DatabaseAnnotationService({
+                dataSourceNames: ["source1"],
+                databaseService: new MockDatabaseService(),
+            });
+
+            const resultShortValue = await annotationService.fetchOptimalWidthForAnnotations([
+                "VeryLongAnnotationName",
+            ]);
+
+            // Now test with a short annotation name but long value
+            class MockDatabaseService2 extends DatabaseServiceNoop {
+                public query(): { promise: Promise<any> } {
+                    return {
+                        promise: Promise.resolve([{ X: 5 }]),
+                    };
+                }
+            }
+            const annotationService2 = new DatabaseAnnotationService({
+                dataSourceNames: ["source1"],
+                databaseService: new MockDatabaseService2(),
+            });
+            const resultShortName = await annotationService2.fetchOptimalWidthForAnnotations(["X"]);
+
+            // The width for "VeryLongAnnotationName" should be wider because
+            // the annotation name is longer than the value
+            expect(resultShortValue["VeryLongAnnotationName"]).to.be.greaterThan(
+                resultShortName["X"]
+            );
+        });
+    });
 });

packages/core/services/AnnotationService/HttpAnnotationService/index.ts

@@ -7,6 +7,7 @@ import Annotation, { AnnotationResponse, AnnotationResponseMms } from "../../../
 import { AnnotationType, AnnotationTypeIdMap } from "../../../entity/AnnotationFormatter";
 import FileFilter from "../../../entity/FileFilter";
 import { TOP_LEVEL_FILE_ANNOTATIONS, TOP_LEVEL_FILE_ANNOTATION_NAMES } from "../../../constants";
+import { DEFAULT_COLUMN_WIDTH } from "../../../entity/SearchParams";
 
 enum QueryParam {
     EXCLUDE = "exclude",
@@ -154,6 +155,25 @@ export default class HttpAnnotationService extends HttpServiceBase implements An
         return [...TOP_LEVEL_FILE_ANNOTATION_NAMES, ...response.data, ...annotations];
     }
 
+    /**
+     * Fetch the lengthiest values for the specified annotations.
+     *
+     * **Not actually implemented** for this feature due to backend
+     * not having a way to fetch lengthiest values for annotations.
+     * Instead, we'll just return default widths for all annotations.
+     */
+    public async fetchOptimalWidthForAnnotations(
+        annotationNames: string[]
+    ): Promise<Record<string, number>> {
+        const widthByAnnotation: Record<string, number> = {};
+        for (const annotationName of annotationNames) {
+            if (!widthByAnnotation.hasOwnProperty(annotationName)) {
+                widthByAnnotation[annotationName] = DEFAULT_COLUMN_WIDTH;
+            }
+        }
+        return widthByAnnotation;
+    }
+
     /**
      * Validate annotation values according the type the annotation they belong to.
      */

packages/core/services/AnnotationService/index.ts

@@ -25,5 +25,9 @@ export default interface AnnotationService {
         filters: FileFilter[]
     ): Promise<string[]>;
     fetchAvailableAnnotationsForHierarchy(annotations: string[]): Promise<string[]>;
+    fetchOptimalWidthForAnnotations(
+        annotationNames: string[],
+        ignoreWidthLimit?: boolean
+    ): Promise<Record<string, number>>;
     validateAnnotationValues(name: string, values: AnnotationValue[]): Promise<boolean>;
 }