Add variant right hand panel overview content (#1075)

Ensembl · Jan 21, 2024 · d6ff91d · d6ff91d
1 parent daaea53
commit d6ff91d
Show file tree

Hide file tree

Showing 11 changed files with 411 additions and 11 deletions.
diff --git a/src/content/app/entity-viewer/EntityViewerForVariant.tsx b/src/content/app/entity-viewer/EntityViewerForVariant.tsx
@@ -30,6 +30,7 @@ import { StandardAppLayout } from 'src/shared/components/layout';
 import EntityViewerSidebarToolstrip from './shared/components/entity-viewer-sidebar/entity-viewer-sidebar-toolstrip/EntityViewerSidebarToolstrip';
 import EntityViewerSidebarModal from 'src/content/app/entity-viewer/shared/components/entity-viewer-sidebar/entity-viewer-sidebar-modal/EntityViewerSidebarModal';
 import VariantView from './variant-view/VariantView';
+import VariantViewSidebar from './variant-view/variant-view-sidebar/VariantViewSideBar';
 
 const EntityViewerForVariant = () => {
   const isSidebarOpen = useAppSelector(isEntityViewerSidebarOpen);
@@ -61,7 +62,7 @@ const SidebarContent = (props: { isSidebarModalOpen: boolean }) => {
   return props.isSidebarModalOpen ? (
     <EntityViewerSidebarModal />
   ) : (
-    <div>Variant information for sidebar goes here</div>
+    <VariantViewSidebar />
   );
 };
 

diff --git a/src/content/app/entity-viewer/variant-view/variant-view-sidebar/VariantViewSideBar.tsx b/src/content/app/entity-viewer/variant-view/variant-view-sidebar/VariantViewSideBar.tsx
@@ -0,0 +1,38 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { useAppSelector } from 'src/store';
+
+import Sidebar from 'src/shared/components/layout/sidebar/Sidebar';
+
+import { getEntityViewerSidebarTabName } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors';
+
+import { SidebarTabName } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
+import VariantOverview from './overview/VariantOverview';
+
+const VariantViewSidebar = () => {
+  const activeTabName = useAppSelector(getEntityViewerSidebarTabName);
+
+  return (
+    <Sidebar>
+      {activeTabName === SidebarTabName.OVERVIEW && <VariantOverview />}
+    </Sidebar>
+  );
+};
+
+export default VariantViewSidebar;
diff --git a/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/MainAccordion.tsx b/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/MainAccordion.tsx
@@ -0,0 +1,144 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'src/shared/components/accordion';
+
+import { getReferenceAndAltAlleles } from 'src/shared/helpers/variantHelpers';
+import { type EntityViewerVariantDefaultQueryResult } from 'src/content/app/entity-viewer/state/api/queries/variantDefaultQuery';
+
+import styles from './VariantOverview.module.css';
+
+export type AccordionSectionID = 'function' | 'other_data_sets';
+
+const MainAccordion = (props: EntityViewerVariantDefaultQueryResult) => {
+  const { variant } = props;
+  const disabledAccordionButtonClass = classNames(
+    styles.entityViewerAccordionButton,
+    {
+      [styles.entityViewerAccordionButtonDisabled]: true
+    }
+  );
+
+  return (
+    <div className={styles.accordionContainer}>
+      <Accordion
+        className={styles.entityViewerAccordion}
+        allowMultipleExpanded={true}
+        preExpanded={['alleles']}
+      >
+        <AccordionItem
+          className={styles.entityViewerAccordionItem}
+          uuid={'alleles'}
+        >
+          <AccordionItemHeading className={styles.entityViewerAccordionHeader}>
+            <AccordionItemButton className={styles.entityViewerAccordionButton}>
+              Alleles
+            </AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel
+            className={styles.entityViewerAccordionItemContent}
+          >
+            <Alleles alleles={variant.alleles} />
+          </AccordionItemPanel>
+        </AccordionItem>
+
+        <AccordionItem
+          className={styles.entityViewerAccordionItem}
+          uuid={'in_this_region'}
+        >
+          <AccordionItemHeading className={styles.entityViewerAccordionHeader}>
+            <AccordionItemButton
+              className={disabledAccordionButtonClass}
+              disabled={true}
+            >
+              In this region
+            </AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel
+            className={styles.entityViewerAccordionItemContent}
+          >
+            <div>No data available</div>
+          </AccordionItemPanel>
+        </AccordionItem>
+
+        <AccordionItem
+          className={styles.entityViewerAccordionItem}
+          uuid={'other_data_sets'}
+        >
+          <AccordionItemHeading className={styles.entityViewerAccordionHeader}>
+            <AccordionItemButton
+              className={disabledAccordionButtonClass}
+              disabled={true}
+            >
+              Synonyms
+            </AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel
+            className={styles.entityViewerAccordionItemContent}
+          >
+            <div>No data available</div>
+          </AccordionItemPanel>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
+type AlleleProps = {
+  alleles: {
+    allele_sequence: string;
+    reference_sequence: string;
+    allele_type: {
+      value: string;
+    };
+  }[];
+};
+const Alleles = (props: AlleleProps) => {
+  const { referenceAllele, alternativeAlleles } = getReferenceAndAltAlleles(
+    props.alleles
+  );
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <div className={styles.label}>Ref</div>
+        <div className={styles.value}>
+          {referenceAllele?.reference_sequence}
+        </div>
+      </div>
+      <div className={styles.row}>
+        <div className={styles.label}>Alt</div>
+        <div className={styles.value}>
+          {alternativeAlleles.map((allele, index) => (
+            <div key={index} className={styles.alleleSequence}>
+              {allele.allele_sequence}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MainAccordion;
diff --git a/...t/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.module.css b/...t/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.module.css
@@ -0,0 +1,90 @@
+.overviewContainer {
+  font-size: 13px;
+}
+
+.defaultContent {
+  margin: 15px;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+}
+
+.newRowGroup {
+  margin-top: 16px;
+}
+
+.label {
+  line-height: 1.2;
+  font-weight: var(--font-weight-light);
+  text-align: right;
+  font-size: 12px;
+  margin-right: 10px;
+}
+
+.externalLink {
+  padding-top: 8px;
+}
+
+.labelText {
+  font-size: 13px;
+  font-weight: var(--font-weight-light);
+  line-height: 1.5;
+}
+
+.variantType {
+  font-size: 12px;
+  font-weight: var(--font-weight-light);
+  margin-left: 0.6rem;
+}
+
+.labelTextStrong {
+  font-size: 12px;
+  font-weight: var(--font-weight-bold);
+}
+
+.alleleSequence {
+  max-width: 18ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+
+/* NOTE: the styles below require the extra specificity in order to overwrite Accordion styles
+  We should update the Accordion to use CSS variables.
+*/
+.accordionContainer .entityViewerAccordion {
+  border: none;
+}
+
+.entityViewerAccordion .entityViewerAccordionHeader {
+  background-color: var(--color-light-grey);
+  border-radius: 5px;
+}
+
+.entityViewerAccordion .entityViewerAccordionButton {
+  color: var(--color-blue);
+  padding: 5px 15px;
+  border-radius: 5px;
+}
+
+.entityViewerAccordion .entityViewerAccordionButton::before,
+.entityViewerAccordion .entityViewerAccordionButton::after {
+  margin-top: -3px;
+}
+
+.entityViewerAccordion .entityViewerAccordionButtonDisabled {
+  color: var(--color-grey);
+}
+
+.entityViewerAccordion .entityViewerAccordionItem:not(:first-child) {
+  border-color: transparent;
+}
+
+.entityViewerAccordionItemContent {
+  background-color: transparent;
+  border: none;
+  padding: 15px;
+}