chore: Initial commit.

.dockerignore

@@ -0,0 +1,9 @@
+# Deployment
+yaml
+
+# Development
+.prettierignore
+.prettierrc
+
+# Documentation
+README.md

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+# MacOS
+.DS_Store
+
+# Visual Studio code
+.vscode
+
+# IDE
+.idea/
+
+# NPM
+node_modules
+
+# NPM lock files
+package-lock.json
+
+# Next files
+.next
+
+# Husky files
+.husky
+
+# Dist files
+dist

.prettierignore

@@ -0,0 +1,9 @@
+node_modules/
+.vscode/
+.next/
+.yarn/
+public/
+yarn.lock
+package-lock.json
+.pnp.*
+*.md

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "always",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CHANGELOG.md

@@ -0,0 +1,28 @@
+# Change Log
+
+## v1.0 (2024-04-26)
+
+
+### 🚀 Release Highlight
+
+- InspectorRAGet has gone open source! https://github.com/IBM/InspectorRAGet
+ 
+### 💅 Features
+
+
+- Functionality - Supported Evaluations: InspectorRAGet supports any human and automatic evaluations in a unified interface, from numerical metrics such as F1 and Rouge-L, to LLM-as-a-judge metrics such as faithfulness or answer relevance, to any human evaluation metrics, whether numerical or categorical.
+- Integration - Experiment Runner: Python notebook demonstrating how to run experiments using Hugging Face assets (datasets, models, and metric evaluators) and output the results in the JSON format expected by InspectorRAGet
+- Functionality - Input Validator: Validate input file on load and return informative error messages if any data is missing or incorrectly formatted
+- Views - Data Characteristics: New view! Displays several informative visualizations of the input data
+- Views - Predictions: New view! Sortable list of the input text and all corresponding model responses, filterable on all available data enrichments
+- Views - Performance Overview: Aggregate values show mean, std and agreement levels, for all human and automatic metrics
+  - Functionality - Aggregate: Aggregator function can be specified for each metric independently
+- Views - Model Behavior: Filter evaluations on any available enrichments and analyze per-metric performance across all models; display a sortable and filtered table of all tasks, with access to ever tasks Detail view
+- Views - Task Detail: Examine all detailed task information including the context(s), input text, all model outputs, and all evaluation metric values
+  - Functionality - Sympathetic Highlighting: In the Task Detail view, click to highlight the common text between the response and the context(s)
+  - Functionality - Annotate: In the Task Detail view, flag a task instance, or add comments to individual components, which will persist for the rest of the session
+  - Functionality - Copy to Clipboard: In the Task Detail view, instantly copy all individual task detail information in text, JSON or LaTeX format
+- Views - Model Comparator: Calculate statistical similarity between the distributions of two models on a given metric; display a table of all tasks with different model aggregate scores, with access to every task's Detail view
+- Views - Metric Behavior: Show correlations of any selected metrics, optionally for a subset of all models, to provide insights on metric definitions and relationships
+- Functionality - Export: Export the evaluation file, including all new annotations of comments and flag, to save your enriched file for future analysis
+- Functionality - Dark Mode: Switch the entire UI to dark mode!

Dockerfile

@@ -0,0 +1,71 @@
+FROM --platform=linux/amd64 node:20-alpine AS base
+
+# ----------------------------------------------------------
+#                   DEPENDENCY MANAGEMENT
+# ----------------------------------------------------------
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci --legacy-peer-deps; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# ----------------------------------------------------------
+#                       BUILD
+# ----------------------------------------------------------
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# ----------------------------------------------------------
+#                      PRODUCTION
+# ----------------------------------------------------------
+# Production image, copy all the files and run next
+FROM base AS runner
+
+# Set up environment
+ENV PORT 3000
+ENV NODE_ENV production
+
+# Users configuration
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Configure application directory
+WORKDIR /app
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Adjust permissions for next cache
+RUN mkdir -p /app/.next/cache/fetch-cache && chmod -R 755 /app/.next/cache/fetch-cache
+
+# Switch user
+USER nextjs
+
+# Runtime
+EXPOSE ${PORT}
+CMD ["node", "server.js"]

README.md

@@ -1,2 +1,37 @@
 # InspectorRAGet
