NCITclinical re-creation & tree mods

src/components/Layout.js

@@ -112,7 +112,7 @@ function Side({ onClick }) {
         />
         <MenuInternalLinkItem
           href="/subsets/NCITclinical-subsets"
-          label="Clinical Categories"
+          label="TNM & Grade"
           isSub="isSub"
         />
         <MenuInternalLinkItem href="/search/" label="Search Samples" />

src/components/SubsetsHierarchyLoader.js

@@ -2,8 +2,7 @@ import { useCollationsByType, useCollationsById } from "../hooks/api"
 import { WithData } from "./Loader"
 import React from "react"
 import { keyBy, merge } from "lodash"
-import { SubsetHistogram } from "./SVGloaders"
-import { buildTree, buildTreeForDetails, TreePanel } from "./classificationTree/TreePanel"
+import { buildTree, TreePanel } from "./classificationTree/TreePanel"
 
 export default function SubsetsHierarchyLoader({ collationTypes, datasetIds, defaultTreeDepth }) {
   const bioSubsetsHierarchiesReply = useCollationsByType({
@@ -37,36 +36,19 @@ export default function SubsetsHierarchyLoader({ collationTypes, datasetIds, def
 }
 
 function SubsetsResponse({ bioSubsetsHierarchies, allBioSubsets, datasetIds, defaultTreeDepth }) {
-  const isDetailPage = bioSubsetsHierarchies.length === 1
   // We merge both subsets from hierarchies and subsets from allSubsets.
   // This is because some children in the bioSubsetsHierarchies don't have labels or sample count information.
   const subsetById = merge(keyBy(bioSubsetsHierarchies, "id"), allBioSubsets)
-  const { tree, size } = isDetailPage
-    ? buildTreeForDetails(bioSubsetsHierarchies, subsetById)
-    : buildTree(bioSubsetsHierarchies, subsetById)
+  const { tree, size } = buildTree(bioSubsetsHierarchies, subsetById)
 
   return (
-    <>
-      {isDetailPage && (
-        <div className="mb-3">
-          <SubsetHistogram
-            id={bioSubsetsHierarchies[0].id}
-            datasetIds={datasetIds}
-            loaderProps={{
-              background: true,
-              colored: true
-            }}
-          />
-        </div>
-      )}
-      <TreePanel
-        datasetIds={datasetIds}
-        subsetById={subsetById}
-        tree={tree}
-        size={size}
-        defaultTreeDepth={defaultTreeDepth}
-        sampleFilterScope="allTermsFilters"
-      />
-    </>
+    <TreePanel
+      datasetIds={datasetIds}
+      subsetById={subsetById}
+      tree={tree}
+      size={size}
+      defaultTreeDepth={defaultTreeDepth}
+      sampleFilterScope="allTermsFilters"
+    />
   )
 }

src/components/classificationTree/SubsetsTree.js

@@ -9,7 +9,7 @@ import useDebounce from "../../hooks/debounce"
 // import { min } from "lodash"
 import { filterNode } from "./tree"
 
-const ROW_HEIGHT = 30
+const ROW_HEIGHT = 28
 
 export function SubsetsTree({
   tree,
@@ -26,7 +26,7 @@ export function SubsetsTree({
     filteredTree,
     debouncedSearchInput
   } = useFilterTree(tree)
-  const [levelSelector, setLevelSelector] = useState(2)
+  const [levelSelector, setLevelSelector] = useState(3)
 
   // console.log(filteredTree)
 

src/components/classificationTree/TreePanel.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { SubsetsTree } from "./SubsetsTree"
 import { sortBy } from "lodash"
-import { getOrMakeChild, getOrMakeNode } from "./tree"
+import { getOrMakeNode } from "./tree"
 
 export function TreePanel({
   tree,
@@ -61,23 +61,5 @@ export function buildTree(response, subsetById) {
   return { tree, size }
 }
 
-export function buildTreeForDetails(response, subsetById) {
-  const rootSubset = response[0]
-  const tree = { id: "root", children: [], path: ["root"] }
-  let size = 1
-  const rootNode = getOrMakeChild(tree, rootSubset.id)
-  rootNode.subset = rootSubset
-  const childTerms = rootSubset.childTerms
-  childTerms.forEach((c) => {
-    // some subsets have themselves in the children list
-    if (rootSubset.code !== c) {
-      const node = getOrMakeChild(rootNode, c, randomStringGenerator)
-      node.subset = subsetById[node.id]
-      size++
-    }
-  })
-  return { tree, size }
-}
-
 // We generate random UID because a tree contains several nodes with the same ids
 const randomStringGenerator = () => Math.random().toString(36).substring(2, 15)

src/modules/data-pages/NCITclinical_SubsetsPage.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Layout } from "../../components/Layout"
+import SubsetsHierarchyLoader from  "../../components/SubsetsHierarchyLoader"
+
+export default function NCITclinical_SubsetsPage() {
+  return (
+    <Layout title="TNM and Grade Subsets" headline="Cancers by TNM and Clinical Grade (NCIT)">
+      <div className="content">
+        <p>
+          Where available cancer samples in Progenetix are mapped to with their
+          standard clinical and histological parameters such as TNM classification
+          or histological grade. 
+        </p>
+        <p>
+          For each of the classes, aggregated date is available by
+          clicking the code. Additionally, a selection of the corresponding
+          samples can be initiated by clicking the sample number or selecting
+          one or more classes through the checkboxes. Sample selection follows
+          a hierarchical system in which samples
+          matching the child terms of a selected class are included in the
+          response.
+        </p>
+      </div>
+      <SubsetsHierarchyLoader collationTypes="NCITtnm" datasetIds="progenetix" />
+      <SubsetsHierarchyLoader collationTypes="NCITgrade" datasetIds="progenetix" />
+      <SubsetsHierarchyLoader collationTypes="NCITstage" datasetIds="progenetix" />
+    </Layout>
+  )
+}

src/pages/subsets/NCITclinical-subsets.js

@@ -0,0 +1,2 @@
+import Page from "../../modules/data-pages/NCITclinical_SubsetsPage"
+export default Page