added formatURI, added absolute imports, fixed demo data, added workf…

…lows (#7)

* added formatURI, added absolute imports, fixed demo data

* added github actions

* added environment variables

---------

Co-authored-by: Harry Li <[email protected]>

.github/workflows/client-build.yml

@@ -0,0 +1,48 @@
+# Simple workflow for ensuring the site builds properly
+name: Ensure the site builds properly
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  pull_request:
+    branches: [ "main" ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'build'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Set env
+        shell: bash
+        run: |
+          echo "VITE_OPENAI_API_KEY=test" >> $GITHUB_ENV
+          echo "VITE_DEMO_MODE=true" >> $GITHUB_ENV
+          echo "GITHUB_PAGES=true" >> $GITHUB_ENV
+      - name: Build
+        run: npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,57 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy site to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Set env
+        shell: bash
+        run: |
+          echo "VITE_OPENAI_API_KEY=test" >> $GITHUB_ENV
+          echo "VITE_DEMO_MODE=true" >> $GITHUB_ENV
+          echo "GITHUB_PAGES=true" >> $GITHUB_ENV
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload build folder
+          path: './build'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -53,6 +53,7 @@
     "typescript": "^5.2.2",
     "undici": "^6.19.8",
     "vite": "^5.1.0",
-    "vite-plugin-commonjs": "^0.10.1"
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

src/App.tsx

@@ -1,17 +1,21 @@
 // Copyright (c) 2024 Massachusetts Institute of Technology
 // SPDX-License-Identifier: MIT
-import { QueryEditor } from './components/QueryEditor/QueryEditor'
-import { ResultsTable } from './components/ResultsTable/ResultsTable';
-import { Chat } from './components/Chat/Chat';
-import { IDTableContainer } from './components/IDTable/IDTable';
 import { Title } from '@mantine/core';
-import { ErrorMessage } from './components/ErrorMessage';
-import { useRunQuery, RunQueryProvider } from './hooks/useRunQuery';
-import {QueryVisualization} from "./components/QueryVisualization/QueryVisualization";
-import { useAppSelector } from './redux/store';
-import styles from './App.module.scss'
-import { DemoModeModal } from './components/DemoModeModal';
-import { ApiKeyWarning } from './components/ApiKeyWarning';
+
+import { ApiKeyWarning } from 'components/ApiKeyWarning';
+import { Chat } from 'components/Chat/Chat';
+import { DemoModeModal } from 'components/DemoModeModal';
+import { ErrorMessage } from 'components/ErrorMessage';
+import { IDTableContainer } from 'components/IDTable/IDTable';
+import { QueryEditor } from 'components/QueryEditor/QueryEditor'
+import { QueryVisualization } from "components/QueryVisualization/QueryVisualization";
+import { ResultsTable } from 'components/ResultsTable/ResultsTable';
+
+import { useAppSelector } from 'redux/store';
+
+import { useRunQuery, RunQueryProvider } from 'hooks/useRunQuery';
+
+import styles from 'App.module.scss'
 
 
 function App() {

src/components/ApiKeyWarning.tsx

@@ -1,5 +1,9 @@
-import { useAppSelector } from "../redux/store"
-import { IS_DEMO_MODE } from "../utils/demoData"
+// Copyright (c) 2024 Massachusetts Institute of Technology
+// SPDX-License-Identifier: MIT
+
+import { useAppSelector } from "redux/store"
+
+import { IS_DEMO_MODE } from "utils/demoData"
 
 export function ApiKeyWarning() {
   const apiKey = useAppSelector((state) => state.settings.apiKey)

src/components/Chat/Chat.tsx

@@ -6,20 +6,23 @@ import { StreamLanguage } from '@codemirror/language';
 import { sparql } from '@codemirror/legacy-modes/mode/sparql';
 import { ActionIcon, Button, Checkbox, Modal, TextInput } from "@mantine/core";
 import { useEffect, useMemo, useRef, useState } from "react";
-import styles from "./Chat.module.scss"
 import { useMutation } from "@tanstack/react-query";
 import { IconCaretRight, IconSettings, IconZoomCode } from '@tabler/icons-react';
-import { ErrorMessage } from '../ErrorMessage';
-import { useRunQuery } from '../../hooks/useRunQuery';
-import { useAppDispatch, useAppSelector } from '../../redux/store';
 
-import { setQueryValue } from '../../redux/queryValueSlice';
-import { useMakeChatGPTAPIInstance } from '../../hooks/useMakeChatGPTAPIInstance';
-import { addMessageToSimpleChatHistory, toggleShowFullChatHistory } from '../../redux/chatHistorySlice';
-import { INITIAL_SYSTEM_MESSAGE } from '../../utils/knowledgeBase/prompts';
-import { handleUserChat } from '../../utils/handleUserChat';
-import { tryParsingOutQuery } from '../../utils/tryParsingOutQuery';
+import { ErrorMessage } from 'components/ErrorMessage';
+
+import { useMakeChatGPTAPIInstance } from 'hooks/useMakeChatGPTAPIInstance';
+import { useRunQuery } from 'hooks/useRunQuery';
+
+import { addMessageToSimpleChatHistory, toggleShowFullChatHistory } from 'redux/chatHistorySlice';
+import { setQueryValue } from 'redux/queryValueSlice';
+import { useAppDispatch, useAppSelector } from 'redux/store';
 
+import { handleUserChat } from 'utils/handleUserChat';
+import { INITIAL_SYSTEM_MESSAGE } from 'utils/knowledgeBase/prompts';
+import { tryParsingOutQuery } from 'utils/tryParsingOutQuery';
+
+import styles from "./Chat.module.scss"
 
 
 export function Chat() {

src/components/DemoModeModal.tsx

@@ -1,7 +1,11 @@
+// Copyright (c) 2024 Massachusetts Institute of Technology
+// SPDX-License-Identifier: MIT
+
 import { Button, Modal } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconBrandGithub } from "@tabler/icons-react";
-import { IS_DEMO_MODE } from "../utils/demoData";
+
+import { IS_DEMO_MODE } from "utils/demoData";
 
 export function DemoModeModal() {
   const [opened, { close }] = useDisclosure(true);

src/components/IDTable/IDTable.tsx

@@ -1,11 +1,15 @@
 // Copyright (c) 2024 Massachusetts Institute of Technology
 // SPDX-License-Identifier: MIT
 
-import { useQueryGetIDTableEntitiesFromQuery } from "../../utils/knowledgeBase/getEntityData";
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Table, Title } from "@mantine/core";
-import { useAppSelector } from "../../redux/store";
-import { IDTableEntitiesType } from "../../types/idTable";
+
+import { useAppSelector } from "redux/store";
+
+import { IDTableEntitiesType } from "types/idTable";
+
+import { useQueryGetIDTableEntitiesFromQuery } from "utils/knowledgeBase/getEntityData";
+
 import styles from "./IDTable.module.scss"
 
 export function IDTableContainer () {

src/components/QueryEditor/QueryEditor.tsx

@@ -8,12 +8,13 @@ import { useDisclosure } from '@mantine/hooks';
 import { ActionIcon, Button, Divider, Modal, Title } from '@mantine/core';
 import { IconCaretRight, IconHistory } from '@tabler/icons-react';
 
-import styles from "./QueryEditor.module.scss"
-import { useAppDispatch, useAppSelector } from '../../redux/store';
-import { setQueryValue } from '../../redux/queryValueSlice';
-import { setResults } from '../../redux/resultsSlice';
-import { useRunQuery } from '../../hooks/useRunQuery';
+import { setResults } from 'redux/resultsSlice';
+import { setQueryValue } from 'redux/queryValueSlice';
+import { useAppDispatch, useAppSelector } from 'redux/store';
+
+import { useRunQuery } from 'hooks/useRunQuery';
 
+import styles from "./QueryEditor.module.scss"
 
 export function QueryEditor() {
   const dispatch = useAppDispatch()

src/components/QueryVisualization/QueryGraph/QueryGraph.tsx

@@ -1,13 +1,17 @@
 // Copyright (c) 2024 Massachusetts Institute of Technology
 // SPDX-License-Identifier: MIT
-import Graphin, {Components, LegendChildrenProps} from "@antv/graphin";
-import {parseSparqlQuery} from "../../../utils/parseSparqlQuery.ts";
-import {useQueryGetIDTableEntitiesFromQuery} from "../../../utils/knowledgeBase/getEntityData.ts";
-import {transformTripleQueryToGraphin} from "../../../utils/transformTripleDataToGraphin.ts";
+
 import {useMemo} from "react";
-import { Title } from '@mantine/core';
+
+import Graphin, {Components, LegendChildrenProps} from "@antv/graphin";
 import '@antv/graphin/dist/index.css';
-import { useAppSelector } from "../../../redux/store.ts";
+import { Title } from '@mantine/core';
+
+import { useAppSelector } from "redux/store.ts";
+
+import { parseSparqlQuery } from "utils/parseSparqlQuery.ts";
+import { transformTripleQueryToGraphin } from "utils/transformTripleDataToGraphin.ts";
+import { useQueryGetIDTableEntitiesFromQuery } from "utils/knowledgeBase/getEntityData.ts";
 
 const { Legend } = Components;
 

src/components/QueryVisualization/QueryVisualization.tsx

@@ -1,9 +1,11 @@
 // Copyright (c) 2024 Massachusetts Institute of Technology
 // SPDX-License-Identifier: MIT
-import {QueryGraph} from "./QueryGraph/QueryGraph.tsx";
-import {ErrorBoundary} from "react-error-boundary";
-import {useEffect, useState} from "react";
-import { useAppSelector } from "../../redux/store.ts";
+import { ErrorBoundary } from "react-error-boundary";
+import { useEffect, useState } from "react";
+
+import { useAppSelector } from "redux/store.ts";
+
+import { QueryGraph } from "./QueryGraph/QueryGraph.tsx";
 
 const QueryVisualizationFallback = () => {
     return (<></>)

src/components/ResultsTable/ResultsTable.tsx

@@ -1,9 +1,10 @@
 // Copyright (c) 2024 Massachusetts Institute of Technology
 // SPDX-License-Identifier: MIT
 
-import { SparqlBindingType, SparqlValueObjectType, SparqlResultsJsonType } from "../../types/sparql";
+import { SparqlBindingType, SparqlValueObjectType, SparqlResultsJsonType } from "types/sparql";
 import { useReactTable, flexRender, createColumnHelper, getCoreRowModel } from "@tanstack/react-table"
-import { downloadJson } from "../../utils/downloadJson";
+import { downloadJson } from "utils/downloadJson";
+import { formatURI, getHrefFromURI } from "utils/knowledgeBase/formatURI";
 
 import { ActionIcon, Table } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
@@ -84,7 +85,7 @@ function renderCell(cell:SparqlValueObjectType):React.ReactNode {
     return <img src={cell.value}/>
   }
   if(cell.type === "uri") {
-    return <a href={cell.value} target="_blank">{cell.value.replace("http://www.wikidata.org/","")}</a>
+    return <a href={getHrefFromURI(cell.value)} target="_blank">{formatURI(cell.value)}</a>
   }
   return cell.value
 }