-feat: add open in chromoscope link button

-fix: typo
hms-dbmi · May 8, 2024 · 2c35c23 · 2c35c23
1 parent 49395f3
commit 2c35c23
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1084,7 +1084,30 @@ function App(props: RouteComponentProps) {
                             isMinimalMode ? (
                                 <div className="external-links">
                                     <nav className="external-links-nav">
-                                        <a className="open-in-chromoscope-link" href="">
+                                        <button
+                                            className="open-in-chromoscope-link"
+                                            tabIndex={0}
+                                            onClick={e => {
+                                                e.preventDefault();
+                                                const { xDomain } = gosRef.current.hgApi.api.getLocation(
+                                                    `${demo.id}-mid-ideogram`
+                                                );
+                                                if (xDomain) {
+                                                    // urlParams.set('demoIndex', demoIndex.current + '');
+                                                    // urlParams.set('domain', xDomain.join('-'));
+                                                    let newUrl =
+                                                        window.location.origin + window.location.pathname + '?';
+                                                    newUrl += `demoIndex=${demoIndex.current}`;
+                                                    newUrl += `&domain=${xDomain.join('-')}`;
+                                                    if (externalDemoUrl.current) {
+                                                        newUrl += `&external=${externalDemoUrl.current}`;
+                                                    } else if (externalUrl) {
+                                                        newUrl += `&external=${externalUrl}`;
+                                                    }
+                                                    window.open(newUrl, '_blank');
+                                                }
+                                            }}
+                                        >
                                             <div className="link-group">
                                                 <span>Open in Chromoscope</span>
                                                 <svg
@@ -1102,7 +1125,7 @@ function App(props: RouteComponentProps) {
                                                     />
                                                 </svg>
                                             </div>
-                                        </a>
+                                        </button>
                                         <div className="export-links">
                                             <ExportDropdown gosRef={gosRef} currentSpec={currentSpec} />
                                         </div>

diff --git a/src/ui/ExportDropdown.tsx b/src/ui/ExportDropdown.tsx
@@ -35,7 +35,7 @@ export const ExportDropdown = ({ gosRef, currentSpec }: ExportDropdownProps) =>
             <button className="export-button">
                 <span className="export-title">Export</span>
                 <svg className="button triangle-down" viewBox={ICONS.TRIANGLE_DOWN.viewBox}>
-                    <title>Triange Down</title>
+                    <title>Triangle Down</title>
                     {ICONS.TRIANGLE_DOWN.path.map(p => (
                         <path fill="currentColor" key={p} d={p} />
                     ))}