query

webapp/src/components/PullRequests.tsx

@@ -14,32 +14,13 @@ import {
   GitHub,
   RemoveCircleOutline,
 } from '@mui/icons-material';
-import Button from '@mui/material/Button';
 import { blue, red } from '@mui/material/colors';
 import Tooltip from '@mui/material/Tooltip';
 import useDuckDB from '@/DuckDB';
 import '@/components/PullRequests.css'
+import DataQuery from '@/components/data/data_query';
 import { PullRequest } from '@/types';
 
-// construct initial query from URL parameters
-const params = new URLSearchParams(window.location.search);
-const q = [];
-if (params.get('author')) q.push(`author='${params.get('author')}'`);
-if (params.get('createdAt')) q.push(`createdAt like '${params.get('createdAt')}%'`);
-if (params.get('state')) q.push(`state='${params.get('state')}'`);
-if (params.get('totalCommentsCount')) q.push(`totalCommentsCount=${params.get('totalCommentsCount')}`);
-if (params.get('changedFiles')) q.push(`changedFiles=${params.get('changedFiles')}`);
-if (params.get('additions')) q.push(`additions=${params.get('additions')}`);
-if (params.get('deletions')) q.push(`deletions=${params.get('deletions')}`);
-if (params.get('repository')) q.push(`repository='${params.get('repository')}'`);
-if (params.get('stargazerCount')) q.push(`stargazerCount=${params.get('stargazerCount')}`);
-if (params.get('forkCount')) q.push(`forkCount=${params.get('forkCount')}`);
-const where_clause = q.length > 0 ? `WHERE ${q.join(' AND ')}` : '';
-const basepath = import.meta.env.BASE_URL
-const baseUrl = `${window.location.protocol}//${window.location.host}${basepath}`.replace(/\/$/, '');
-const DEFAULT_QUERY = `SELECT * FROM '${baseUrl}/assets/pull_request.parquet' AS p JOIN '${baseUrl}/assets/repository.parquet' AS r ON p.repositoryId = r.id ${where_clause}`;
-
-
 const columns: GridColDef[] = [
   { field: 'author', headerName: 'Author', width: 150 },
   { field: 'createdAt', headerName: 'Created At', width: 100, renderCell: (params) => (
@@ -74,8 +55,7 @@ const columns: GridColDef[] = [
 function PullRequestsTable() {
   const {db, error} = useDuckDB();
   const [data, setData] = useState<PullRequest[]>([]);
-  const [query, setQuery] = useState(DEFAULT_QUERY);
-  const [inputQuery, setInputQuery] = useState(DEFAULT_QUERY);
+  const [query, setQuery] = useState('');
   const [loadError, setLoadError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -100,21 +80,8 @@ function PullRequestsTable() {
     load();
   }, [db, query]);
 
-  /*
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    let q = '';
-    if (params.get('additions')) q += ` additions=${params.get('additions')}`;
-    setQuery(q);
-  }, [window.location.search]);
-  */
-
-  const handleQueryChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInputQuery(e.target.value);
-  }
-
-  const handleQuerySubmit = () => {
-    setQuery(inputQuery);
+  const onQuerySubmit = (submittedQuery: string) => {
+    setQuery(submittedQuery);
   };
 
   if (error) {
@@ -134,44 +101,13 @@ function PullRequestsTable() {
     </>
   }
 
-
   return (
     <>
       <h1>Pull Requests</h1>
-      <div style={{ marginBottom: '1em' }}>
-        <div>
-          <label
-            htmlFor="query-input"
-            style={{
-              marginRight: '1em',
-            }}
-          >
-            {'SQL Query: '}
-          </label>
-        </div>
-        <div>
-          <textarea
-            id='query-input'
-            value={inputQuery}
-            onChange={handleQueryChange}
-            style={{
-              width: '80%',
-              height: '4em',
-              marginRight: '1em',
-              padding: '0.5em',
-              resize: 'vertical',
-              fontFamily: 'monospace',
-            }}
-          />
-          <Button
-            variant="contained"
-            onClick={handleQuerySubmit}
-          >
-            {'Execute'}
-          </Button>
-        </div>
+      <div>
+        <DataQuery onQuerySubmit={onQuerySubmit} />
       </div>
-      <div style={{ height: '85%', width: '100%' }}>
+      <div style={{ height: '100vh', width: '100%', minHeight: '90vh' }}>
         <DataGrid
             rowHeight={25}
             columnHeaderHeight={30}

webapp/src/components/Statistics.tsx

@@ -7,6 +7,7 @@ import LineDeletionsPlot from '@/components/scatter/LineDeletions';
 import useDuckDB from '@/DuckDB';
 import { PullRequest } from '@/types';
 import LineChangesPlot from '@/components/scatter/LineChanges';
+import { getBaseUrl } from '@/utils';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
@@ -30,11 +31,12 @@ const StatisticsPage = () => {
 
       try {
         const conn = await db.connect();
-        const basepath = import.meta.env.BASE_URL
-        const baseUrl = `${window.location.protocol}//${window.location.host}${basepath}`.replace(/\/$/, '');
+        const baseUrl = getBaseUrl();
         console.log(`fetch pull_request.parquet from baseUrl: ${baseUrl}`);
+
         const result = (await conn.query(`SELECT * FROM '${baseUrl}/assets/pull_request.parquet'`)).toArray();
         setData(result);
+
         console.log('success to load remote parquet file');
       } catch (error) {
         console.error('Failed to load remote Parquet file:', error);

webapp/src/components/Summary.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
 
 import { PRCount } from '@/types';
+import { getBaseUrl } from '@/utils';
 import PullRequestsCountChart from '@/components/statistics/PullRequestsCount';
 import ReposCountChart from '@/components/statistics/ReposCount';
 
@@ -22,11 +23,10 @@ const SummaryPage = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const basepath = import.meta.env.BASE_URL
-      const baseUrl = `${window.location.protocol}//${window.location.host}${basepath}`.replace(/\/$/, '');
+      const baseUrl = getBaseUrl();
       console.log(`fetch pr_counts_by_date.csv from baseUrl: ${baseUrl}`);
-      const resp = await fetch(`${baseUrl}/assets/pr_counts_by_date.csv`);
 
+      const resp = await fetch(`${baseUrl}/assets/pr_counts_by_date.csv`);
       const csv = await resp.text();
       const prCounts: PRCount[]= csv.split('\n').slice(1).map(row => {
         const values = row.split(',');

webapp/src/components/data/DataSchema.ts

@@ -0,0 +1,42 @@
+type DataElement = {
+  name: string,
+  type: string,
+  displayName: string,
+  description: string,
+}
+
+export const DataSchema: DataElement[] = [
+  // Pull Request
+  { name: 'author', type: 'TEXT', displayName: 'Author', description: 'PR creator' },
+  { name: 'title', type: 'TEXT', displayName: 'Title', description: 'PR title' },
+  { name: 'url', type: 'TEXT', displayName: 'URL', description: 'URL of PR' },
+  { name: 'createdAt', type: 'DATE', displayName: 'Created At', description: 'PR created at (YYYY-MM-DD)' },
+  { name: 'state', type: 'TEXT', displayName: 'State', description: 'PR state' },
+  { name: 'totalCommentsCount', type: 'INTEGER', displayName: 'Total Comments Count', description: 'num of comments in PR' },
+  { name: 'changedFiles', type: 'INTEGER', displayName: 'Changed Files', description: 'num of changed files by PR' },
+  { name: 'additions', type: 'INTEGER', displayName: 'Additions', description: 'num of line added by PR' },
+  { name: 'deletions', type: 'INTEGER', displayName: 'Deletions', description: 'num of line deleted by PR' },
+  // Repository
+  { name: 'nameWithOwner', type: 'TEXT', displayName: 'Repository', description: 'repo name ("owner/repo")' },
+  { name: 'stargazerCount', type: 'INTEGER', displayName: 'Stargazer Count', description: 'num of stars for repo' },
+  { name: 'forkCount', type: 'INTEGER', displayName: 'Fork Count', description: 'num of forks for repo' },
+]
+
+export const DataSchemaDescription = `Available Columns:
+` + DataSchema.map((e) => `- ${e.name}[${e.type}]:  ${e.description}`).join('\n')
+
+export const getWhereClauseBySearchParams = (params: URLSearchParams): string => {
+  const p = DataSchema.reduce((acc, e) => {
+    if (params.get(e.name)) {
+      if (e.type === 'TEXT') {
+        acc.push(`${e.name} = '${params.get(e.name)}'`);
+      } else if (e.type === 'DATE') {
+        acc.push(`${e.name} like '${params.get(e.name)}%'`);
+      } else {
+        acc.push(`${e.name} = ${params.get(e.name)}`);
+      }
+    }
+    return acc;
+  }, [] as string[]);
+  return p.length > 0 ? `WHERE ${p.join(' AND ')}` : '';
+}

webapp/src/components/data/data_query.tsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import Button from '@mui/material/Button';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { Help } from '@mui/icons-material';
+import { Tooltip, IconButton } from '@mui/material';
+
+import { DataSchemaDescription, getWhereClauseBySearchParams } from '@/components/data/DataSchema';
+import { getBaseUrl } from '@/utils';
+
+
+type DataQueryProps = {
+  query?: string;
+  onQuerySubmit: (query: string) => void;
+}
+
+const constructDefaultQuery = (): string => {
+  const params = new URLSearchParams(window.location.search);
+  const whereClause = getWhereClauseBySearchParams(params);
+  const baseUrl = getBaseUrl();
+
+  return `SELECT *
+    FROM '${baseUrl}/assets/pull_request.parquet' AS p
+    JOIN '${baseUrl}/assets/repository.parquet' AS r
+    ON p.repositoryId = r.id
+    ${whereClause};
+  `;
+}
+
+const StyledLabel = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5em',
+  fontWeight: 600,
+  fontSize: '1.1em',
+  color: '#1976d2',  // Material-UI primary blue
+  padding: '0.5em 0',
+});
+
+export default function DataQuery({ query, onQuerySubmit }: DataQueryProps) {
+  const [inputQuery, setInputQuery] = useState(query || constructDefaultQuery());
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    onQuerySubmit(inputQuery);
+  }, []);
+
+  const handleQueryChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputQuery(e.target.value);
+  }
+
+  const handleQuerySubmit = () => {
+    onQuerySubmit(inputQuery);
+  }
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      width: '100%'
+    }}>
+      <div
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          marginBottom: '0.5em'
+        }}
+      >
+        <StyledLabel>
+          <Typography variant="h6" component="span">
+            SQL Query
+          </Typography>
+          <Tooltip
+            title={<pre style={{ whiteSpace: 'pre-wrap' }}>{DataSchemaDescription}</pre>}
+            placement="right"
+            arrow
+          >
+            <IconButton size="small">
+              <Help sx={{
+                fontSize: '1.2rem',
+                color: '#1976d2'
+              }} />
+            </IconButton>
+          </Tooltip>
+          {isExpanded ?
+            <ExpandLess sx={{ color: '#1976d2' }} /> :
+            <ExpandMore sx={{ color: '#1976d2' }} />
+          }
+        </StyledLabel>
+      </div>
+      {isExpanded && (
+        <div style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'flex-end',
+          gap: '1em',
+          marginBottom: '15px',
+        }}>
+          <textarea
+            id='query-input'
+            value={inputQuery}
+            onChange={handleQueryChange}
+            style={{
+              width: '100%',
+              height: '7em',
+              padding: '0.5em',
+              resize: 'vertical',
+              fontFamily: 'monospace',
+            }}
+          />
+          <Button
+            variant="contained"
+            onClick={handleQuerySubmit}
+          >
+            Execute
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

webapp/src/components/scatter/ScatterPlot.tsx

@@ -1,6 +1,8 @@
 import { Scatter } from 'react-chartjs-2';
 import { Chart, LogarithmicScale } from 'chart.js';
 
+import { getBaseUrl } from '@/utils';
+
 Chart.register(LogarithmicScale);
 
 type PlotPoint = {
@@ -17,9 +19,6 @@ type ScatterPlotProps = {
   backgroundColor: string;
 }
 
-const basepath = import.meta.env.BASE_URL
-const baseUrl = `${window.location.protocol}//${window.location.host}${basepath}`.replace(/\/$/, '');
-
 const ScatterPlot = ({ label, data, pullRequests, xKey, yKey, backgroundColor }: ScatterPlotProps) => {
   const chartData = {
     datasets: [{
@@ -72,7 +71,7 @@ const ScatterPlot = ({ label, data, pullRequests, xKey, yKey, backgroundColor }:
             const searchParams = new URLSearchParams();
             searchParams.set(xKey, plot.x.toString());
             searchParams.set(yKey, plot.y.toString());
-            const href = `${baseUrl}/details?${searchParams.toString()}`;
+            const href = `${getBaseUrl()}/details?${searchParams.toString()}`;
 
             window.location.href = href;
           }

webapp/src/components/statistics/PullRequestsCount.tsx

@@ -1,14 +1,12 @@
 import { Line } from 'react-chartjs-2';
 
 import { PRCount } from '@/types';
+import { getBaseUrl } from '@/utils';
 
 type ChartProps = {
     prCounts: PRCount[];
 }
 
-const basepath = import.meta.env.BASE_URL
-const baseUrl = `${window.location.protocol}//${window.location.host}${basepath}`.replace(/\/$/, '');
-
 const PullRequestsCountChart = ({prCounts}: ChartProps) => {
     const authors = [
         {name: "devin-ai-integration", color: 'rgba(0, 180, 170, 1)'},
@@ -56,7 +54,7 @@ const PullRequestsCountChart = ({prCounts}: ChartProps) => {
 
                     const searchParams = new URLSearchParams();
                     searchParams.set('createdAt', date);
-                    const href = `${baseUrl}/details?${searchParams.toString()}`;
+                    const href = `${getBaseUrl()}/details?${searchParams.toString()}`;
 
                     window.location.href = href;
                   }