Add regulatory activity viewer (initial stages)

src/content/app/regulatory-activity-viewer/RegulatoryActivityViewer.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 noop from 'lodash/noop';
+
+import { StandardAppLayout } from 'src/shared/components/layout';
+import RegionOverview from './components/region-overview/RegionOverview';
+import RegionActivitySection from './components/region-activity-section/RegionActivitySection';
+import ActivityViewerSidebar from './components/activity-viewer-sidebar/ActivityViewerSidebar';
+
+const ActivityViewer = () => {
+  return (
+    <StandardAppLayout
+      mainContent={<MainContent />}
+      sidebarContent={<ActivityViewerSidebar />}
+      isSidebarOpen={true}
+      topbarContent={null}
+      sidebarNavigation={null}
+      onSidebarToggle={noop}
+      viewportWidth={1800}
+    />
+  );
+};
+
+const MainContent = () => {
+  return (
+    <div>
+      Hello activity viewer
+      <RegionOverview />
+      <div style={{ margin: '3rem 0' }} />
+      <RegionActivitySection />
+    </div>
+  );
+};
+
+export default ActivityViewer;

src/content/app/regulatory-activity-viewer/RegulatoryActivityViewerPage.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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 useHasMounted from 'src/shared/hooks/useHasMounted';
+
+const LazilyLoadedActivityViewer = React.lazy(
+  () => import('./RegulatoryActivityViewer')
+);
+
+const ActivityViewerPage = () => {
+  const hasMounted = useHasMounted();
+
+  return hasMounted ? <LazilyLoadedActivityViewer /> : null;
+};
+
+export default ActivityViewerPage;

src/content/app/regulatory-activity-viewer/components/activity-viewer-sidebar/ActivityViewerSidebar.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { useRegionOverviewQuery } from 'src/content/app/regulatory-activity-viewer/state/api/activityViewerApiSlice';
+
+import Sidebar from 'src/shared/components/layout/sidebar/Sidebar';
+import RegulatoryFeatureLegend from './regulatory-feature-legend/RegulatoryFeatureLegend';
+
+import type { OverviewRegion } from 'src/content/app/regulatory-activity-viewer/types/regionOverview';
+
+const ActivityViewerSidebar = () => {
+  const { currentData } = useRegionOverviewQuery();
+
+  if (!currentData) {
+    return null;
+  }
+
+  return (
+    <Sidebar>
+      <div>
+        <Genes genes={currentData.genes} />
+        <RegulatoryFeatureLegendSection
+          featureTypes={currentData.regulatory_features.feature_types}
+        />
+      </div>
+    </Sidebar>
+  );
+};
+
+const Genes = (props: { genes: OverviewRegion['genes'] }) => {
+  const genes = props.genes.map((gene) => (
+    <div key={gene.stable_id}>
+      {gene.symbol}
+      {'  '}
+      {gene.stable_id}
+    </div>
+  ));
+
+  // TODO: change this into an accordion
+  return (
+    <div>
+      <div style={{ fontWeight: 'bold' }}>Genes</div>
+      {genes}
+    </div>
+  );
+};
+
+const RegulatoryFeatureLegendSection = (props: {
+  featureTypes: OverviewRegion['regulatory_features']['feature_types'];
+}) => {
+  // TODO: change this into an accordion
+  return (
+    <div style={{ marginTop: '1.5rem' }}>
+      <div style={{ fontWeight: 'bold' }}>Regulatory features</div>
+      <RegulatoryFeatureLegend featureTypes={props.featureTypes} />
+    </div>
+  );
+};
+
+export default ActivityViewerSidebar;

src/content/app/regulatory-activity-viewer/components/activity-viewer-sidebar/regulatory-feature-legend/RegulatoryFeatureLegend.module.css

@@ -0,0 +1,19 @@
+.item {
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  align-items: baseline;
+}
+
+.colorKey {
+  width: 10px;
+  height: 10px;
+}
+
+.secondaryText {
+  font-size: 11px;
+  font-weight: var(--font-weight-light);
+}
+
+.label:has(.secondaryText) .primaryText {
+  margin-right: 0.6rem;
+}

