diff options
| -rw-r--r-- | README.md | 38 | ||||
| -rwxr-xr-x | backend/server.py | 4 | ||||
| -rw-r--r-- | src/App.vue | 4 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 3 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 4 | ||||
| -rw-r--r-- | src/lib.ts | 18 | ||||
| -rw-r--r-- | src/util.ts | 20 | ||||
| -rw-r--r-- | vite.config.js | 3 |
8 files changed, 48 insertions, 46 deletions
@@ -1,25 +1,27 @@ -# Grid of Life +# Tilo +Provides an interactive visualisation of the biological Tree of Life. -An interactive visualisation of the biological tree of life. - -Each tile represents a group of organisms with a common ancestor. -- Clicking on a tile expands it into tiles representing direct descendants. - If there are too many other tiles, there might not be room to expand. -- Clicking on an expanded tile collapses it back into one tile. -- Double-clicking on a tile expands it to fill the whole view. - Other tiles will be moved to the side. - -# Files -- package.json: Contains project information, including what packages need to be installed. +## Files +- package.json: Contains project information, including package dependencies. - src: Contains most of the client-side code. -- index.html: Holds code for the main page, into which code from src/ will be included. -- backend: Contains code for running the server, and generating tree-of-life data -- public: Contains files to be copied unchanged when building for production. +- index.html: Holds code for the main page, into which code from 'src' will be included. +- backend: Contains code for the server, and generating tree-of-life data +- vite.config.js: For configuring Vite. - tailwind.config.js: For configuring Tailwind. - postcss.config.js: For configuring Tailwind. - tsconfig.json: For configuring Typescript. -- vite.config.js: For configuring Vite. - .gitignore: Lists files to be ignored by Git. +- public: Contains files to be copied unchanged when building for production. + +## Overview +(TODO) + +## Setup Instructions +(TODO) + +## -# Overview -# Instructions +During development, a client request to the server on the same machine +would be blocked due to the Same Origin Policy. This is avoided by +adding an 'Access-Control-Allow-Origin: *' header to server responses. +This should be disabled during production. diff --git a/backend/server.py b/backend/server.py index 879c51d..a1f1585 100755 --- a/backend/server.py +++ b/backend/server.py @@ -12,6 +12,7 @@ dbFile = "data/data.db" imgDir = "../public/img/" DEFAULT_SUGG_LIM = 5 MAX_SUGG_LIM = 50 +CORS_ANY_ORIGIN = True # Used during development to avoid Cross-Origin Resource Sharing restrictions usageInfo = f""" Usage: {sys.argv[0]} @@ -312,9 +313,12 @@ class DbServer(BaseHTTPRequestHandler): return self.send_response(404) def respondJson(self, val): + global CORS_ANY_ORIGIN content = jsonpickle.encode(val, unpicklable=False).encode("utf-8") self.send_response(200) self.send_header("Content-type", "application/json") + if CORS_ANY_ORIGIN: + self.send_header("Access-Control-Allow-Origin", "*") if "accept-encoding" in self.headers and "gzip" in self.headers["accept-encoding"]: if len(content) > 100: content = gzip.compress(content, compresslevel=5) diff --git a/src/App.vue b/src/App.vue index d6c1d7a..b0aa328 100644 --- a/src/App.vue +++ b/src/App.vue @@ -83,10 +83,10 @@ import SettingsIcon from './components/icon/SettingsIcon.vue'; import HelpIcon from './components/icon/HelpIcon.vue'; // Other // Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain -import {TolNode, TolMap, Action, UiOptions} from './lib'; +import {TolNode, TolMap, getServerResponse, Action, UiOptions} from './lib'; import {LayoutNode, LayoutOptions, LayoutTreeChg} from './layout'; import {initLayoutTree, initLayoutMap, tryLayout} from './layout'; -import {getServerResponse, getBreakpoint, getScrollBarWidth, arraySum, randWeightedChoice, timeout} from './util'; +import {getBreakpoint, getScrollBarWidth, arraySum, randWeightedChoice, timeout} from './util'; // Type representing auto-mode actions type AutoAction = 'move across' | 'move down' | 'move up' | Action; diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index 4657db2..39bdbdf 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -38,9 +38,8 @@ import {defineComponent, PropType} from 'vue'; import SearchIcon from './icon/SearchIcon.vue'; import LogInIcon from './icon/LogInIcon.vue'; import InfoIcon from './icon/InfoIcon.vue'; -import {TolNode, TolMap, UiOptions, SearchSugg, SearchSuggResponse} from '../lib'; +import {TolNode, TolMap, getServerResponse, SearchSugg, SearchSuggResponse, UiOptions} from '../lib'; import {LayoutNode, LayoutOptions} from '../layout'; -import {getServerResponse} from '../util'; export default defineComponent({ props: { diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 7d402bb..4e65f9d 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -59,8 +59,8 @@ import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; import {LayoutNode, LayoutOptions} from '../layout'; -import {TolNode, TolMap, UiOptions, DescInfo, ImgInfo, NodeInfo, InfoResponse} from '../lib'; -import {getServerResponse, capitalizeWords} from '../util'; +import {TolNode, TolMap, getServerResponse, DescInfo, ImgInfo, NodeInfo, InfoResponse, UiOptions} from '../lib'; +import {capitalizeWords} from '../util'; export default defineComponent({ props: { @@ -25,6 +25,24 @@ export class TolNode { // Maps TolNode names to TolNode objects export type TolMap = Map<string, TolNode>; +// For server requests +const SERVER_URL = 'http://localhost:8000' +export async function getServerResponse(path: string, params: string){ + // Construct URL + let url = new URL(SERVER_URL); + url.pathname = path; + url.search = params; + // Query server + let responseObj; + try { + let response = await fetch(url.toString()); + responseObj = await response.json(); + } catch (error){ + console.log(`Error with querying ${url}: ${error}`); + return null; + } + return responseObj; +} // For server search responses export type SearchSugg = { // Represents a search-string suggestion name: string, diff --git a/src/util.ts b/src/util.ts index 1ed019c..907cce5 100644 --- a/src/util.ts +++ b/src/util.ts @@ -2,23 +2,6 @@ * General utility functions */ -// For server requests -export async function getServerResponse(path: string, params: string){ - // Construct URL - let url = new URL(window.location.href); - url.pathname = path; - url.search = params; - // Query server - let responseObj; - try { - let response = await fetch(url.toString()); - responseObj = await response.json(); - } catch (error){ - console.log(`Error with querying ${url}: ${error}`); - return null; - } - return responseObj; -} // For detecting screen size export type Breakpoint = 'sm' | 'md' | 'lg'; export function getBreakpoint(): Breakpoint { @@ -31,8 +14,7 @@ export function getBreakpoint(): Breakpoint { return 'lg'; } } -// Dynamically obtains scroll bar width -// From stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript +// For getting scroll-bar width // From stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript export function getScrollBarWidth(){ // Create hidden outer div let outer = document.createElement('div'); diff --git a/vite.config.js b/vite.config.js index 2e470fc..40f62d7 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,9 +4,6 @@ import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { - proxy: { - '/data': 'http://localhost:8000', - }, watch: { ignored: ['**/backend', '**/public'] }, |