#40, #41, #43 - add jbrowse circular

components/pages/explorer/ActionBar.tsx

@@ -22,47 +22,46 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ColumnsSelectButton, DownloadButton } from '@overture-stack/arranger-components';
-import { useTabsContext } from './TabsContext';
-import { RepositoryTabNames } from './RepositoryContent';
 import JbrowseLaunchButton from './Jbrowse/JbrowseLaunchButton';
+import { useRepositoryTabsContext } from './RepositoryTabsContext';
+import { RepositoryTabKey } from './types';
 
 export const ButtonWrapper = styled('div')`
-  margin-left: 0.3rem;
-  margin-bottom: 0.3rem;
+	margin-left: 0.3rem;
+	margin-bottom: 0.3rem;
 `;
 
 const ActionBar = () => {
-  const { activeTab } = useTabsContext();
+	const { activeTab } = useRepositoryTabsContext();
 
-  return (
-    <div
-      className="buttons"
-      css={css`
-        display: flex;
-        list-style: none;
-        margin: 0 0 0 -0.3rem;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0;
-      `}
-    >
-      <JbrowseLaunchButton />
-      <div
-        css={css`
-          display: flex;
-        `}
-      >
-        {activeTab === RepositoryTabNames.FILES && (
-          <ButtonWrapper>
-            <ColumnsSelectButton />
-          </ButtonWrapper>
-        )}
-        <ButtonWrapper>
-          <DownloadButton />
-        </ButtonWrapper>
-      </div>
-    </div>
-  );
+	return (
+		<div
+			className="buttons"
+			css={css`
+				display: flex;
+				list-style: none;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0;
+			`}
+		>
+			<JbrowseLaunchButton />
+			<div
+				css={css`
+					display: flex;
+				`}
+			>
+				{activeTab === RepositoryTabKey.FILES && (
+					<ButtonWrapper>
+						<ColumnsSelectButton />
+					</ButtonWrapper>
+				)}
+				<ButtonWrapper>
+					<DownloadButton />
+				</ButtonWrapper>
+			</div>
+		</div>
+	);
 };
 
 export default ActionBar;

components/pages/explorer/Jbrowse/JbrowseLaunchButton.tsx

@@ -19,65 +19,131 @@
  *
  */
 
-import Button from '@/components/Button';
+import { getDropdownTheme } from '@/components/theme/getDropdownTheme';
+import { Spinner } from '@/components/theme/icons';
 import { CustomTooltip } from '@/components/Tooltip';
 import { css, useTheme } from '@emotion/react';
+import { TransparentButton } from '@overture-stack/arranger-components/dist/Button';
+import { MultiSelectDropDown } from '@overture-stack/arranger-components/dist/DropDown';
 import { find } from 'lodash';
-import { ButtonWrapper } from '../ActionBar';
-import { RepositoryTabNames } from '../RepositoryContent';
-import { useTabsContext } from '../TabsContext';
+import { useRepositoryTabsContext } from '../RepositoryTabsContext';
+import { RepositoryTabKey, RepositoryTabName } from '../types';
 import useJbrowseCompatibility from './useJbrowseCompatibility';
