static cytobands...

This flattens out the search page.

src/components/searchForm/AggregatorSearchPanel.js

@@ -17,7 +17,6 @@ export default function AggregatorSearchPanel({
   parametersConfig,
   requestTypeConfig,
   requestTypeExamples,
-  cytoBands,
   collapsed
 }) {
   const [query, setQuery] = useState(null) // actual valid query
@@ -70,7 +69,6 @@ export default function AggregatorSearchPanel({
         }
       >
         <BiosamplesSearchForm
-          cytoBands={cytoBands}
           requestTypeConfig={requestTypeConfig}
           requestTypeExamples={requestTypeExamples}
           parametersConfig={parametersConfig}

src/components/searchForm/BiosamplesSearchForm.js

@@ -32,7 +32,6 @@ export const BiosamplesSearchForm = withUrlQuery(
 export default BiosamplesSearchForm
 
 BiosamplesSearchForm.propTypes = {
-  cytoBands: PropTypes.object.isRequired,
   isQuerying: PropTypes.bool.isRequired,
   setSearchQuery: PropTypes.func.isRequired,
   beaconQueryTypes: PropTypes.object.isRequired,
@@ -71,7 +70,6 @@ function useIsFilterlogicWarningVisible(watch) {
 }
 
 export function BeaconSearchForm({
-    cytoBands,
     isQuerying,
     setSearchQuery,
     beaconQueryTypes,
@@ -499,7 +497,7 @@ export function BeaconSearchForm({
               {...parameters.includeResultsetResponses}
             />
           </div>
-          <ChromosomePreview watch={watch} cytoBands={cytoBands} />
+          <ChromosomePreview watch={watch} />
           <div className="field mt-5">
             <div className="control">
               <button

src/components/searchForm/BiosamplesSearchPanel.js

@@ -17,7 +17,6 @@ export default function BiosamplesSearchPanel({
   parametersConfig,
   beaconQueryTypes,
   requestTypeExamples,
-  cytoBands,
   collapsed
 }) {
   const [query, setQuery] = useState(null) // actual valid query
@@ -67,7 +66,6 @@ export default function BiosamplesSearchPanel({
         }
       >
         <BiosamplesSearchForm
-          cytoBands={cytoBands}
           parametersConfig={parametersConfig}
           beaconQueryTypes={beaconQueryTypes}
           requestTypeExamples={requestTypeExamples}

src/components/searchForm/ChromosomePreview.js

@@ -1,9 +1,11 @@
 import { Chromosome, refseq2chro } from "../Chromosome"
+import { Cytobands } from "../Cytobands"
 import React, { useRef } from "react"
 import { useContainerDimensions } from "../../hooks/containerDimensions"
 
-export default function ChromosomePreview({ watch, cytoBands }) {
+export default function ChromosomePreview({ watch }) {
   const componentRef = useRef()
+  const cytoBands = Cytobands()
   const { width } = useContainerDimensions(componentRef)
   const startRange = watch("start")
   const endRange = watch("end")

src/pages/search.js

@@ -1,10 +1,19 @@
-import Page from "../components/SearchPage"
-import { getCytoBands } from "../utils/genome"
-export default Page
+import React from "react"
+import { Layout } from "../components/Layout"
+import BiosamplesSearchPanel from "../components/searchForm/BiosamplesSearchPanel"
+import parametersConfig from "../config/beaconSearchParameters.yaml"
+import beaconQueryTypes from  "../config/beaconQueryTypes.yaml"
+import requestTypeExamples from "../config/beaconSearchExamples.yaml"
 
-// This function gets called at build time on server-side.
-export const getStaticProps = async () => ({
-  props: {
-    cytoBands: await getCytoBands()
-  }
-})
+export default function Page() {
+  return (
+    <Layout title="Search Samples" headline="">
+      <BiosamplesSearchPanel
+        parametersConfig={parametersConfig}
+        beaconQueryTypes={beaconQueryTypes}
+        requestTypeExamples={requestTypeExamples}
+        collapsed={false}
+      />
+    </Layout>
+  )
+}

src/styles/components/Chromosome.scss

@@ -5,28 +5,27 @@
 }
 
 .stain--gpos100 {
-  fill: linear-gradient(to bottom, rgb(39,39,39), rgb(0,0,0) 70%, rgb(39,39,39));
-/*  fill: hsl(var(--hue), var(--sat), 15%);*/
+  fill: hsl(var(--hue), var(--sat), 15%);
 }
 .stain--gpos75 {
-/*  fill: hsl(var(--hue), var(--sat), 30%);*/
-  fill: linear-gradient(to bottom, rgb(255,87,87), rgb(39,39,39) 70%, rgb(87,87,87));
+  fill: hsl(var(--hue), var(--sat), 30%);
+/*  fill: linear-gradient(to bottom, rgb(255,87,87), rgb(39,39,39) 70%, rgb(87,87,87));*/
 }
 .stain--gpos66 {
-  fill: linear-gradient(to bottom, rgb(87,87,87), rgb(39,39,39) 70%, rgb(87,87,87));
-/*  fill: hsl(var(--hue), var(--sat), 40%);*/
+/*  fill: linear-gradient(to bottom, rgb(87,87,87), rgb(39,39,39) 70%, rgb(87,87,87));*/
+  fill: hsl(var(--hue), var(--sat), 40%);
 }
 .stain--gpos50 {
-/*  fill: hsl(var(--hue), var(--sat), 45%);*/
-  fill: linear-gradient(to bottom, rgb(196,196,196), rgb(111,111,111) 70%, rgb(196,196,196));
+  fill: hsl(var(--hue), var(--sat), 45%);
+/*  fill: linear-gradient(to bottom, rgb(196,196,196), rgb(111,111,111) 70%, rgb(196,196,196));*/
 }
 .stain--gpos33 {
-/*  fill: hsl(var(--hue), var(--sat), 50%);*/
-  fill: linear-gradient(to bottom, rgb(201,201,201), rgb(125,125,125) 70%, rgb(201,201,201));
+  fill: hsl(var(--hue), var(--sat), 50%);
+/*  fill: linear-gradient(to bottom, rgb(201,201,201), rgb(125,125,125) 70%, rgb(201,201,201));*/
 }
 .stain--gpos25 {
-/*  fill: hsl(var(--hue), var(--sat), 38%);*/
-  fill: linear-gradient(to bottom, rgb(223,223,223), rgb(196,196,196) 70%, rgb(223,223,223));
+  fill: hsl(var(--hue), var(--sat), 38%);
+/*  fill: linear-gradient(to bottom, rgb(223,223,223), rgb(196,196,196) 70%, rgb(223,223,223));*/
 }
 .stain--gvar {
   fill: hsl(var(--hue), var(--sat), 90%);
@@ -42,10 +41,10 @@
 }
 
 svg .selection {
-/*  fill: #ff9899;
+  fill: #ff9899;
   fill-opacity: 0.2;
   stroke: #ff9899;
-*/}
+}
 svg .selectionEnd {
   fill: #3298dc;
   fill-opacity: 0.2;