import Typography from "@material-ui/core/Typography"
import PanelWrapper from "components/panels/PanelWrapper"
import Layout from "components/layout/Layout"
import GoaPanel from "./Panels/GoaPanel"
import ReferencesPanel from './Panels/ReferencesPanel'
import { GeneQuery } from "dicty-graphql-schema"
import { useRouter } from "next/router"

interface SummaryContainerProps {
  gene: GeneQuery
}

const SummaryContainer = ({ gene }: SummaryContainerProps) => {
  const { query } = useRouter()
  const geneId = query.gene as string

  return (
    <Layout
      gene={geneId}
      title={`Gene Summary for ${geneId}`}
      description={`Gene information for ${geneId}`}>
      <Typography component="div">
        <PanelWrapper
          title="Latest Gene Ontology Annotations"
          route={`/gene/${geneId}/goannotations`}>
          <GoaPanel data={gene} />
        </PanelWrapper>
        <PanelWrapper
          title="Latest References"
          route={`/gene/${geneId}/references`}>
          <ReferencesPanel data={gene} />
        </PanelWrapper>
      </Typography>
    </Layout>
  )
}

export default SummaryContainer

import Typography from "@material-ui/core/Typography"
import PanelWrapper from "components/panels/PanelWrapper"
import Layout from "components/layout/Layout"
import GoaPanel from "./Panels/GoaPanel"
import { GeneQuery } from "dicty-graphql-schema"
import { useRouter } from "next/router"

interface SummaryContainerProps {
  gene: GeneQuery
}

const SummaryContainer = ({ gene }: SummaryContainerProps) => {
  const { query } = useRouter()
  const geneId = query.gene as string

  return (
    <Layout
      gene={geneId}
      title={`Gene Summary for ${geneId}`}
      description={`Gene information for ${geneId}`}>
      <Typography component="div">
        <PanelWrapper
          title="Latest Gene Ontology Annotations"
          route={`/gene/${geneId}/goannotations`}>
          <GoaPanel data={gene} />
        </PanelWrapper>
      </Typography>
    </Layout>
  )
}

export default SummaryContainer

--- 
+++ 
@@ -2,6 +2,7 @@
 import PanelWrapper from "components/panels/PanelWrapper"
 import Layout from "components/layout/Layout"
 import GoaPanel from "./Panels/GoaPanel"
+import ReferencesPanel from './Panels/ReferencesPanel'
 import { GeneQuery } from "dicty-graphql-schema"
 import { useRouter } from "next/router"
 
@@ -24,6 +25,11 @@
           route={`/gene/${geneId}/goannotations`}>
           <GoaPanel data={gene} />
         </PanelWrapper>
+        <PanelWrapper
+          title="Latest References"
+          route={`/gene/${geneId}/references`}>
+          <ReferencesPanel data={gene} />
+        </PanelWrapper>
       </Typography>
     </Layout>
   )
feat: Add Panel Wrapper for References Panel