+import { jbrowseDict, JbrowseTitles } from './utils';
 
 const JbrowseLaunchButton = () => {
-  const theme = useTheme();
-  const { handleChangeTab, handleOpenTab, openTabs } = useTabsContext();
-  const { jbrowseEnabled, jbrowseErrorText, jbrowseLoading } = useJbrowseCompatibility();
+	const theme = useTheme();
+	const { handleSwitchTab, handleUpdateTab, handleOpenTab, openTabs } = useRepositoryTabsContext();
+	const { jbrowseCircularError, jbrowseLinearError, jbrowseLoading } = useJbrowseCompatibility();
 
-  return (
-    <CustomTooltip
-      disabled={jbrowseEnabled}
-      unmountHTMLWhenHide
-      arrow
-      html={
-        <div
-          css={css`
-            ${theme.typography.regular};
-            font-size: 12px;
-          `}
-        >
-          {jbrowseErrorText}
-        </div>
-      }
-      position="right"
-    >
-      <ButtonWrapper>
-        <Button
-          isLoading={jbrowseLoading}
-          css={css`
-            padding: 2px 10px;
-          `}
-          disabled={!jbrowseEnabled}
-          onClick={() => {
-            // go to jbrowse tab if open, otherwise add jbrowse tab
-            if (find(openTabs, { name: RepositoryTabNames.GENOME_VIEWER })) {
-              handleChangeTab(RepositoryTabNames.GENOME_VIEWER);
-            } else {
-              handleOpenTab({ name: RepositoryTabNames.GENOME_VIEWER, canClose: true });
-            }
-          }}
-        >
-          <div
-            css={css`
-              display: flex;
-              align-items: center;
-            `}
-          >
-            <span>{RepositoryTabNames.GENOME_VIEWER}</span>
-          </div>
-        </Button>
-      </ButtonWrapper>
-    </CustomTooltip>
-  );
+	const handleJbrowseSelect = (jbrowseOptionKey: RepositoryTabKey, closeDropDownFn: () => void) => {
+		const alternateJbrowseTab = find(openTabs, { name: RepositoryTabName.GENOME_VIEWER });
+		if (find(openTabs, { key: jbrowseOptionKey })) {
+			// if selected option has a tab open, go to that tab
+			handleSwitchTab(jbrowseOptionKey);
+		} else if (alternateJbrowseTab) {
+			// update existing jbrowse tab if available - only 1 jbrowse tab open at a time
+			handleUpdateTab(alternateJbrowseTab.key, { key: jbrowseOptionKey });
+			handleSwitchTab(jbrowseOptionKey);
+		} else {
+			handleOpenTab({
+				name: RepositoryTabName.GENOME_VIEWER,
+				key: jbrowseOptionKey,
+				canClose: true,
+			});
+		}
+		closeDropDownFn();
+	};
+
+	const dropdownTheme = getDropdownTheme(theme);
+
+	return (
+		<div
+			css={css`
+				.genome-viewer-dropdown * {
+					// stops scrollbar on dropdown
+					// positions tooltip properly
+					overflow: hidden !important;
+				}
+			`}
+		>
+			<MultiSelectDropDown
+				theme={{
+					...dropdownTheme,
+					width: '140px',
+					height: '30px',
+					ListWrapper: {
+						...dropdownTheme.ListWrapper,
+						css: css`
+							left: -2px;
+							right: auto;
+							width: 7em;
+						`,
+					},
+				}}
+				buttonAriaLabelClosed="Open Genome Viewer menu"
+				buttonAriaLabelOpen="Close Genome Viewer menu"
+				className="genome-viewer-dropdown"
+				itemSelectionLegend="Select one of the genome viewer options"
+				items={jbrowseDict.map(({ title }) => title)}
+				itemToString={(itemLabel: JbrowseTitles, closeDropDownFn) => {
+					const error =
+						(itemLabel === 'Linear View' && jbrowseLinearError) ||
+						(itemLabel === 'Circular View' && jbrowseCircularError);
+					return (
+						<CustomTooltip
+							css={css`
+								width: 100%;
+								button {
+									width: 100%;
+								}
+							`}
+							arrow
+							disabled={!error}
+							unmountHTMLWhenHide
+							html={
+								<div
+									css={css`
+										${theme.typography.regular};
+										font-size: 12px;
+									`}
+								>
+									{error}
+								</div>
+							}
+							position="left"
+						>
+							<TransparentButton
+								onClick={() => {
+									const { tabKey } = find(jbrowseDict, { title: itemLabel }) || {};
+									tabKey && handleJbrowseSelect(tabKey, closeDropDownFn);
+								}}
+								disabled={jbrowseLoading || !!error}
+								css={css`
+									:disabled {
+										color: ${theme.colors.grey_4};
+									}
+								`}
+							>
+								{itemLabel}
+							</TransparentButton>
+						</CustomTooltip>
+					);
+				}}
+			>
+				<div
+					css={css`
+						width: 105px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					`}
+				>
+					{jbrowseLoading ? <Spinner fill={theme.colors.white} /> : RepositoryTabName.GENOME_VIEWER}
+				</div>
+			</MultiSelectDropDown>
+		</div>
+	);
 };
 
 export default JbrowseLaunchButton;