-The repository contains generative AI analytics platform application code.
+
+InspectorRAGet, an introspection platform for RAG evaluation. InspectorRAGet allows the user to analyze aggregate and instance-level performance of RAG systems, using both human and algorithmic metrics as well as annotator quality.
+
+## 🎥 Demo
+[![InspectorRAGet on the case!](https://img.youtube.com/vi/MJhe8QIXcEc/0.jpg)](https://www.youtube.com/watch?v=MJhe8QIXcEc)
+
+InspectorRAGet is a a [React](https://react.dev/) web application built with [NextJS 14](https://nextjs.org/) framework. We extensively use the [Carbon Design System](https://carbondesignsystem.com/), an open-source design system with a wide range of assets including react and web components, styling guidelines,
+custom icons, and others
+
+## 🏗️ Build & Deploy
+### Installation
+We use yarn as a default package manager. 
+
+```shell
+yarn install
+```
+⚠️ node version must be `20.12.0` or higher.
+
+### Development server
+To start InspectorRAGet in development mode, please run the following command.
+
+```shell
+yarn dev
+```
+
+### Build
+To build a static production bundle, please run the following command.
+```shell
+yarn dev
+```
+
+### Production server
+To start InspectorRAGet in production mode, please run the following command.
+```shell
+yarn start
+```

VERSION

@@ -0,0 +1 @@
+0.0.1-alpha

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,83 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+const path = require('path');
+
+const cspMap = {
+  'base-uri': ["'none'"],
+  'font-src': ["'self'", 'data:', "'unsafe-inline'"],
+  'form-action': ["'self'"],
+  'frame-ancestors': ["'none'"],
+  'frame-src': ["'self'"],
+  'img-src': ["'self'", 'data:', 'blob:', 'www.ibm.com/'],
+  'media-src': ["'self'", 'blob:', 'www.ibm.com/'],
+  'object-src': ["'none'"],
+  'style-src': ["'self'", "'unsafe-inline'", 'www.ibm.com/common/'],
+};
+
+const getCSPString = (cspMap) =>
+  Object.entries(cspMap)
+    .map(([key, values]) => `${key} ${values.join(' ')}`)
+    .join('; ');
+
+const headers = [
+  {
+    key: 'Content-Security-Policy',
+    value: getCSPString(cspMap),
+  },
+  {
+    key: 'X-Content-Type-Options',
+    value: 'nosniff',
+  },
+  {
+    key: 'X-XSS-Protection',
+    value: '1',
+  },
+  {
+    key: 'Strict-Transport-Security',
+    value: 'max-age=63072000; includeSubDomains; preload',
+  },
+  {
+    key: 'X-Frame-Options',
+    value: 'DENY',
+  },
+  {
+    key: 'Referrer-Policy',
+    value: 'strict-origin-when-cross-origin',
+  },
+];
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+
+  output: 'standalone',
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+
+  async headers() {
+    return [
+      // Default headers for all pages.
+      { source: '/', headers },
+      { source: '/:path*', headers },
+    ];
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "InspectorRAGet",
+  "version": "1.0.0-beta",
+  "private": true,
+  "description": "An Introspection Platform for RAG Evaluation",
+  "author": "[email protected]",
+  "license": "ISC",
+  "scripts": {
+    "postinstall": "husky install",
+    "dev": "next dev",
+    "build": "next build && node ./scripts/license",
+    "start": "next start",
+    "lint": "next lint && stylelint \"**/*.{css,scss}\"",
+    "format": "prettier --write ."
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn build"
+    }
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^13.4.2",
+    "@types/node": "18.16.3",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.23.0",
+    "eslint-config-next": "^13.1.6",
+    "eslint-config-prettier": "^8.8.0",
+    "husky": "^8.0.3",
+    "prepend-file": "^2.0.1",
+    "prettier": "^3.0.3",
+    "sass": "^1.54.3",
+    "typescript": "^5.0.4",
+    "stylelint": "16.2.1",
+    "stylelint-config-standard-scss": "13.0.0"
+  },
+  "dependencies": {
+    "@carbon/colors": "^11.4.0",
+    "@carbon/themes": "^11.8.0",
+    "@carbon/icons-react": "^11.34.1",
+    "@carbon/pictograms-react": "^11.49.0",
+    "@carbon/charts": "^1.7.4",
+    "@carbon/charts-react": "^1.7.4",
+    "@carbon/react": "^1.17.0",
+    "d3": "^7.8.4",
+    "date-fns": "^2.30.0",
+    "dompurify": "3.0.8",
+    "html-react-parser": "^5.1.1",
+    "lodash": "^4.17.4",
+    "next": "^14.1.1",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.1.0",
+    "react-markdown": "^8.0.7",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^3.0.1",
+    "statistics.js": "^1.0.0",
+    "uuid": "^9.0.1"
+  }
+}

public/app.LICENSE.txt

@@ -0,0 +1,17 @@
+/*!
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/

public/robot.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

scripts/license.js

@@ -0,0 +1,53 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+const fs = require('fs');
+const path = require('path');
+const prependFile = require('prepend-file');
+
+const license = `/*! For license information please see app.LICENSE.txt */
+`;
+
+const chunksPath = path.join(__dirname, '../.next/static/chunks/');
+const cssPath = path.join(__dirname, '../.next/static/css');
+
+function applyLicence(filePath) {
+  prependFile(filePath, license);
+}
+
+function findAllFiles(dirPath) {
+  const files = [];
+  const searchFiles = (directoryPath) =>
+    fs.readdirSync(directoryPath).forEach((file) => {
+      const filePath = path.join(directoryPath, file);
+      if (fs.statSync(filePath).isDirectory()) {
+        searchFiles(filePath);
+      } else {
+        files.push(filePath);
+      }
+    });
+
+  searchFiles(dirPath);
+
+  return files;
+}
+
+[chunksPath, cssPath].forEach((folder) => {
+  const files = findAllFiles(folder);
+  files.forEach((file) => applyLicence(file));
+});

src/app/cookbooks/page.tsx

@@ -0,0 +1,23 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import CookBooksView from '@/src/views/cookbooks/CookBooks';
+
+export default function Page() {
+  return <CookBooksView />;
+}

src/app/documentation/page.tsx

@@ -0,0 +1,23 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import DocumentationView from '@/src/views/documentation/Documentation';
+
+export default function Page() {
+  return <DocumentationView />;
+}

src/app/examples/[example_id]/layout.tsx

@@ -0,0 +1,27 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+import { Suspense } from 'react';
+import Loading from '@/src/app/examples/[example_id]/loading';
+
+export default function ExampleLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Suspense fallback={<Loading />}>{children}</Suspense>;
+}

src/app/examples/[example_id]/loading.tsx

@@ -0,0 +1,23 @@
+/**
+ *
+ * Copyright 2022-2023 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import SkeletonExample from '@/src/views/example/SkeletonExample';
+
+export default async function Loading() {
+  return <SkeletonExample />;
+}

src/app/examples/[example_id]/page.tsx

@@ -0,0 +1,33 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import { Data } from '@/src/types';
+import { load } from '@/src/dataloader';
+import Example from '@/src/views/example/Example';
+
+export default async function Page({
+  params,
+}: {
+  params: { example_id: string };
+}) {
+  const example: Data | undefined = (await load()).find(
+    (entry) => entry.exampleId === params.example_id,
+  );
+
+  return <>{example ? <Example data={example} /> : null}</>;
+}

src/app/examples/page.tsx

@@ -0,0 +1,30 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+/* NextJS 14 Hack to avoid fetching data during build */
+export const dynamic = 'force-dynamic';
+
+import { TileData } from '@/src/types';
+import { load } from '@/src/dataloader';
+import ExamplesView from '@/src/views/examples/Examples';
+
+export default async function Page() {
+  const examples: TileData[] = await load();
+
+  return <ExamplesView examples={examples} />;
+}

src/app/global.scss

@@ -0,0 +1,44 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react' as *;
+
+body {
+  width: 100vw;
+  height: 100vh;
+}
+
+.root {
+  height: 100vh;
+  width: 100%;
+  padding-top: $spacing-09;
+  display: flex;
+}
+
+.copiedText {
+  background-color: #f1c21b;
+  mix-blend-mode: hard-light;
+}
+
+.highlightClickable {
+  cursor: pointer;
+}
+
+.cds--tabs--contained ~ .cds--tab-content {
+  background: var(--cds-background) !important;
+}

src/app/layout.tsx

@@ -0,0 +1,49 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import { Suspense } from 'react';
+import HeaderView from '@/src/components/header/Header';
+import Loading from '@/src/app/loading';
+import { ThemeProvider } from '@/src/theme';
+import { DataStoreProvider } from '@/src/store';
+import { NotificationProvider } from '@/src/components/notification/Notification';
+
+import '@/src/app/global.scss';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeProvider>
+          <NotificationProvider>
+            <DataStoreProvider>
+              <HeaderView />
+              <Suspense fallback={<Loading />}>
+                <main className="root">{children}</main>
+              </Suspense>
+            </DataStoreProvider>
+          </NotificationProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

src/app/loading.tsx

@@ -0,0 +1,21 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+export default async function Loading() {
+  return <> </>;
+}

src/app/page.tsx

@@ -0,0 +1,77 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import Home from '@/src/views/home/Home';
+
+export default async function Page() {
+  return (
+    <Home
+      page={{
+        greeting: 'Hi,',
+        title: 'Welcome to InspectorRAGet',
+        subtitle:
+          'An introspection Platform for RAG Evaluation enabling performance benchmarking, a combined aggregate and in stance level analysis, a holistic view of results via a mix of metrics, annotator qualification, and dataset characterization. Our goal is to help accelerate the transition from idea to product.',
+        subtitleLink: {
+          content: 'Learn more',
+          href: 'https://github.com/IBM/InspectorRAGet',
+          openInNewTab: true,
+        },
+        cards: [
+          {
+            title: 'Visualize',
+            text: 'Experience analytics capabilities.',
+            href: '/visualize',
+            actionText: 'Try it out',
+            tag: null,
+            icon: 'CHART_MULTITYPE',
+            openInNewTab: false,
+          },
+          {
+            title: 'Examples',
+            text: 'See how analytics platform can help you identify issues with the model faster.',
+            href: '/examples',
+            actionText: 'Explore',
+            tag: null,
+            icon: 'MICROSCOPE',
+            openInNewTab: false,
+          },
+          {
+            title: 'Data collection cookbooks',
+            text: 'A guide for collecting human & algorithmic evaluations.',
+            href: '/cookbooks',
+            actionText: 'Start cooking',
+            tag: 'coming soon',
+            icon: 'NOODLE_BOWL',
+            openInNewTab: false,
+            disabled: true,
+          },
+          {
+            title: 'Documentation',
+            text: 'Access developer resources',
+            href: '/documentation',
+            actionText: 'Read the docs',
+            tag: 'coming soon',
+            icon: 'BOOK',
+            openInNewTab: false,
+            disabled: true,
+          },
+        ],
+      }}
+    />
+  );
+}

src/app/visualize/layout.tsx

@@ -0,0 +1,27 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+import { Suspense } from 'react';
+import Loading from '@/src/app/visualize/loading';
+
+export default function ExperimentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Suspense fallback={<Loading />}>{children}</Suspense>;
+}

src/app/visualize/loading.tsx

@@ -0,0 +1,23 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import SkeletonVisualizationView from '@/src/views/visualization/SkeletonVisualization';
+
+export default async function Loading() {
+  return <SkeletonVisualizationView />;
+}

src/app/visualize/page.tsx

@@ -0,0 +1,23 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import VisualizationView from '@/src/views/visualization/Visualization';
+
+export default function Page() {
+  return <VisualizationView />;
+}

src/components/comments/AddCommentModal.module.scss

@@ -0,0 +1,44 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+
+.commentProvenance {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+}
+
+.commentProvenanceTag {
+  max-width: 8rem;
+}
+
+.commentBox {
+  padding-bottom: $spacing-03;
+}
+
+.reference {
+  padding-bottom: $spacing-03;
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.32px;
+}

src/components/comments/AddCommentModal.tsx

@@ -0,0 +1,128 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Modal, TextArea, TextInput, Tag } from '@carbon/react';
+
+import { TaskCommentProvenance, Model } from '@/src/types';
+import classes from './AddCommentModal.module.scss';
+
+interface Props {
+  onSubmit: Function;
+  onClose: Function;
+  open: boolean;
+  selectedText?: string;
+  provenance: TaskCommentProvenance | undefined;
+  models: Map<string, Model> | undefined;
+}
+
+export default function AddCommentModal({
+  selectedText,
+  onSubmit,
+  onClose,
+  open = false,
+  provenance,
+  models,
+}: Props) {
+  const [comment, setComment] = useState<string>('');
+  const [author, setAuthor] = useState<string>('');
+  const [tag, tagType] = useMemo(() => {
+    if (provenance) {
+      if (provenance.component.includes('input')) {
+        return ['Input', 'purple'];
+      } else if (provenance.component.includes('document_')) {
+        return ['Contexts', 'cyan'];
+      } else if (provenance.component.includes('::evaluation::response')) {
+        const modelId = provenance.component.split('::')[0];
+        return [`${models?.get(modelId)?.name || modelId}`, 'green'];
+      } else {
+        return ['Generic', 'gray'];
+      }
+    } else {
+      return ['Generic', 'gray'];
+    }
+  }, [provenance, models]);
+
+  return (
+    <Modal
+      open={open}
+      modalHeading="Add a comment"
+      modalLabel="Comments"
+      primaryButtonText="Add"
+      secondaryButtonText="Cancel"
+      onRequestSubmit={() => {
+        //Step 1: Clear comment & update default value for author
+        setComment('');
+
+        // Step 2: Register comment and close modal
+        onSubmit(comment, author);
+      }}
+      onRequestClose={() => {
+        //Step 1: Clear comment
+        setComment('');
+
+        // Step 2: Close modal
+        onClose();
+      }}
+      primaryButtonDisabled={comment === '' || author === ''}
+    >
+      <div className={classes.commentProvenance}>
+        <span className={classes.label}>Provenance</span>
+        <Tag className={classes.commentProvenanceTag} type={tagType}>
+          {tag}
+        </Tag>
+      </div>
+
+      <TextArea
+        className={classes.commentBox}
+        labelText="Comment"
+        rows={4}
+        id="comment-area"
+        value={comment}
+        invalid={comment === ''}
+        invalidText={'comment cannot be empty'}
+        onChange={(event) => {
+          setComment(event.target.value);
+        }}
+      />
+
+      {tag !== 'Generic' && (
+        <div className={classes.reference}>
+          <div>
+            <span className={'cds--label'}>Reference</span>
+          </div>
+          <p>{selectedText}</p>
+        </div>
+      )}
+
+      <TextInput
+        id="author-input"
+        type="text"
+        labelText="Author"
+        defaultValue={author}
+        invalid={author === ''}
+        invalidText={'author cannot be empty'}
+        onChange={(event) => {
+          setAuthor(event.target.value);
+        }}
+      />
+    </Modal>
+  );
+}

src/components/comments/CommentViewer.module.scss

@@ -0,0 +1,92 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/colors' as *;
+
+.viewer {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-05;
+}
+
+.comment {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-04;
+  border-bottom: solid 1px var(--cds-border-strong-01);
+}
+
+.commentHeader {
+  display: flex;
+  font-size: 14px;
+  font-weight: 300;
+  justify-content: space-between;
+}
+
+.commentHeaderAuthor {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+  align-items: center;
+}
+
+.commentHeaderProvenance {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.commentTag {
+  max-width: 8rem;
+}
+
+.commentHeaderTimestamp {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+  align-items: center;
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.32px;
+}
+
+.commentBody {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+}
+
+.commentBodyHeader {
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.commentActions {
+  display: flex;
+  justify-content: space-around;
+}
+
+.commentBtn {
+  display: flex;
+  column-gap: $spacing-03;
+}

src/components/comments/CommentsViewer.tsx

@@ -0,0 +1,145 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { useState, memo, useMemo } from 'react';
+import { Button, Tag } from '@carbon/react';
+import { Edit, TrashCan } from '@carbon/icons-react';
+
+import { TaskComment, Model } from '@/src/types';
+
+import classes from './CommentViewer.module.scss';
+
+function Comment({
+  id,
+  comment,
+  onEdit,
+  onDelete,
+  models,
+}: {
+  id: string;
+  comment: TaskComment;
+  onEdit: Function;
+  onDelete: Function;
+  models: Map<string, Model> | undefined;
+}) {
+  const [editing, setEditing] = useState<boolean>(false);
+  const [editedCommentText, setEditedCommentText] = useState<string>('');
+  const [author, setAuthor] = useState<string>('');
+
+  const [tag, tagType]: [string, string] = useMemo(() => {
+    if (comment.provenance) {
+      if (comment.provenance.component.includes('input')) {
+        return ['Input', 'purple'];
+      } else if (comment.provenance.component.includes('document_')) {
+        return ['Contexts', 'cyan'];
+      } else if (
+        comment.provenance.component.includes('::evaluation::response')
+      ) {
+        const modelId = comment.provenance.component.split('::')[0];
+        return [`${models?.get(modelId)?.name || modelId}`, 'green'];
+      } else {
+        return ['Generic', 'gray'];
+      }
+    } else {
+      return ['Generic', 'gray'];
+    }
+  }, [comment.provenance, models]);
+
+  return (
+    <div className={classes.comment}>
+      <div className={classes.commentHeader}>
+        <div className={classes.commentHeaderAuthor}>
+          <span className={classes.label}>Author</span>
+          <span>{comment.author}</span>
+        </div>
+        <div className={classes.commentHeaderProvenance}>
+          <span className={classes.label}>Provenance</span>
+          <Tag className={classes.commentTag} type={tagType}>
+            {tag}
+          </Tag>
+        </div>
+
+        <span className={classes.commentHeaderTimestamp}>
+          <span className={classes.label}>Last updated</span>
+          <span>{new Date(comment.updated).toLocaleDateString()}</span>
+        </span>
+      </div>
+
+      <div className={classes.commentBody}>{comment.comment}</div>
+      <div className={classes.commentActions}>
+        <Button
+          id={`${id}-editBtn`}
+          className={classes.commentBtn}
+          kind={'ghost'}
+          onClick={() => {
+            setEditing(true);
+          }}
+          disabled={true}
+        >
+          <span>Edit</span>
+          <Edit />
+        </Button>
+        <Button
+          id={`${id}-deleteBtn`}
+          className={classes.commentBtn}
+          kind={'ghost'}
+          onClick={onDelete}
+          disabled={true}
+        >
+          <span>Delete</span>
+          <TrashCan />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface Props {
+  comments: TaskComment[];
+  onSelect: Function;
+  onEdit: Function;
+  onDelete: Function;
+  models: Map<string, Model> | undefined;
+}
+export default memo(function ViewComments({
+  comments,
+  onSelect,
+  onEdit,
+  onDelete,
+  models,
+}: Props) {
+  return (
+    <div className={classes.viewer}>
+      <h4>Comments</h4>
+      {comments.map((comment, commentIdx) => {
+        return (
+          <Comment
+            key={`comment-${commentIdx}`}
+            id={`comment-${commentIdx}`}
+            comment={comment}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            models={models}
+          />
+        );
+      })}
+    </div>
+  );
+});

src/components/disabled/DisabledTab.module.scss

@@ -0,0 +1,43 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/colors' as *;
+
+.page {
+  display: flex;
+  flex-direction: column;
+}
+
+.warningContainer {
+  margin: $spacing-09 0;
+  display: flex;
+  column-gap: $spacing-03;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.warningContainerIcon {
+  color: $gray-40;
+}
+
+.warningContainerText {
+  font-size: 24px;
+  line-height: 28px;
+  color: $gray-40;
+}

src/components/disabled/DisabledTab.tsx

@@ -0,0 +1,39 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+import { WarningAlt } from '@carbon/icons-react';
+import classes from './DisabledTab.module.scss';
+
+interface Props {
+  message: string;
+}
+
+export default function DisabledTab({ message }: Props) {
+  return (
+    <div className={classes.page}>
+      <div className={classes.warningContainer}>
+        <WarningAlt
+          height={'32px'}
+          width={'32px'}
+          className={classes.warningContainerIcon}
+        />
+        <span className={classes.warningContainerText}>{message}</span>
+      </div>
+    </div>
+  );
+}

src/components/example-tile/ExampleTile.module.scss

@@ -0,0 +1,116 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/colors' as *;
+
+.tile {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeletonTitle {
+  width: 50%;
+}
+
+.heading {
+  display: flex;
+  column-gap: $spacing-03;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+}
+
+.title {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.block {
+  display: flex;
+  margin-top: $spacing-03;
+}
+
+.divider {
+  border-right: 1px solid #d8d8d8;
+  flex: 0 0 1px;
+  margin: 0 1rem;
+}
+
+.information {
+  display: flex;
+  flex: 1 0 70%;
+  min-width: 40%;
+  column-gap: $spacing-12;
+  align-items: baseline;
+}
+
+.actions {
+  display: flex;
+  flex: 1 1 30%;
+  align-items: baseline;
+  justify-content: space-evenly;
+}
+
+.artifactEvaluations {
+  flex-direction: column;
+}
+
+.artifactAnnotators {
+  flex-direction: column;
+}
+
+.artifactMetrics {
+  display: flex;
+  flex-direction: column;
+}
+
+.artifactModels {
+  display: flex;
+  flex-direction: column;
+}
+
+.artifactDuration {
+  display: flex;
+  flex-direction: column;
+}
+
+.artifactHeader {
+  display: flex;
+  column-gap: $spacing-02;
+  align-items: center;
+}
+
+.artifactTitle {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--cds-text-helper);
+}
+
+.artifactValue {
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: $spacing-02;
+}
+
+.listItem {
+  color: var(--cds-background) !important;
+}

src/components/example-tile/ExampleTile.tsx

@@ -0,0 +1,201 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import Link from 'next/link';
+import {
+  ExpandableTile,
+  TileAboveTheFoldContent,
+  TileBelowTheFoldContent,
+  Tag,
+  Button,
+  DefinitionTooltip,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+  ToggletipActions,
+  UnorderedList,
+  ListItem,
+} from '@carbon/react';
+import { Microscope, Download, Information } from '@carbon/icons-react';
+
+import { TileData } from '@/src/types';
+import {
+  MetricDefinitions,
+  extractMetricDisplayName,
+} from '@/src/utilities/metrics';
+import { calculateDuration } from '@/src/utilities/time';
+
+import styles from './ExampleTile.module.scss';
+
+export default function ExperimentTile({
+  data,
+  disableNavigation = false,
+  disableActions = false,
+  expanded = true,
+}: {
+  data: TileData;
+  disableNavigation?: boolean;
+  disableActions?: boolean;
+  expanded?: boolean;
+}) {
+  const [
+    durationInDays,
+    durationInHours,
+    durationInMinutes,
+    durationInSeconds,
+  ] = calculateDuration(data.endTimestamp, data.startTimestamp);
+
+  return (
+    <ExpandableTile expanded={expanded}>
+      <TileAboveTheFoldContent>
+        <div className={styles.heading}>
+          <Microscope className={styles.icon} />
+          {disableNavigation ? (
+            <span className={styles.title}>{data.name}</span>
+          ) : (
+            <Link href={`/examples/${data.exampleId}`}>
+              <span className={styles.title}>{data.name}</span>
+            </Link>
+          )}
+        </div>
+      </TileAboveTheFoldContent>
+      <TileBelowTheFoldContent>
+        <div className={styles.block}>
+          <div className={styles.information}>
+            <div className={styles.artifactEvaluations}>
+              <div className={styles.artifactTitle}>
+                <span># of tasks</span>
+              </div>
+              <div className={styles.artifactValue}>
+                <span>{data.numTasks}</span>
+              </div>
+            </div>
+            <div className={styles.artifactAnnotators}>
+              <div className={styles.artifactTitle}>
+                <span># of annotators</span>
+              </div>
+              <div className={styles.artifactValue}>
+                <span>{data.annotators.length}</span>
+              </div>
+            </div>
+            <div className={styles.artifactMetrics}>
+              <div className={styles.artifactHeader}>
+                <div className={styles.artifactTitle}>
+                  <span>Metrics</span>
+                </div>
+                <Toggletip>
+                  <ToggletipButton label="Additional information">
+                    <Information />
+                  </ToggletipButton>
+                  <ToggletipContent>
+                    <p>Analytics platform supports three kind of metrics</p>
+                    <UnorderedList>
+                      <ListItem className={styles.listItem}>
+                        Go vs No-Go Rubric
+                      </ListItem>
+                      <ListItem className={styles.listItem}>
+                        Intuitive Rubric
+                      </ListItem>
+                      <ListItem className={styles.listItem}>
+                        Detailed Rubric
+                      </ListItem>
+                    </UnorderedList>
+                    <ToggletipActions>
+                      <Link target="_blank" rel="noopener noreferrer" href="">
+                        Reference
+                      </Link>
+                    </ToggletipActions>
+                  </ToggletipContent>
+                </Toggletip>
+              </div>
+              <div className={styles.artifactValue}>
+                {[...data.metrics].map((metric) => {
+                  return (
+                    <Tag type={'cool-gray'} key={'metric-' + metric.name}>
+                      <DefinitionTooltip
+                        definition={
+                          metric.description || MetricDefinitions[metric.name]
+                        }
+                        align={'bottom'}
+                        openOnHover={true}
+                      >
+                        {extractMetricDisplayName(metric)}
+                      </DefinitionTooltip>
+                    </Tag>
+                  );
+                })}
+              </div>
+            </div>
+            <div className={styles.artifactModels}>
+              <div className={styles.artifactTitle}>
+                <span>Models</span>
+              </div>
+              <div className={styles.artifactValue}>
+                {[...data.models].map((model) => {
+                  return (
+                    <Tag type={'cool-gray'} key={'model-' + model.modelId}>
+                      {model.name}
+                    </Tag>
+                  );
+                })}
+              </div>
+            </div>
+            {durationInDays ||
+            durationInHours ||
+            durationInMinutes ||
+            durationInSeconds ? (
+              <div className={styles.artifactDuration}>
+                <div className={styles.artifactTitle}>
+                  <span>Duration</span>
+                </div>
+                <div className={styles.artifactValue}>
+                  <span>
+                    {durationInDays ? durationInDays + ' days ' : ''}
+                    {durationInHours ? durationInHours + ' hours ' : ''}
+                    {durationInMinutes ? durationInMinutes + ' mins ' : ''}
+                    {durationInSeconds} sec
+                  </span>
+                </div>
+              </div>
+            ) : null}
+          </div>
+          {!disableActions && (
+            <>
+              <div className={styles.divider}></div>
+              <div className={styles.actions}>
+                <Button
+                  id="download-evaluations"
+                  renderIcon={Download}
+                  kind={'ghost'}
+                  iconDescription={'Download evaluations'}
+                  tooltipAlignment={'end'}
+                  tooltipPosition={'bottom'}
+                  disabled
+                >
+                  Download evaluations
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </TileBelowTheFoldContent>
+    </ExpandableTile>
+  );
+}

src/components/example-tile/SkeletonExampleTile.tsx

@@ -0,0 +1,126 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import Link from 'next/link';
+import { Tile, Tag, Button, SkeletonText } from '@carbon/react';
+import { Microscope, Download } from '@carbon/icons-react';
+
+import styles from './ExampleTile.module.scss';
+
+export default function SkeletonExampleTile({
+  disableNavigation = false,
+  disableActions = false,
+}: {
+  disableNavigation?: boolean;
+  disableActions?: boolean;
+}) {
+  return (
+    <Tile className={styles.tile}>
+      <div className={styles.heading}>
+        <Microscope className={styles.icon} />
+        {disableNavigation ? (
+          <span className={styles.title}>
+            <SkeletonText />
+          </span>
+        ) : (
+          <Link href={`#`}>
+            <span className={styles.title}>
+              <SkeletonText />
+            </span>
+          </Link>
+        )}
+      </div>
+      <div className={styles.block}>
+        <div className={styles.information}>
+          <div className={styles.artifactEvaluations}>
+            <div className={styles.artifactTitle}>
+              <span># of evaluations</span>
+            </div>
+            <div className={styles.artifactValue}>
+              <SkeletonText />
+            </div>
+          </div>
+          <div className={styles.artifactAnnotators}>
+            <div className={styles.artifactTitle}>
+              <span># of annotators</span>
+            </div>
+            <div className={styles.artifactValue}>
+              <SkeletonText />
+            </div>
+          </div>
+          <div className={styles.artifactMetrics}>
+            <div className={styles.artifactTitle}>
+              <span>Metrics</span>
+            </div>
+            <div className={styles.artifactValue}>
+              {['Metric A', 'Metric B', 'Metric C'].map((metric) => {
+                return (
+                  <Tag type="cool-gray" key={'metric-' + metric}>
+                    {metric}
+                  </Tag>
+                );
+              })}
+            </div>
+          </div>
+          <div className={styles.artifactModels}>
+            <div className={styles.artifactTitle}>
+              <span>Models</span>
+            </div>
+            <div className={styles.artifactValue}>
+              {['Model A', 'Model B'].map((model) => {
+                return (
+                  <Tag type="cool-gray" key={'model-' + model}>
+                    {model}
+                  </Tag>
+                );
+              })}
+            </div>
+          </div>
+          <div className={styles.artifactDuration}>
+            <div className={styles.artifactTitle}>
+              <span>Duration</span>
+            </div>
+            <div className={styles.artifactValue}>
+              <SkeletonText />
+            </div>
+          </div>
+        </div>
+        {!disableActions && (
+          <>
+            <div className={styles.divider}></div>
+            <div className={styles.actions}>
+              <Button
+                id="download-evaluations"
+                renderIcon={Download}
+                kind={'ghost'}
+                iconDescription={'Download evaluations'}
+                tooltipAlignment={'end'}
+                tooltipPosition={'bottom'}
+                disabled
+              >
+                Download evaluations
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </Tile>
+  );
+}

