Skip to content

Commit

Permalink
#40, #41, #43 - add jbrowse circular (#184)
Browse files Browse the repository at this point in the history
  • Loading branch information
@samrichca
samrichca authored Sep 29, 2023
1 parent c9b5434 commit fa1420b
Show file tree
Hide file tree
Showing 15 changed files with 1,527 additions and 1,044 deletions.
66 changes: 32 additions & 34 deletions components/pages/explorer/ActionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,47 +22,45 @@
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 { RepositoryTabKeys, useRepositoryTabsContext } from './RepositoryTabsContext';

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 === RepositoryTabKeys.FILES && (
<ButtonWrapper>
<ColumnsSelectButton />
</ButtonWrapper>
)}
<ButtonWrapper>
<DownloadButton />
</ButtonWrapper>
</div>
</div>
);
};

export default ActionBar;
180 changes: 128 additions & 52 deletions components/pages/explorer/Jbrowse/JbrowseLaunchButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,65 +19,141 @@
*
*/

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 {
RepositoryTabKey,
RepositoryTabNames,
useRepositoryTabsContext,
} from '../RepositoryTabsContext';
import useJbrowseCompatibility from './useJbrowseCompatibility';
import { jbrowseDict, JbrowseTitle, 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();

const handleJbrowseSelect = (jbrowseOptionKey: RepositoryTabKey, closeDropDownFn: () => void) => {
const alternateJbrowseTab = find(openTabs, { name: RepositoryTabNames.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: RepositoryTabNames.GENOME_VIEWER,
key: jbrowseOptionKey,
canClose: true,
});
}
closeDropDownFn();
};

const dropdownTheme = getDropdownTheme(theme);

const handleJbrowseOption = (itemLabel: JbrowseTitle, closeDropDownFn: () => void) => {
const { tabKey } = find(jbrowseDict, { title: itemLabel }) || {};
tabKey && handleJbrowseSelect(tabKey, closeDropDownFn);
};

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>
);
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: JbrowseTitle, closeDropDownFn: () => void) => {
const error =
(itemLabel === JbrowseTitles.JBROWSE_LINEAR && jbrowseLinearError) ||
(itemLabel === JbrowseTitles.JBROWSE_LINEAR && 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={() => handleJbrowseOption(itemLabel, 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} />
) : (
RepositoryTabNames.GENOME_VIEWER
)}
</div>
</MultiSelectDropDown>
</div>
);
};

export default JbrowseLaunchButton;
Loading

0 comments on commit fa1420b

Please sign in to comment.