Target Illumination by Clinical Trial Analytics & Citations (TICTAC) UI

TICTAC is a web-based research platform designed to illuminate drug targets through clinical evidence. It aggregates and scores disease-target associations from over 190K+ clinical trials, allowing researchers to explore validated targets and trace their provenance back to source publications and trials.

This project is the frontend mapping to the TICTAC-API, built using modern web development standards to provide an intuitive, responsive, and performance-driven experience.

Features

• Evidence Landscape Exploration: Search for specific diseases, genes, or targets to view ranked associations based on clinical evidence. Uncover detailed studies on drug and biological targets.
• Target Development Levels (TDL): Targets are classified into four key categories representing drug discovery maturity: Tclin (Approved drugs), Tchem (Active compounds), Tbio (Biological annotation), and Tdark (Understudied).
• Comprehensive Dashboard: Visualizes data through interactive scatter plots and evidence tables to quickly identify high-potential targets filtering by disease or gene symbol.
• Detailed Evidence Trail: Drill down into specific disease-target associations to view reference weights (RESULT, BACKGROUND, DERIVED), publication counts, newness percentage, and direct links to ClinicalTrials.gov (NCT IDs) and PubMed (PMIDs).

Tech Stack

• Framework: React + Vite
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui (Radix UI) + Lucide Icons
• Data Fetching & State: React Query (v5)
• Routing: React Router DOM
• Data Visualization: Recharts

Local Setup

Prerequisites

• Node.js (v18+ recommended)
• The TICTAC backend API running locally for data population.

Development Environment

1. Setup TICTAC-API: Ensure the backend API is running in development mode. Follow the TICTAC-API development setup instructions. By default, the frontend proxies API requests to http://localhost:8000.

2. Clone the repository and install dependencies:

   npm install

3. Configure Environment (Optional): If your API runs on a different host or port, you can configure the target base proxy variable before running:

   VITE_API_PROXY_TARGET=http://your-custom-api-url npm run dev

4. Run the development server:

   npm run dev

5. Open the App: Navigate to http://localhost:5173/tictac/ in your browser. (Note: The vite config sets a base URL of /tictac/)

Available Scripts

• npm run dev - Starts the Vite development server.
• npm run build - Builds the application for production mode.
• npm run preview - Locally preview the production build.
• npm run lint - Run ESLint across the codebase.
• npm run test - Run Vitest testing suite.
• npm run knip - Find unused files, dependencies, and exports.

Methodology

This application serves as the frontend for the TICTAC research platform. To understand the underlying algorithms, evidence weighting mechanisms, scoring processes, and target development levels, reference the published peer-reviewed methodology paper:

Target Illumination by Clinical Trial Analytics & Citations (TICTAC) methodology.