Vega Charts (new Charting Library)

package.json

@@ -53,10 +53,14 @@
     "react-toastify": "^9.1.2",
     "react-twitter-embed": "4.0.4",
     "react-use": "^17.4.0",
+    "react-vega": "^7.6.0",
     "ro-crate": "^3.2.1",
     "textarea-sequence": "3.5.1",
     "universal-cookie": "4.0.4",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vega": "^5.25.0",
+    "vega-embed": "^6.22.1",
+    "vega-lite": "^5.13.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.9.12",

src/components/Analysis/Functional/GO/BarChart.tsx

@@ -23,6 +23,17 @@ const GOBarChart: React.FC<GOBarChartProps> = ({
   color,
   containerId,
 }) => {
+  // Sort the data in descending order based on the series values
+  const sortedData = series
+    .map((value, index) => ({
+      category: categories[index],
+      value,
+    }))
+    .sort((a, b) => b.value - a.value); // Sort in descending order
+
+  const sortedCategories = sortedData.map((data) => data.category);
+  const sortedSeries = sortedData.map((data) => data.value);
+
   const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
   const options: Record<string, unknown> = {
     chart: {
@@ -44,7 +55,7 @@ const GOBarChart: React.FC<GOBarChartProps> = ({
       },
     },
     xAxis: {
-      categories,
+      categories: sortedCategories,
     },
     plotOptions: {
       series: {
@@ -68,7 +79,7 @@ const GOBarChart: React.FC<GOBarChartProps> = ({
     series: [
       {
         name: 'annotations',
-        data: series,
+        data: sortedSeries,
         color,
       },
     ],
@@ -82,4 +93,5 @@ const GOBarChart: React.FC<GOBarChartProps> = ({
     />
   );
 };
+
 export default GOBarChart;

src/components/Analysis/Functional/GO/index.tsx

@@ -7,6 +7,7 @@ import FetchError from 'components/UI/FetchError';
 import { MGnifyDatum } from 'hooks/data/useData';
 import { TAXONOMY_COLOURS } from 'utils/taxon';
 import useQueryParamState from 'hooks/queryParamState/useQueryParamState';
+import GOBar from 'src/components/VegaCharts/GOBar';
 import GOBarChart from './BarChart';
 import GOPieChart from './PieChart';
 
@@ -104,6 +105,8 @@ const GO: React.FC = () => {
                     containerId="cellular-component-bar-chart"
                   />
                 </div>
+
+                <GOBar />
               </div>
             )}
             {chart === 'pie' && dataBundles && (

src/components/Analysis/Functional/InterPro/index.tsx

@@ -9,6 +9,7 @@ import Loading from 'components/UI/Loading';
 import FetchError from 'components/UI/FetchError';
 import ExtLink from 'components/UI/ExtLink';
 import useQueryParamState from 'hooks/queryParamState/useQueryParamState';
+import InterProBar from 'src/components/VegaCharts/InterproBar';
 import InterProMatchesChart from './InterProMatchesChart';
 import InterProQCChart from './QCChart';
 
@@ -91,6 +92,7 @@ const InterPro: React.FC = () => {
     <div className="vf-stack">
       <div>
         <InterProQCChart />
+        <InterProBar />
       </div>
       <h5>InterPro match summary</h5>
       <div className="vf-grid mg-grid-30-70">

src/components/Analysis/Functional/KO/index.tsx

@@ -1,12 +1,24 @@
-import React from 'react';
-import PfamTable from './Table';
-import PfamBarChart from './BarChart';
+import React, { useContext } from 'react';
+import VerticalBarChart from 'src/components/VegaCharts/VerticalBar';
+import AnalysisContext from 'src/pages/Analysis/AnalysisContext';
+import KOTable from './Table';
+import KOBarChart from './BarChart';
 
 const PfamTab: React.FC = () => {
+  const { overviewData } = useContext(AnalysisContext);
+  const accession = `analyses/${overviewData.id}/kegg-orthologs`;
   return (
     <div className="vf-stack">
-      <PfamBarChart />
-      <PfamTable />
+      <KOBarChart />
+
+      <VerticalBarChart
+        ChartTitle="Top KO Entries"
+        accession={accession}
+        tooltipKey1="KEGG Class"
+        tooltipVal1="description"
+        tooltipKey3="Count"
+      />
+      <KOTable />
     </div>
   );
 };

src/components/Analysis/Functional/Pfam/index.tsx

@@ -1,14 +1,26 @@
-import React from 'react';
-import KOTable from './Table';
-import KOBarChart from './BarChart';
+import React, { useContext } from 'react';
+import VerticalBarChart from 'src/components/VegaCharts/VerticalBar';
+import AnalysisContext from 'src/pages/Analysis/AnalysisContext';
+import PfamTable from './Table';
+import BarChart from './BarChart';
 
-const KOTab: React.FC = () => {
+const PfamTab: React.FC = () => {
+  const { overviewData } = useContext(AnalysisContext);
+  const accession = `analyses/${overviewData.id}/pfam-entries`;
   return (
     <div className="vf-stack">
-      <KOBarChart />
-      <KOTable />
+      <BarChart />
+
+      <VerticalBarChart
+        ChartTitle="Top Pfam Entries"
+        accession={accession}
+        tooltipKey1="Pfam Entry"
+        tooltipVal1="description"
+        tooltipKey3="Count"
+      />
+      <PfamTable />
     </div>
   );
 };
 
-export default KOTab;
+export default PfamTab;

src/components/Analysis/Pathways/AntiSMASH/index.tsx

@@ -1,11 +1,24 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import VerticalBarChart from 'src/components/VegaCharts/VerticalBar';
+import AnalysisContext from 'src/pages/Analysis/AnalysisContext';
 import AntiSMASHTable from './Table';
 import AntiSMASHBarChart from './BarChart';
 
 const KOTab: React.FC = () => {
+  const { overviewData } = useContext(AnalysisContext);
+  const accession = `analyses/${overviewData.id}/antismash-gene-clusters`;
   return (
     <div className="vf-stack">
       <AntiSMASHBarChart />
+      <VerticalBarChart
+        ChartTitle="Top AntiSMASH gene clusters"
+        accession={accession}
+        tooltipKey1="AntiSMASH gene cluster"
+        tooltipVal1="description"
+        tooltipKey2="Count"
+        tooltipVal2="count"
+        lAngle={0}
+      />
       <AntiSMASHTable />
     </div>
   );

src/components/Analysis/Pathways/KeggModule/index.tsx

@@ -1,11 +1,32 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import AnalysisContext from 'src/pages/Analysis/AnalysisContext';
+import VerticalBarChart from 'src/components/VegaCharts/VerticalBar';
 import KeggTable from './Table';
 import KeggBarChart from './BarChart';
 
 const KOTab: React.FC = () => {
+  const { overviewData } = useContext(AnalysisContext);
+  const accession = `analyses/${overviewData.id}/kegg-modules`;
   return (
     <div className="vf-stack">
       <KeggBarChart />
+
+      <VerticalBarChart
+        ChartTitle="KEGG Module Categories"
+        accession={accession}
+        tooltipKey1="Class ID"
+        tooltipVal1="id"
+        tooltipKey2="KEGG Module"
+        tooltipVal2="description"
+        tooltipKey3="Completeness (%)"
+        y="completeness"
+        sliderValue={250}
+        maxSlider={250}
+        titleY="Completeness (%)"
+        lAngle={-75}
+        paddingLabel={30}
+        overlapLabels
+      />
       <KeggTable />
     </div>
   );

src/components/Analysis/QualityControl/index.tsx

@@ -4,6 +4,8 @@ import useMGnifyData from 'hooks/data/useMGnifyData';
 import Loading from 'components/UI/Loading';
 import { ResponseFormat } from 'hooks/data/useData';
 import AnalysisContext from 'pages/Analysis/AnalysisContext';
+import NucleotideHistogram from 'src/components/VegaCharts/NucleotidesHistogram';
+import QCStdDevChart from 'src/components/VegaCharts/QCStdDevChart';
 import QualityControlChart from './QCChart';
 import ContigsHistogram from './ContigsHistogram';
 import NucleotidesHistogram from './NucleotidesHistogram';
@@ -12,6 +14,7 @@ import SeqLengthChart from './SeqLengthChart';
 import GCContentChart from './GCContentChart';
 
 import './style.css';
+import VegaQC from '../../VegaCharts/QCChart';
 
 const QualityControl: React.FC = () => {
   const { overviewData: analysisData } = useContext(AnalysisContext);
@@ -41,6 +44,8 @@ const QualityControl: React.FC = () => {
         number given by ENA.
       </p>
       <QualityControlChart summaryData={summaryData} />
+      <h3>Vega</h3>
+      <VegaQC summaryData={summaryData} />
       {summaryData && Number(analysisData.attributes['pipeline-version']) > 2 && (
         <>
           <p>
@@ -62,12 +67,28 @@ const QualityControl: React.FC = () => {
               <GCContentChart summaryData={summaryData} />
             </div>
           </div>
+
+          <div className="vf-grid vf-grid__col-2">
+            <div className="vf-stack">
+              <QCStdDevChart
+                accession={`analyses/${accession}`}
+                type="seq-length"
+              />
+            </div>
+            <div className="vf-stack">
+              <QCStdDevChart
+                accession={`analyses/${accession}`}
+                type="gc-distribution"
+              />
+            </div>
+          </div>
           <p>
             The graph below show the relative abundance of nucletotides (A, C,
             G, T, or ambiguous base &quot;N&quot;) at each position starting
             from the beginning of each {unit} up to the first 500 base pairs.
           </p>
           <NucleotidesHistogram />
+          <NucleotideHistogram />
         </>
       )}
     </div>

src/components/Analysis/Taxonomy/PhylumCharts/index.tsx

@@ -6,6 +6,7 @@ import FetchError from 'components/UI/FetchError';
 import useMGnifyData from 'hooks/data/useMGnifyData';
 import { MGnifyDatum } from 'hooks/data/useData';
 import { TAXONOMY_COLOURS } from 'utils/taxon';
+import TaxBar from 'src/components/VegaCharts/TaxBar';
 import PhylumTable from '../PhylumTable';
 import PhylumPie from './Pie';
 import PhylumColumn from './Column';
@@ -156,6 +157,12 @@ const PhylumCharts: React.FC<PhylumChartsProps> = ({
               title="Domain composition"
               sequencesType={sequencesType}
             />
+            <TaxBar
+              ChartTitle="Domain composition"
+              clusteredData={clusteredDataTop}
+              sequencesType={sequencesType}
+              title="Domain"
+            />
           </div>
         )}
         {chartType === 'column' && (
@@ -167,6 +174,12 @@ const PhylumCharts: React.FC<PhylumChartsProps> = ({
               sequencesType={sequencesType}
               showTotal
             />
+            <TaxBar
+              ChartTitle="Phylum composition (top 10)"
+              clusteredData={clusteredData}
+              sequencesType={sequencesType}
+              title="Phylum"
+            />
           </div>
         )}
         {chartType === 'stacked-column' && (

src/components/Genomes/COGAnalysis/index.tsx

@@ -11,6 +11,7 @@ import { MGnifyDatum, MGnifyResponseList } from 'hooks/data/useData';
 import useURLAccession from 'hooks/useURLAccession';
 import useDefaultGenomeConfig from 'hooks/genomes/useDefaultConfig';
 import { TAXONOMY_COLOURS } from 'utils/taxon';
+import VerticalBarChart from 'src/components/VegaCharts/VerticalBar';
 
 addExportMenu(Highcharts);
 
@@ -23,7 +24,7 @@ const COGAnalises: React.FC<{ includePangenomes?: boolean }> = ({
   const { data, loading, error } = useMGnifyData(`genomes/${accession}/cogs`, {
     page_size: 100,
   });
-
+  const accession1 = `genomes/${accession}/cogs`;
   if (loading) return <Loading size="large" />;
   if (error) return <FetchError error={error} />;
   if (!data) return <Loading />;
@@ -95,6 +96,16 @@ const COGAnalises: React.FC<{ includePangenomes?: boolean }> = ({
         options={options}
         ref={chartComponentRef}
       />
+      <VerticalBarChart
+        ChartTitle="Top COG categories"
+        accession={accession1}
+        y="genome-count"
+        x="name"
+        tooltipKey1="COG"
+        tooltipVal1="description"
+        tooltipKey3="Genome Count"
+        lAngle={null}
+      />
       <EMGTable
         cols={columns}
         data={data as MGnifyResponseList}

src/components/Genomes/KEGGClassAnalysis/index.tsx

@@ -12,6 +12,7 @@ import useURLAccession from 'hooks/useURLAccession';
 import useDefaultGenomeConfig from 'hooks/genomes/useDefaultConfig';
 import { TAXONOMY_COLOURS } from 'utils/taxon';
 import useQueryParamState from 'hooks/queryParamState/useQueryParamState';
+import VerticalBarChart from 'src/components/VegaCharts/VerticalBar';
 
 addExportMenu(Highcharts);
 
@@ -40,7 +41,7 @@ const KEGGClassAnalises: React.FC<{ includePangenomes?: boolean }> = ({
       page_size: keggPageSize,
     }
   );
-
+  const accession1 = `genomes/${accession}/kegg-class`;
   if (loading) return <Loading size="large" />;
   if (error) return <FetchError error={error} />;
   if (!data) return <Loading />;
@@ -118,6 +119,15 @@ const KEGGClassAnalises: React.FC<{ includePangenomes?: boolean }> = ({
         options={options}
         ref={chartComponentRef}
       />
+      <VerticalBarChart
+        ChartTitle="Top KEGG brite categories"
+        accession={accession1}
+        y="genome-count"
+        x="class-id"
+        tooltipKey1="Description"
+        tooltipVal1="name"
+        tooltipKey3="Genome Count"
+      />
       <EMGTable
         cols={columns}
         data={data as MGnifyResponseList}