feat: plot of idea ratings (#25)

Author: swouf

package.json

@@ -37,12 +37,15 @@
     "@types/node": "17.0.45",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
+    "@types/react-plotly.js": "^2.6.0",
     "i18next": "22.5.1",
     "immutable": "4.3.4",
+    "plotly.js": "^2.26.0",
     "qs": "6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "12.3.1",
+    "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.14.2",
     "typescript": "4.9.5"
   },

src/config/appDataTypes.ts

@@ -4,6 +4,7 @@ import { AppDataRecord } from '@graasp/sdk/frontend';
 import { List } from 'immutable';
 
 import { IdeationState } from '@/interfaces/ideation';
+import { NoveltyRelevanceRatings } from '@/interfaces/ratings';
 
 export enum AppDataTypes {
   Idea = 'idea',
@@ -12,17 +13,21 @@ export enum AppDataTypes {
   Ratings = 'ratings',
 }
 
-export type IdeaData = {
+export type IdeaData<T = NoveltyRelevanceRatings> = {
   idea: string;
   round?: number;
   bot?: boolean;
   parentId?: string;
   encoding?: 'text' | 'markdown';
+  ratings?: T;
 };
 
-export type AnonymousIdeaData = IdeaData & { id: string };
+export type AnonymousIdeaData<RatingsT = NoveltyRelevanceRatings> =
+  IdeaData<RatingsT> & { id: string };
 
-export type IdeasData = List<AnonymousIdeaData>;
+export type IdeasData<RatingsT = NoveltyRelevanceRatings> = List<
+  AnonymousIdeaData<RatingsT>
+>;
 
 export type IdeaAppData = AppDataRecord & {
   type: AppDataTypes.Idea;

src/modules/common/Synchronizer.tsx

@@ -8,8 +8,13 @@ import { AppDataVisibility } from '@graasp/sdk';
 
 import { List } from 'immutable';
 
-import { IdeaAppData } from '@/config/appDataTypes';
+import {
+  AppDataTypes,
+  IdeaAppData,
+  RatingsAppData,
+} from '@/config/appDataTypes';
 import { REFRESH_INTERVAL_MS } from '@/config/constants';
+import { NoveltyRelevanceRatings } from '@/interfaces/ratings';
 import { anonymizeIdeas } from '@/utils/ideas';
 
 import { useAppDataContext } from '../context/AppDataContext';
@@ -43,7 +48,18 @@ const Synchronizer: FC<SynchronizerProps> = ({ sync }) => {
   );
 
   const ideas = useMemo(
-    () => appData.filter(({ type }) => type === 'idea') as List<IdeaAppData>,
+    () =>
+      appData.filter(
+        ({ type }) => type === AppDataTypes.Idea,
+      ) as List<IdeaAppData>,
+    [appData],
+  );
+
+  const ratings = useMemo(
+    () =>
+      appData.filter(({ type }) => type === AppDataTypes.Ratings) as List<
+        RatingsAppData<NoveltyRelevanceRatings>
+      >,
     [appData],
   );
 
@@ -53,7 +69,7 @@ const Synchronizer: FC<SynchronizerProps> = ({ sync }) => {
       const newIdeasIds = ideas.map(({ id }) => id).sort();
       if (ideas && !ideasIds.equals(newIdeasIds)) {
         setIdeasIds(newIdeasIds);
-        const anonymousIdeas = anonymizeIdeas(ideas);
+        const anonymousIdeas = anonymizeIdeas(ideas, ratings);
         if (setId) {
           patchAppData({
             id: setId,
@@ -72,7 +88,7 @@ const Synchronizer: FC<SynchronizerProps> = ({ sync }) => {
         }
       }
     }
-  }, [ideas, ideasIds, patchAppData, postAppData, setId, sync]);
+  }, [ideas, ideasIds, patchAppData, postAppData, ratings, setId, sync]);
 
   return (
     <Stack width="100%" direction="row" spacing={1}>

src/modules/main/ideasView/AnonymousIdeasView.tsx

@@ -7,6 +7,8 @@ import { AppDataTypes, IdeaSetAppData } from '@/config/appDataTypes';
 import { useAppDataContext } from '@/modules/context/AppDataContext';
 import { useSettings } from '@/modules/context/SettingsContext';
 
+import RatingsPlot from './RatingsPlot';
+
 const AnonymousIdeasView = (): JSX.Element => {
   // const { t } = useTranslation();
   const { appData } = useAppDataContext();
@@ -47,6 +49,7 @@ const AnonymousIdeasView = (): JSX.Element => {
   return (
     <Container>
       <DataGrid columns={columns} rows={ideasTable.toArray()} />
+      <RatingsPlot />
     </Container>
   );
 };

src/modules/main/ideasView/IdeasView.tsx

@@ -9,6 +9,8 @@ import { List, RecordOf } from 'immutable';
 import { IdeaAppData } from '@/config/appDataTypes';
 import { useAppDataContext } from '@/modules/context/AppDataContext';
 
+import RatingsPlot from './RatingsPlot';
+
 const IdeasView = (): JSX.Element => {
   const { t } = useTranslation();
   const { appData } = useAppDataContext();
@@ -45,6 +47,7 @@ const IdeasView = (): JSX.Element => {
   return (
     <Container>
       <DataGrid columns={columns} rows={ideasTable.toArray()} />
+      <RatingsPlot />
     </Container>
   );
 };

src/modules/main/ideasView/RatingsPlot.tsx

@@ -0,0 +1,55 @@
+import { FC, useMemo } from 'react';
+import Plot from 'react-plotly.js';
+
+import Container from '@mui/material/Container';
+import { useTheme } from '@mui/material/styles';
+
+import { AppDataTypes, IdeaSetAppData } from '@/config/appDataTypes';
+import { useAppDataContext } from '@/modules/context/AppDataContext';
+import { useSettings } from '@/modules/context/SettingsContext';
+
+const RatingsPlot: FC = () => {
+  const { appData } = useAppDataContext();
+  const { orchestrator } = useSettings();
+  const theme = useTheme();
+  const ideas = useMemo(
+    () =>
+      (
+        appData.find(
+          ({ creator, type }) =>
+            creator?.id === orchestrator.id && type === AppDataTypes.IdeaSet,
+        ) as IdeaSetAppData
+      )?.data.ideas,
+    [appData, orchestrator.id],
+  );
+
+  const x = ideas.map(({ ratings }) => ratings?.novelty || 0).toArray();
+  const y = ideas.map(({ ratings }) => ratings?.usefulness || 0).toArray();
+  const labels = ideas.map(({ idea }) => idea).toArray();
+
+  return (
+    <Container>
+      <Plot
+        data={[
+          {
+            x,
+            y,
+            text: labels,
+            type: 'scatter',
+            mode: 'markers',
+            marker: { color: theme.palette.primary.main },
+          },
+        ]}
+        layout={{
+          // width: 600,
+          height: 800,
+          title: 'Idea ratings',
+          xaxis: { title: 'Novelty' },
+          yaxis: { title: 'Usefulness' },
+        }}
+      />
+    </Container>
+  );
+};
+
+export default RatingsPlot;

src/utils/ideas.ts

@@ -7,18 +7,46 @@ import {
   CurrentStateAppData,
   IdeaAppData,
   IdeasData,
+  RatingsAppData,
 } from '@/config/appDataTypes';
+import { NoveltyRelevanceRatings } from '@/interfaces/ratings';
 
-export const anonymizeIdeas = (ideas: List<IdeaAppData>): IdeasData =>
+const average = (array: number[]): number => {
+  if (array.length > 0) {
+    return array.reduce((a, b) => a + b) / array.length;
+  }
+  return 0;
+};
+
+export const anonymizeIdeas = (
+  ideas: List<IdeaAppData>,
+  ratings?: List<RatingsAppData<NoveltyRelevanceRatings>>,
+): IdeasData =>
   List(
     ideas.map((ideaData) => {
       const { idea, round, parentId, encoding } = ideaData.data;
+      let r: NoveltyRelevanceRatings | undefined;
+      if (ratings) {
+        const listOfRatings = ratings
+          .filter(({ data }) => data.ideaRef === ideaData.id)
+          .map(({ data }) => data.ratings);
+        const usefulnessList: number[] = [];
+        const noveltyList: number[] = [];
+        listOfRatings.forEach(({ usefulness, novelty }) => {
+          if (usefulness) usefulnessList.push(usefulness);
+          if (novelty) noveltyList.push(novelty);
+        });
+        const meanUsefulness = average(usefulnessList);
+        const meanNovelty = average(noveltyList);
+        r = { novelty: meanNovelty, usefulness: meanUsefulness };
+      }
       return {
         id: ideaData.id,
         idea,
         round,
         parentId,
         encoding,
+        ratings: r,
       };
     }),
   );