src/components/filters/Filters.module.scss

@@ -0,0 +1,72 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/colors' as *;
+
+.filtersBtnTooltip {
+  align-self: center;
+  margin-bottom: $spacing-03;
+}
+
+.filtersBtn {
+  display: flex;
+  column-gap: $spacing-04;
+  padding: $spacing-03;
+  color: inherit !important;
+}
+
+.filtersBtnElements {
+  display: flex;
+  column-gap: $spacing-04;
+  align-items: center;
+}
+
+.filtersBtnCaptionElements {
+  display: flex;
+  column-gap: $spacing-02;
+  align-items: center;
+}
+
+.filters {
+  margin: 0 0 $spacing-03 $spacing-05;
+  padding: $spacing-05;
+  display: none;
+  align-items: baseline;
+  column-gap: $spacing-09;
+  box-shadow: 0 0 5px 2px $gray-40;
+}
+
+.visible {
+  display: flex;
+  animation: fade-in 0.5s;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.filterSelector {
+  max-width: 25%;
+}

src/components/filters/Filters.tsx

@@ -0,0 +1,137 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { isEmpty, omit } from 'lodash';
+import cx from 'classnames';
+import { useState, useEffect } from 'react';
+
+import { FilterableMultiSelect, Tag, Tooltip, Button } from '@carbon/react';
+import { ChevronUp, ChevronDown, Filter } from '@carbon/icons-react';
+
+import classes from './Filters.module.scss';
+// ===================================================================================
+//                                TYPES
+// ===================================================================================
+interface Props {
+  keyPrefix: string;
+  filters: { [key: string]: string[] };
+  selectedFilters: { [key: string]: string[] };
+  setSelectedFilters: Function;
+}
+
+// ===================================================================================
+//                               MAIN FUNCTION
+// ===================================================================================
+export default function Filters({
+  keyPrefix,
+  filters,
+  selectedFilters,
+  setSelectedFilters,
+}: Props) {
+  // Step 1: Initialize state and necessary variables
+  const [showFilters, setShowFilters] = useState<boolean>(true);
+
+  // Step 2: Run effects
+  // Step 2.a: If no filters are found, set show filters to false
+  useEffect(() => {
+    if (filters === undefined) {
+      setShowFilters(false);
+    }
+  }, [filters]);
+
+  // Step 3: Render
+  return (
+    <>
+      {filters && (
+        <Tooltip
+          label={'Click to toggel filters'}
+          align={'right'}
+          className={classes.filtersBtnTooltip}
+        >
+          <Button
+            id={`${keyPrefix}-filters`}
+            className={classes.filtersBtn}
+            kind={'ghost'}
+            size={'sm'}
+            onClick={() => {
+              setShowFilters(!showFilters);
+            }}
+            disabled={!filters}
+          >
+            <div className={classes.filtersBtnElements}>
+              {showFilters ? (
+                <ChevronUp size={24} />
+              ) : (
+                <ChevronDown size={24} />
+              )}
+              <div className={classes.filtersBtnCaptionElements}>
+                <h5>Additional Filters</h5>
+                <Filter />
+              </div>
+            </div>
+          </Button>
+        </Tooltip>
+      )}
+      <div className={cx(classes.filters, showFilters && classes.visible)}>
+        {showFilters &&
+          filters &&
+          Object.entries(filters).map(([filterType, values]) => {
+            return (
+              <div
+                key={`${keyPrefix}-filter` + filterType + '-selector'}
+                className={classes.filterSelector}
+              >
+                <FilterableMultiSelect
+                  id={`${keyPrefix}-filter` + filterType + '-selector'}
+                  titleText={filterType}
+                  items={values}
+                  itemToString={(item) => String(item)}
+                  onChange={(event) => {
+                    setSelectedFilters((prevState) =>
+                      isEmpty(event.selectedItems)
+                        ? omit(prevState, filterType)
+                        : {
+                            ...prevState,
+                            [filterType]: event.selectedItems,
+                          },
+                    );
+                  }}
+                ></FilterableMultiSelect>
+                {Object.keys(selectedFilters).includes(filterType) ? (
+                  <div>
+                    {selectedFilters[filterType].map((value) => {
+                      return (
+                        <Tag
+                          type={'cool-gray'}
+                          key={`${keyPrefix}-filter-value` + value}
+                        >
+                          {value}
+                        </Tag>
+                      );
+                    })}
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+      </div>
+    </>
+  );
+}

src/components/filters/SkeletonFilters.tsx

@@ -0,0 +1,71 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import cx from 'classnames';
+
+import { SelectSkeleton, TagSkeleton, Tooltip, Button } from '@carbon/react';
+import { ChevronUp, Filter } from '@carbon/icons-react';
+
+import classes from './Filters.module.scss';
+
+// ===================================================================================
+//                               MAIN FUNCTION
+// ===================================================================================
+export default function SkeletonFilters() {
+  return (
+    <>
+      <Tooltip
+        label={'Click to toggel filters'}
+        align={'right'}
+        className={classes.filtersBtnTooltip}
+      >
+        <Button
+          id={`skeleton-filters`}
+          className={classes.filtersBtn}
+          kind={'ghost'}
+          size={'sm'}
+        >
+          <div className={classes.filtersBtnElements}>
+            <ChevronUp size={24} />
+            <div className={classes.filtersBtnCaptionElements}>
+              <h5>Additional Filters</h5>
+              <Filter />
+            </div>
+          </div>
+        </Button>
+      </Tooltip>
+
+      <div className={cx(classes.filters, classes.visible)}>
+        {['1', '2', '3'].map((filter) => {
+          return (
+            <div
+              key={`$filter-` + filter + '-selector'}
+              className={classes.filterSelector}
+              style={{ width: '15%' }}
+            >
+              <SelectSkeleton />
+              <TagSkeleton />
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}

src/components/header/Header.jsx

@@ -0,0 +1,114 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import Link from 'next/link';
+import { React, memo } from 'react';
+import {
+  Header,
+  HeaderName,
+  HeaderGlobalBar,
+  HeaderGlobalAction,
+  Theme,
+} from '@carbon/react';
+
+import {
+  Home,
+  DocumentExport,
+  Debug,
+  LogoGithub,
+  Awake,
+  Asleep,
+} from '@carbon/icons-react';
+
+import { useTheme } from '@/src/theme';
+import { useDataStore } from '@/src/store';
+import { useNotification } from '@/src/components/notification/Notification';
+import { exportData } from '@/src/processor';
+
+import classes from './Header.module.scss';
+
+export default memo(function HeaderView() {
+  const { theme, set } = useTheme();
+  const { item, taskMap } = useDataStore();
+  const { createNotification } = useNotification();
+
+  return (
+    <Header aria-label="InspectorRAGet">
+      <Link className={classes.homeBtn} href="/">
+        <Home height={'16px'} width={'16px'} />
+      </Link>
+      <HeaderName prefix="">InspectorRAGet</HeaderName>
+      <HeaderGlobalBar>
+        <HeaderGlobalAction
+          aria-label={
+            theme === 'white' ? 'Switch to dark mode' : 'Switch to light mode'
+          }
+          onClick={() => {
+            theme === 'white' ? set('g100') : set('white');
+          }}
+        >
+          {theme === 'white' ? <Asleep size={20} /> : <Awake size={20} />}
+        </HeaderGlobalAction>
+        <HeaderGlobalAction
+          aria-label="Export"
+          onClick={() => {
+            const success = exportData(item, Array.from(taskMap.values()));
+            if (success) {
+              // Notify user about successfuly export
+              createNotification({
+                kind: 'success',
+                title: 'Export successful.',
+                subtitle: 'Please look into browser default save location.',
+              });
+            } else {
+              // Notify user about invalid request
+              createNotification({
+                kind: 'error',
+                title: 'Export unsuccessful.',
+                subtitle: 'No visualized analytics data available to export.',
+              });
+            }
+          }}
+        >
+          <DocumentExport size={20} />
+        </HeaderGlobalAction>
+        <HeaderGlobalAction
+          aria-label="Report bug"
+          onClick={() => {
+            window.open(
+              'https://github.com/IBM/InspectorRAGet/issues/new?assignees=&labels=&template=bug_report.md&title=',
+              '_blank',
+            );
+          }}
+        >
+          <Debug size={20} />
+        </HeaderGlobalAction>
+        <HeaderGlobalAction
+          aria-label="Github"
+          onClick={() => {
+            window.open('https://github.com/IBM/InspectorRAGet', '_blank');
+          }}
+        >
+          <LogoGithub size={20} />
+        </HeaderGlobalAction>
+      </HeaderGlobalBar>
+    </Header>
+  );
+});

src/components/header/Header.module.scss

@@ -0,0 +1,34 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/colors' as *;
+
+.homeBtn {
+  width: $spacing-09;
+  height: $spacing-09;
+  padding: 0 $spacing-03;
+  color: inherit !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.homeBtn:hover {
+  background-color: var(--cds-background-hover);
+}

src/components/notification/Notification.module.scss

@@ -0,0 +1,24 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+.notification {
+  position: fixed;
+  top: 4rem;
+  right: 1rem;
+  z-index: 20;
+}

src/components/notification/Notification.tsx

@@ -0,0 +1,91 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { createContext, useContext, useState, useRef } from 'react';
+import { ToastNotification } from '@carbon/react';
+
+import { Notification as NotificationType } from '@/src/types';
+
+import styles from './Notification.module.scss';
+
+type NotificationContextType = {
+  createNotification(notification: NotificationType, timeout?: number): void;
+};
+
+const NotificationContext = createContext<NotificationContextType | undefined>(
+  undefined,
+);
+
+const NotificationComponent = ({
+  title,
+  subtitle,
+  kind,
+  caption,
+}: NotificationType) => (
+  <ToastNotification
+    hideCloseButton={true}
+    className={styles.notification}
+    closeOnEscape={false}
+    title={title}
+    kind={kind}
+    subtitle={subtitle}
+    caption={caption}
+  />
+);
+
+export const NotificationProvider = ({ children }: { children: any }) => {
+  const [notification, setNotification] = useState<
+    NotificationType | undefined
+  >();
+  const timeoutId = useRef<NodeJS.Timeout | undefined>();
+
+  const createNotification = (
+    notification: NotificationType,
+    timeout?: number,
+  ) => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    setNotification(notification);
+    timeoutId.current = setTimeout(
+      () => {
+        setNotification(undefined);
+      },
+      timeout ? timeout : 5000,
+    );
+  };
+
+  return (
+    <NotificationContext.Provider value={{ createNotification }}>
+      {children}
+      {notification && <NotificationComponent {...notification} />}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  if (context === undefined) {
+    throw new Error(
+      'useNotification must be used within a NotificationProvider',
+    );
+  }
+  return context;
+};

src/components/selectors/AggregatorSelector.tsx

@@ -0,0 +1,80 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { memo } from 'react';
+import { Select, SelectItem } from '@carbon/react';
+
+import { Aggregator } from '@/src/types';
+
+interface Props {
+  aggregators: Aggregator[];
+  onSelect: Function;
+  defaultValue: Aggregator;
+  warn: boolean;
+  warnText?: string;
+  disableDefaultValue?: boolean;
+  disabledAggregators?: Aggregator[];
+  disabled?: boolean;
+}
+export default memo(function AggregatorSelector({
+  aggregators: aggregators,
+  onSelect,
+  defaultValue,
+  warn = false,
+  warnText = 'You must select an aggregator to view results.',
+  disabledAggregators: disabledAggregators,
+  disabled = false,
+}: Props) {
+  return (
+    <Select
+      id={'aggregator-selector'}
+      labelText="Choose aggregator"
+      defaultValue={defaultValue.name}
+      disabled={disabled}
+      warn={warn}
+      warnText={warnText}
+      onChange={(event) => {
+        onSelect(
+          aggregators.find(
+            (aggregator) => aggregator.name === event.target.value,
+          ),
+        );
+      }}
+    >
+      {aggregators.map((aggregator) => {
+        return (
+          <SelectItem
+            key={`${aggregator.name}-selector`}
+            value={aggregator.name}
+            text={
+              aggregator.displayName ? aggregator.displayName : aggregator.name
+            }
+            disabled={
+              disabledAggregators &&
+              disabledAggregators
+                .map((entry) => entry.name)
+                .includes(aggregator.name)
+            }
+          ></SelectItem>
+        );
+      })}
+    </Select>
+  );
+});

src/components/selectors/MetricSelector.tsx

@@ -0,0 +1,135 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { memo } from 'react';
+import { Select, SelectItem, SelectItemGroup } from '@carbon/react';
+
+import { Metric } from '@/src/types';
+import { extractMetricDisplayName } from '@/src/utilities/metrics';
+
+interface Props {
+  metrics: Metric[];
+  onSelect: Function;
+  warn: boolean;
+  warnText?: string;
+  defaultValue?: string;
+  disableDefaultValue?: boolean;
+  disabledMetrics?: Metric[];
+  disabled?: boolean;
+}
+export default memo(function MetricSelector({
+  metrics,
+  onSelect,
+  warn = false,
+  warnText = 'You must select a single metric to view tasks.',
+  defaultValue = 'all',
+  disableDefaultValue = false,
+  disabledMetrics,
+  disabled = false,
+}: Props) {
+  const metricTypes = new Set(metrics.map((metric) => metric.type));
+
+  return (
+    <Select
+      id={'metric-selector'}
+      labelText="Choose metric"
+      disabled={disabled}
+      defaultValue={defaultValue}
+      warn={warn}
+      warnText={warnText}
+      onChange={(event) => {
+        onSelect(
+          event.target.value !== defaultValue
+            ? metrics.find((metric) => metric.name === event.target.value)
+            : undefined,
+        );
+      }}
+    >
+      <SelectItem
+        key={'default-selector'}
+        text={
+          defaultValue.charAt(0).toUpperCase() +
+          defaultValue.slice(1).toLowerCase()
+        }
+        value={defaultValue}
+        disabled={disableDefaultValue}
+      />
+      {metricTypes.size > 1 ? (
+        <>
+          <SelectItemGroup key={'human-metric-selectors'} label={'Human'}>
+            {metrics
+              .filter((metric) => metric.author === 'human')
+              .map((metric) => {
+                return (
+                  <SelectItem
+                    key={`${metric.name}-selector`}
+                    value={metric.name}
+                    text={extractMetricDisplayName(metric)}
+                    disabled={
+                      disabledMetrics &&
+                      disabledMetrics
+                        .map((entry) => entry.name)
+                        .includes(metric.name)
+                    }
+                  ></SelectItem>
+                );
+              })}
+          </SelectItemGroup>
+          <SelectItemGroup
+            key={'algorithmic-metric-selectors'}
+            label={'Algorithmic'}
+          >
+            {metrics
+              .filter((metric) => metric.author === 'algorithm')
+              .map((metric) => {
+                return (
+                  <SelectItem
+                    key={`${metric.name}-selector`}
+                    value={metric.name}
+                    text={extractMetricDisplayName(metric)}
+                    disabled={
+                      disabledMetrics &&
+                      disabledMetrics
+                        .map((entry) => entry.name)
+                        .includes(metric.name)
+                    }
+                  ></SelectItem>
+                );
+              })}
+          </SelectItemGroup>
+        </>
+      ) : (
+        metrics.map((metric) => {
+          return (
+            <SelectItem
+              key={`${metric.name}-selector`}
+              value={metric.name}
+              text={extractMetricDisplayName(metric)}
+              disabled={
+                disabledMetrics &&
+                disabledMetrics.map((entry) => entry.name).includes(metric.name)
+              }
+            ></SelectItem>
+          );
+        })
+      )}
+    </Select>
+  );
+});

src/components/selectors/ModelSelector.tsx

@@ -0,0 +1,75 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import { memo } from 'react';
+import { Select, SelectItem } from '@carbon/react';
+
+import { Model } from '@/src/types';
+
+interface Props {
+  id: string;
+  models: Model[];
+  onSelect: Function;
+  defaultValue?: Model;
+  disabledModels?: Model[];
+  warn?: boolean;
+  warnText?: string;
+  disabled?: boolean;
+}
+export default memo(function ModelSelector({
+  id,
+  models,
+  onSelect,
+  defaultValue,
+  disabledModels,
+  warn = false,
+  warnText,
+  disabled = false,
+}: Props) {
+  return (
+    <Select
+      id={id}
+      defaultValue={defaultValue?.modelId}
+      labelText="Choose a model"
+      disabled={disabled}
+      onChange={(event) => {
+        onSelect(event.target.value);
+      }}
+      warn={warn}
+      warnText={warnText}
+    >
+      {models.map((model) => {
+        return (
+          <SelectItem
+            key={`${model.modelId}-selector`}
+            disabled={
+              disabledModels &&
+              disabledModels
+                .map((entry) => entry.modelId)
+                .includes(model.modelId)
+            }
+            value={model.modelId}
+            text={model.name}
+          ></SelectItem>
+        );
+      })}
+    </Select>
+  );
+});

src/components/task-tile/SkeletonTaskTile.tsx

@@ -0,0 +1,124 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import Link from 'next/link';
+import {
+  Tile,
+  Tag,
+  SkeletonText,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+  ToggletipActions,
+  UnorderedList,
+  ListItem,
+} from '@carbon/react';
+import { Task as TaskIcon, Information } from '@carbon/icons-react';
+
+import styles from './TaskTile.module.scss';
+
+export default function SkeletonTaskTile() {
+  return (
+    <Tile className={styles.tile}>
+      <div className={styles.heading}>
+        <TaskIcon className={styles.icon} />
+        <span className={styles.title}>
+          <SkeletonText />
+        </span>
+      </div>
+      <div className={styles.block}>
+        <div className={styles.information}>
+          <div className={styles.artifactEvaluations}>
+            <div className={styles.artifactTitle}>
+              <span># of evaluations</span>
+            </div>
+            <div className={styles.artifactValue}>
+              <span>
+                <SkeletonText />
+              </span>
+            </div>
+          </div>
+          <div className={styles.artifactAnnotators}>
+            <div className={styles.artifactTitle}>
+              <span># of annotators</span>
+            </div>
+            <div className={styles.artifactValue}>
+              <span>
+                <SkeletonText />
+              </span>
+            </div>
+          </div>
+          <div className={styles.artifactMetrics}>
+            <div className={styles.artifactTitle}>
+              <span>Metrics</span>
+              <Toggletip>
+                <ToggletipButton label="Additional information">
+                  <Information />
+                </ToggletipButton>
+                <ToggletipContent>
+                  <p>Analytics platform supports three kind of metrics</p>
+                  <UnorderedList>
+                    <ListItem className={styles.listItem}>
+                      Go vs No-Go Rubric
+                    </ListItem>
+                    <ListItem className={styles.listItem}>
+                      Intuitive Rubric
+                    </ListItem>
+                    <ListItem className={styles.listItem}>
+                      Detailed Rubric
+                    </ListItem>
+                  </UnorderedList>
+                  <ToggletipActions>
+                    <Link target="_blank" rel="noopener noreferrer" href="">
+                      Reference
+                    </Link>
+                  </ToggletipActions>
+                </ToggletipContent>
+              </Toggletip>
+            </div>
+            <div className={styles.artifactValue}>
+              {['faithfulness'].map((metric, idx) => {
+                return (
+                  <Tag type={'cool-gray'} key={'metric-' + idx}>
+                    {metric}
+                  </Tag>
+                );
+              })}
+            </div>
+          </div>
+          <div className={styles.artifactModels}>
+            <div className={styles.artifactTitle}>
+              <span>Models</span>
+            </div>
+            <div className={styles.artifactValue}>
+              {['Model A', 'Model B', 'Model C'].map((model, idx) => {
+                return (
+                  <Tag type={'cool-gray'} key={'model-' + idx}>
+                    {model}
+                  </Tag>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Tile>
+  );
+}