@weng-lab/genomebrowser-ui 0.1.1

package/dist/TrackSelect/DataGrid/CustomToolbar.d.ts

@@ -0,0 +1,12 @@
+import { GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid-premium';
+import { DataGridProps } from '../types';
+type CustomToolbarProps = {
+    label: DataGridProps["label"];
+    downloadFileName: DataGridProps["downloadFileName"];
+    labelTooltip: DataGridProps["labelTooltip"];
+    toolbarSlot?: DataGridProps["toolbarSlot"];
+    toolbarStyle?: DataGridProps["toolbarStyle"];
+    toolbarIconColor?: DataGridProps["toolbarIconColor"];
+} & GridToolbarProps & ToolbarPropsOverrides;
+export declare function CustomToolbar({ label, downloadFileName, labelTooltip, toolbarSlot, toolbarStyle, toolbarIconColor, ...restToolbarProps }: CustomToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TrackSelect/DataGrid/DataGridWrapper.d.ts

@@ -0,0 +1,2 @@
+import { DataGridProps } from '../types';
+export declare function DataGridWrapper(props: DataGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/DataGrid/columns.d.ts

@@ -0,0 +1,4 @@
+import { GridColDef } from '@mui/x-data-grid-premium';
+import { RowInfo } from '../types';
+export declare const sortedByAssayColumns: GridColDef<RowInfo>[];
+export declare const defaultColumns: GridColDef<RowInfo>[];

package/dist/TrackSelect/DataGrid/dataGridHelpers.d.ts

@@ -0,0 +1,30 @@
+import { FuseResult } from 'fuse.js';
+import { RowInfo, SearchTracksProps, TrackInfo } from '../types';
+export declare function getTracksByAssayAndOntology(assay: string, ontology: string): TrackInfo[];
+/** Flatten TrackInfo or FuseResult into RowInfo for DataGrid display.
+ * @param track TrackInfo object or FuseResult containing information from JSON file
+ * @returns Flattened RowInfo object
+ */
+export declare function flattenIntoRow(track: TrackInfo): RowInfo;
+/**
+ * Fuzzy search in tracks stored in a JSON file.
+ *
+ * @param jsonStructure - Dot-separated path to the data array in the JSON structure.
+ * @param query - The search query string.
+ * @param keyWeightMap - Array of keys to search within each track object.
+ * Can look like ["name", "author"] or if weighted, [
+    {
+      name: 'title',
+      weight: 0.3
+    },
+    {
+      name: 'author',
+      weight: 0.7
+    }
+  ].
+ * @param threshold - (Optional) Threshold for the fuzzy search (default is 0.5).
+ *                    Smaller = stricter match, larger = fuzzier since 0 is perfect match and 1 is worst match.
+ * @param limit - (Optional) Maximum number of results to return (default is 10).
+ * @returns FuseResult object containing the search results.
+ */
+export declare function searchTracks({ jsonStructure, query, keyWeightMap, threshold, }: SearchTracksProps): FuseResult<TrackInfo>[];

package/dist/TrackSelect/TrackSelect.d.ts

@@ -0,0 +1,5 @@
+import { SelectionStoreInstance } from './store';
+export interface TrackSelectProps {
+    store: SelectionStoreInstance;
+}
+export default function TrackSelect({ store }: TrackSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/TreeView/TreeViewWrapper.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewWrapperProps } from '../types';
+export declare function TreeViewWrapper({ store, items, activeTracks, isSearchResult, }: TreeViewWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/TreeView/treeViewHelpers.d.ts

@@ -0,0 +1,49 @@
+import { TreeViewBaseItem } from '@mui/x-tree-view';
+import { default as React } from 'react';
+import { CustomTreeItemProps, ExtendedTreeItemProps, RowInfo, SearchTracksProps } from '../types';
+import { FuseResult } from 'fuse.js';
+/**
+ * Builds tree in the sorted by assay view
+ * @param selectedIds: list of ids (from useSelectionStore)
+ * @param root: Root TreeViewBaseItem
+ * @param rowById: Mapping between an id (experimentAccession) and its RowInfo object
+ * @returns all of the items for the RichTreeView in TreeViewWrapper
+ */
+export declare function buildSortedAssayTreeView(selectedIds: string[], root: TreeViewBaseItem<ExtendedTreeItemProps>, rowById: Map<string, RowInfo>): TreeViewBaseItem<ExtendedTreeItemProps>[];
+/**
+ * Builds tree in the sorted by assay view
+ * @param selectedIds: list of ids (from useSelectionStore)
+ * @param root: Root TreeViewBaseItem
+ * @param rowById: Mapping between an id (experimentAccession) and its RowInfo object
+ * @returns all of the items for the RichTreeView in TreeViewWrapper
+ */
+export declare function buildTreeView(selectedIds: string[], root: TreeViewBaseItem<ExtendedTreeItemProps>, rowById: Map<string, RowInfo>): TreeViewBaseItem<ExtendedTreeItemProps>[];
+/**
+ * Fuzzy search of active tracks.
+ *
+ * @param treeItems - TreeBaseViewItems from the tree.
+ * @param query - The search query string.
+ * @param keyWeightMap - Array of keys to search within each track object.
+ * Can look like ["name", "author"] or if weighted, [
+    {
+      name: 'title',
+      weight: 0.3
+    },
+    {
+      name: 'author',
+      weight: 0.7
+    }
+  ].
+ * @param threshold - (Optional) Threshold for the fuzzy search (default is 0.5).
+ *                    Smaller = stricter match, larger = fuzzier since 0 is perfect match and 1 is worst match.
+ * @param limit - (Optional) Maximum number of results to return (default is 10).
+ * @returns FuseResult object containing the search results.
+ */
+export declare function searchTreeItems({ treeItems, query, keyWeightMap, threshold, limit }: SearchTracksProps): FuseResult<RowInfo>[];
+/**
+ * Creates the assay icon for DataGrid and RichTreeView
+ * @param type: assay type
+ * @returns an icon of the assay's respective color
+ */
+export declare function AssayIcon(type: string): import("react/jsx-runtime").JSX.Element;
+export declare const CustomTreeItem: React.ForwardRefExoticComponent<CustomTreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/TrackSelect/consts.d.ts

@@ -0,0 +1,21 @@
+import { RowInfo } from './types';
+export declare const assayTypes: string[];
+export declare const ontologyTypes: string[];
+export declare const rows: {
+    assay: string;
+    ontology: string;
+    lifeStage: string;
+    sampleType: string;
+    displayname: string;
+    experimentAccession: string;
+    fileAccession: string;
+}[];
+export declare const rowById: Map<string, RowInfo>;
+/**
+ * Check if an ID is a real track (exists in rowById) vs an auto-generated group ID
+ */
+export declare const isTrackId: (id: string) => boolean;
+/**
+ * Filter a set of IDs to return only real track IDs (no auto-generated group IDs)
+ */
+export declare const getActiveTracks: (selectedIds: Set<string>) => Set<string>;

package/dist/TrackSelect/store.d.ts

@@ -0,0 +1,4 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { SelectionState, SelectionAction } from './types';
+export type SelectionStoreInstance = UseBoundStore<StoreApi<SelectionState & SelectionAction>>;
+export declare function createSelectionStore(): UseBoundStore<StoreApi<SelectionState & SelectionAction>>;

package/dist/TrackSelect/types.d.ts

@@ -0,0 +1,123 @@
+import { FuseOptionKey } from 'fuse.js';
+import { UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
+import { TreeViewBaseItem } from '@mui/x-tree-view';
+import { DataGridPremiumProps, GridRowSelectionModel } from '@mui/x-data-grid-premium';
+import { ReactElement, ReactNode } from 'react';
+import { SvgIconOwnProps } from '@mui/material';
+import { SelectionStoreInstance } from './store';
+export interface SearchTracksProps {
+    query: string;
+    keyWeightMap: FuseOptionKey<any>[];
+    jsonStructure?: string;
+    treeItems?: TreeViewBaseItem<ExtendedTreeItemProps>[];
+    threshold?: number;
+    limit?: number;
+}
+/**
+ * Types for the JSON-formatted tracks fomr modifiedHumanTracks.json
+ */
+export type AssayInfo = {
+    assay: string;
+    url: string;
+    experimentAccession: string;
+    fileAccession: string;
+};
+export type TrackInfo = {
+    name: string;
+    ontology: string;
+    lifeStage: string;
+    sampleType: string;
+    displayname: string;
+    assays: AssayInfo[];
+};
+/**
+ *  Row format for DataGrid
+ */
+export type RowInfo = {
+    ontology: string;
+    lifeStage: string;
+    sampleType: string;
+    displayname: string;
+    assay: string;
+    experimentAccession: string;
+    fileAccession: string;
+};
+/**
+ * Custom Tree Props for RichTreeView Panel
+ */
+export type ExtendedTreeItemProps = {
+    id: string;
+    label: string;
+    icon: string;
+    isAssayItem?: boolean;
+    /**
+     * list of all the experimentAccession values in the children/grandchildren of the item, or the accession of the item itself
+     * this is used in updating the rowSelectionModel when removing items from the Tree View panel
+     */
+    allExpAccessions?: string[];
+    allRowInfo?: RowInfo[];
+};
+export type TreeViewWrapperProps = {
+    store: SelectionStoreInstance;
+    items: TreeViewBaseItem<ExtendedTreeItemProps>[];
+    selectedIds: Set<string>;
+    activeTracks: Set<string>;
+    isSearchResult: boolean;
+};
+export interface CustomLabelProps {
+    id: string;
+    children: React.ReactNode;
+    isAssayItem?: boolean;
+    icon: React.ElementType | React.ReactElement;
+}
+export interface CustomTreeItemProps extends Omit<UseTreeItemParameters, "rootRef">, Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
+    onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+}
+/**
+ * Types for useSelectionStore to keep track of selected DataGrid row ids/tracks
+ */
+export type SelectionState = {
+    maxTracks: number;
+    selectedIds: Set<string>;
+};
+export type SelectionAction = {
+    setSelected: (ids: Set<string>) => void;
+    removeIds: (removedIds: Set<string>) => void;
+    clear: () => void;
+};
+/**
+ * DataGrid Props
+ */
+interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
+    toolbarSlot?: ReactNode;
+    /**
+     * If anything besides an element, renders tooltip icon to the right of the table label with specified string as tooltip contents.
+     * If an element, renders the element to the right of the table label.
+     */
+    labelTooltip?: ReactNode;
+    /**
+     * Styling object for the toolbar
+     */
+    toolbarStyle?: React.CSSProperties;
+    /**
+     * Color passed as `htmlColor` to columns, filter, download and search icons
+     */
+    toolbarIconColor?: SvgIconOwnProps["htmlColor"];
+}
+type DataGridWrapperProps = {
+    rows: RowInfo[];
+    selectedIds: Set<string>;
+    handleSelection: (newSelection: GridRowSelectionModel) => void;
+    sortedAssay: boolean;
+};
+export type DataGridProps = DataGridWrapperProps & BaseTableProps & ({
+    label?: string;
+    downloadFileName?: string;
+} | {
+    label: ReactElement;
+    downloadFileName: string;
+} | {
+    label?: undefined;
+    downloadFileName?: string;
+});
+export {};