feat(summary): SJIP-1093 add co-occuring conditions graph

package.json

@@ -86,6 +86,7 @@
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@upsetjs/react": "^1.11.0",
     "antd": "^4.24.16",
     "antd-img-crop": "^4.23.0",
     "axios": "^0.24.0",

src/locales/en.ts

@@ -1270,6 +1270,10 @@ const en = {
             mostFrequentPhenotypes: 'Most Frequent Phenotypes (HPO)',
             mostFrequentDiagnoses: 'Most Frequent Diagnoses (MONDO)',
           },
+          coOccuringConditions: {
+            title: 'Co-occurring Conditions',
+            label: '# of participants',
+          },
           sampleType: {
             cardTitle: 'Sample Type',
           },

src/views/DataExploration/components/PageContent/tabs/Summary/CoOccuringConditions/index.module.css

@@ -0,0 +1,44 @@
+.wrapper {
+  height: 100%;
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+.wrapper .content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+:global([class^="root-upset-"] text[class^="setTextStyle-upset"])  {
+  font-size: 12px;
+  width: 10px;
+}
+
+:global([class^="root-upset-"] text[class^="hoverBarTextStyle-upset"])  {
+  fill: var(--gray-7);
+}
+
+:global([class^="root-upset-"] [class^="interactive-upset"]):hover > [class^="hoverBar-upset"] {
+  stroke: var(--gray-7);
+}  
+
+:global([class^="root-upset-"] [class^="upsetLine-upset"]),
+:global([class^="root-upset-"] [class^="upsetSelectionLine-upset"]),
+:global([class^="root-upset-"] [class^="fillPrimary-upset"])  {
+  fill: var(--blue-7);
+  stroke: var(--blue-7); 
+}
+
+:global([class^="root-upset-"] [class^="fillSelection-upset"])  {
+  fill: var(--gold-6);
+}
+
+:global([class^="root-upset-"] [class^="fillAlternating-upset"])  {
+  fill: var(--gray-4);
+}
+
+:global([class^="root-upset-"] [class^="fillNotMember-upset"])  {
+  fill: var(--gray-5);
+}

src/views/DataExploration/components/PageContent/tabs/Summary/CoOccuringConditions/index.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import intl from 'react-intl-universal';
+import ResizableGridCard from '@ferlab/ui/core/layout/ResizableGridLayout/ResizableGridCard';
+import { extractCombinations, ISetLike, UpSetJS } from '@upsetjs/react';
+
+import { getResizableGridDictionary } from 'utils/translation';
+
+import { UID } from '../utils/grid';
+
+import mock from './mock';
+
+import styles from './index.module.css';
+
+// https://upset.js.org/api/model/modules.html
+const CoOccuringConditionsGraphCard = () => {
+  const ref = useRef<any>(null);
+  const [width, setWidth] = useState<number>(100);
+  const [height, setHeight] = useState<number>(100);
+  const [selection, setSelection] = useState<ISetLike<unknown> | null>(null);
+
+  const data = mock
+    .map((m) => {
+      const combination = m.Combination.split(', ');
+      return {
+        name: m.Combination,
+        sets: combination,
+      };
+    })
+    .filter((m) => m.sets.length > 1);
+
+  const { sets, combinations } = useMemo(
+    () =>
+      extractCombinations(data, {
+        setLimit: 8,
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      setWidth(entries[0].contentRect.width);
+      setHeight(entries[0].contentRect.height);
+    });
+    observer.observe(ref.current);
+    return () => ref.current && observer.unobserve(ref.current);
+  }, []);
+
+  useEffect(() => {
+    const elements = document.querySelectorAll(
+      '[class^="root-upset-"] text[class^="setTextStyle-upset"]',
+    );
+    elements.forEach((element: any) => {
+      element.textContent = element.textContent.substring(0, 28) + '…';
+    });
+  }, []);
+
+  return (
+    <ResizableGridCard
+      gridUID={UID}
+      id="co-occurring-conditions"
+      theme="shade"
+      loading={false}
+      loadingType="spinner"
+      dictionary={getResizableGridDictionary()}
+      headerTitle={intl.get('screen.dataExploration.tabs.summary.coOccuringConditions.title')}
+      content={
+        <div className={styles.wrapper}>
+          <div ref={ref} className={styles.content}>
+            <UpSetJS
+              setLabelAlignment={'left'}
+              sets={sets}
+              setName={intl.get('screen.dataExploration.tabs.summary.coOccuringConditions.label')}
+              combinationName={intl.get(
+                'screen.dataExploration.tabs.summary.coOccuringConditions.label',
+              )}
+              exportButtons={false}
+              selection={selection}
+              combinations={combinations}
+              emptySelection={false}
+              width={width}
+              height={height}
+              onHover={(s) => setSelection(s)}
+            />
+          </div>
+        </div>
+      }
+    />
+  );
+};
+
+export default CoOccuringConditionsGraphCard;