src/content/app/regulatory-activity-viewer/components/activity-viewer-sidebar/regulatory-feature-legend/RegulatoryFeatureLegend.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 type { RegulatoryFeatureMetadata } from 'src/content/app/regulatory-activity-viewer/types/regionOverview';
+
+import styles from './RegulatoryFeatureLegend.module.css';
+
+type Props = {
+  featureTypes: Record<string, RegulatoryFeatureMetadata>;
+};
+
+const RegulatoryFeatureLegend = (props: Props) => {
+  return (
+    <div>
+      {Object.values(props.featureTypes).map((item) => (
+        <div className={styles.item} key={item.label}>
+          <span
+            className={styles.colorKey}
+            style={{ backgroundColor: item.color }}
+          />
+          <span className={styles.label}>
+            <span className={styles.primaryText}>{item.label}</span>
+            {item.description && (
+              <span className={styles.secondaryText}>{item.description}</span>
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default RegulatoryFeatureLegend;

src/content/app/regulatory-activity-viewer/components/region-activity-section/RegionActivitySection.module.css

@@ -0,0 +1,7 @@
+.section {
+  margin-top: 2rem;
+}
+
+.middleColumnImage {
+  width: 100%;
+}

src/content/app/regulatory-activity-viewer/components/region-activity-section/RegionActivitySection.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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 { useState, useEffect, useRef, useMemo } from 'react';
+import classNames from 'classnames';
+
+import prepareFeatureTracks from 'src/content/app/regulatory-activity-viewer/helpers/prepare-feature-tracks/prepareFeatureTracks';
+
+import { useRegionOverviewQuery } from 'src/content/app/regulatory-activity-viewer/state/api/activityViewerApiSlice';
+
+import RegionActivitySectionImage from './RegionActivitySectionImage';
+
+// FIXME: promote these styles to the top level of region activity viewer
+import regionOverviewStyles from '../region-overview/RegionOverview.module.css';
+import styles from './RegionActivitySection.module.css';
+
+/**
+ * TODO: the name of this component should probably change.
+ * It will contain the "magnified region image", but also
+ * the actual activity heatmap.
+ *
+ * TODO: This component will need to know the start and the end locations
+ * of the magnified segment. It will receive those either from the parent,
+ * or (more likely) from redux
+ */
+
+const RegionActivitySection = () => {
+  // TODO: think about how best to handle width changes; maybe they should come from the parent
+  const [width, setWidth] = useState(0);
+  const { currentData } = useRegionOverviewQuery();
+
+  const imageContainerRef = useRef<HTMLDivElement>(null);
+
+  // TODO: width should be recalculated on resize
+  // Consider if this is appropriate component for doing this.
+  useEffect(() => {
+    const imageContainer = imageContainerRef.current as HTMLDivElement;
+    const { width: imageContainerWidth } =
+      imageContainer.getBoundingClientRect();
+    setWidth(imageContainerWidth);
+  }, []);
+
+  const preparedData = useMemo(() => {
+    if (!currentData) {
+      return null;
+    }
+
+    // let's consider just a single contiguous slice without "boring" intervals
+    const location = currentData.locations[0];
+
+    // TODO: below are hard-coded start and end of the selected segment of the region.
+    // When the selection element is implemented, the selected start and end will come from user selection, probably via redux
+    // REMEMBER to add selectionStart and selectionEnd to the list of dependencies of useMemo, when they start coming from user selection
+    const locationLength = location.end - location.start + 1;
+    const selectedStart = location.start + Math.round(0.2 * locationLength);
+    const selectedEnd = location.start + Math.round(0.4 * locationLength);
+
+    const featureTracks = prepareFeatureTracks({
+      data: currentData,
+      start: selectedStart,
+      end: selectedEnd
+    });
+    return {
+      featureTracks,
+      start: selectedStart,
+      end: selectedEnd
+    };
+  }, [currentData]);
+
+  const componentClasses = classNames(
+    styles.section,
+    regionOverviewStyles.grid
+  );
+
+  return (
+    <div className={componentClasses}>
+      <div
+        className={regionOverviewStyles.middleColumn}
+        ref={imageContainerRef}
+      >
+        {currentData && preparedData && width && (
+          <RegionActivitySectionImage
+            width={width}
+            regionOverviewData={currentData}
+            featureTracks={preparedData.featureTracks}
+            start={preparedData.start}
+            end={preparedData.end}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RegionActivitySection;