From ac68205769343c1a427e60cb5b76d1673ba1398e Mon Sep 17 00:00:00 2001 From: ecrum19 Date: Mon, 1 Sep 2025 14:30:51 +0200 Subject: [PATCH 1/7] added dark mode and other UI improvements --- src/assets/main.css | 4 +- src/assets/theme.css | 142 ++++++++ src/components/ContainerNav.vue | 23 +- src/components/DataQuery.vue | 256 +++++++------- src/components/EditPrivacy.vue | 3 + src/components/Guides/DataQueryGuide.vue | 18 +- src/components/Guides/DataUploadGuide.vue | 103 ++++++ src/components/Guides/LandingGuide.vue | 34 +- src/components/Guides/PodBrowserGuide.vue | 118 +++++++ src/components/LandingPage.vue | 21 +- src/components/PodBrowser.vue | 320 ++++++++++++++---- src/components/PodLogin.vue | 19 +- src/components/PodRegistration.vue | 2 + src/components/PodUpload.vue | 354 ++++++++++---------- src/components/Styling/FunctionSelector.vue | 7 +- src/components/Styling/TheFooter.vue | 4 +- src/components/Styling/TheHeader.vue | 82 +++-- src/components/Styling/ThemeSwitch.vue | 92 +++++ src/components/Styling/useTheme.ts | 40 +++ src/components/fileUpload.ts | 1 + src/main.ts | 25 +- 21 files changed, 1208 insertions(+), 460 deletions(-) create mode 100644 src/assets/theme.css create mode 100644 src/components/Guides/DataUploadGuide.vue create mode 100644 src/components/Guides/PodBrowserGuide.vue create mode 100644 src/components/Styling/ThemeSwitch.vue create mode 100644 src/components/Styling/useTheme.ts diff --git a/src/assets/main.css b/src/assets/main.css index 4a0b1028..1d9b187f 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,5 +1,5 @@ body { - background-color: #a9a7ad; + background-color: var(--bg); margin: 0; } @@ -8,7 +8,7 @@ body { flex-direction: column; min-height: 80vh; min-height: 80dvh; - color: #EDE7F6; /* This sets the text color inside the #app div to a dark grey */ + color: var(--text); } #footer { diff --git a/src/assets/theme.css b/src/assets/theme.css new file mode 100644 index 00000000..33814751 --- /dev/null +++ b/src/assets/theme.css @@ -0,0 +1,142 @@ +:root { + --main: #445560; + --main-darker: #37474f; + --main-darker2: #28353e; + --main-gray: #bfbdc4; + --main-dark-gray: #1e1e1e; + --main-purple: #754ff6; + --main-purple-dark: #5728d9; + --main-purple-darker: #201054; + --main-white: #ede7f6; + --main-black: #000000; + + --purple: hsl(262 92% 65%); /* #8a42f4 */ + --teal: hsl(200 26% 26%); /* #344952 */ + --ink: hsl(210 15% 12%); /* #1a1f21 */ + --gray-50: hsl(260 20% 98%); /* #fafafc */ + --gray-100: hsl(255 18% 96%); /* #f3f2f8 */ + --gray-200: hsl(250 14% 90%); /* #e3e1e8 */ + --gray-300: hsl(240 10% 84%); /* #d2d1d8 */ + --gray-400: hsl(230 9% 70%); /* #adacb3 */ + --gray-500: hsl(220 8% 56%); /* #888990 */ + --gray-600: hsl(215 11% 40%); /* #5b6269 */ + --gray-700: hsl(210 15% 30%); /* #414b52 */ + --gray-800: hsl(205 18% 22%); /* #2d3a42 */ + --gray-900: hsl(200 20% 12%); /* #181e21 */ + + /* radii & shadow */ + --radius: 14px; + --shadow-1: 0 1px 2px hsl(0 0% 0% / 0.06), 0 1px 1px hsl(0 0% 0% / 0.04); /* #000000 */ + --shadow-2: 0 8px 24px hsl(220 40% 2% / 0.22), + 0 2px 8px hsl(220 40% 2% / 0.18); /* #040508 */ +} + +/* --------------------------- + Light theme (default) + --------------------------- */ +:root { + --bg: var(--gray-300); /* #d2d1d8 */ + --bg-secondary: var(--gray-400); /* #adacb3 */ + --panel: var(--main-gray); /* #ffffff */ + --panel-elev: hsl(0 0% 100%); /* #ffffff */ + --muted: hsl(250 14% 90%); /* #e3e1e8 */ + --border: var(--main-white); + --text-primary: var(--gray-900); + --text-secondary: var(--ink); + --text-muted: hsl(215 11% 40%); /* #5b6269 */ + --primary: var(--main-purple); + --primary-600: hsl(262 92% 58%); /* #6f23ec */ + --primary-700: hsl(262 92% 52%); /* #5b09e5 */ + --primary-100: hsl(262 92% 95%); /* #f2ebfd */ + --accent: hsl(195 85% 48%); /* #1ba9e0 */ + --accent-100: hsl(195 85% 94%); /* #e4f6fc */ + --accent-700: hsl(195 85% 36%); /* #107eab */ + + --success: hsl(160 72% 42%); /* #1fba74 */ + --warning: hsl(35 92% 50%); /* #f7a611 */ + --danger: #ff7f7fbb; + --info: hsl(195 85% 48%); /* #1ba9e0 */ + + --focus-ring: 2px solid hsl(262 92% 65% / 0.7); /* #8a42f4 */ + --hover: #764ff633; + --active: hsl(210 15% 12% / 0.08); /* #1a1f21 */ + + --yasqe-bg: var(--main-white); + --yasqe-bg-2: var(--gray-200); + --yasqe-keyword: #5f3df1; + --yasqe-atom: #865700; + --yasqe-variable-2: #1f6feb; + --yasqe-string: #2e7d32; + --yasqe-string-2: #d32f45; + --yasqe-variable-3: #0e8a6a; + --yasqe-number: #6e56cf; + --yasqe-comment: #6b7280; + --yasqe-operator: #0b7fd3; + --yasqe-meta: #8a6d1a; + --yasqe-matchhighlight-bg: #fff2a8; + --yasqe-cursor: #7b61ff; + --yasqe-selected: #a0a0d8; +} + +/* --------------------------- + Dark theme (stealth) + --------------------------- */ +:root[data-theme="dark"] { + --bg: hsl(200 26% 14%); /* #19262b */ + --bg-secondary: var(--main-darker); + --panel: hsl(200 20% 18%); /* #242e33 */ + --panel-elev: hsl(200 20% 22%); /* #2b3840 */ + --muted: hsl(200 14% 28%); /* #3c474c */ + --border: hsl(200 10% 34%); /* #4f585c */ + --text-primary: var(--gray-300); + --text-secondary: var(--main-white); + --text-muted: hsl(260 14% 72%); /* #b3b0be */ + --primary: var(--main-purple); + --primary-600: hsl(262 92% 58%); /* #6f23ec */ + --primary-700: hsl(262 92% 50%); /* #5605e0 */ + --primary-100: hsl(262 92% 20%); /* #1b023b */ + --accent: hsl(195 85% 48%); /* #1ba9e0 */ + --accent-100: hsl(195 85% 22%); /* #083a4d */ + --accent-700: hsl(195 85% 60%); /* #4dc0ec */ + + --success: hsl(160 72% 46%); /* #26c980 */ + --warning: hsl(35 92% 58%); /* #f8ad29 */ + --danger: #ff7f7fbb; + --info: hsl(195 85% 54%); /* #34b8e6 */ + + --focus-ring: 2px solid hsl(262 92% 65% / 0.8); /* #8a42f4 */ + --hover: hsl(0 0% 100% / 0.03); /* #ffffff */ + --active: hsl(0 0% 100% / 0.06); /* #ffffff */ + + --yasqe-bg: var(--ink); + --yasqe-bg-2: var(--main-darker2); + --yasqe-keyword: #c792ea; + --yasqe-atom: #f78c6c; + --yasqe-variable-2: #82aaff; + --yasqe-string: #c3e88d; + --yasqe-string-2: #ff5370; + --yasqe-variable-3: #a0fa87; + --yasqe-number: #ede7f6; + --yasqe-comment: #a9a7ad; + --yasqe-operator: #89ddff; + --yasqe-meta: #ffcb6b; + --yasqe-matchhighlight: #5f5f5f; + --yasqe-cursor: #ffcc00; + --yasqe-selected: #292929; +} + +/* sensible global defaults */ +:where(html, body) { + background: var(--bg); + color: var(--text); +} + +/* optional: smoothen transitions between themes */ +* { + transition: background-color 0.18s ease, color 0.18s ease, + border-color 0.18s ease; +} + +:root { + --v-font-family: "Oxanium", monospace; +} diff --git a/src/components/ContainerNav.vue b/src/components/ContainerNav.vue index 1a2609e2..9e1e494c 100644 --- a/src/components/ContainerNav.vue +++ b/src/components/ContainerNav.vue @@ -160,11 +160,16 @@ export default defineComponent({ list-style-type: none; padding-left: 1rem; margin-left: 0; + color: var(--text-secondary); } .dir-nav { padding: 1rem; } - +.dir-nav li { + display: flex; + justify-content: center; + align-items: center; +} .directory-nav span { font-size: 16pt; font-family: "Oxanium", monospace; @@ -181,17 +186,21 @@ export default defineComponent({ margin-left: 15px; gap: 20px; } - -.select-dir .v-btn { - margin-bottom: 15px; -} .select-dir .v-select { min-width: 150px; - margin-top: 15px; font-family: "Oxanium", monospace; } .navigate-btn { font-family: "Oxanium", monospace; - margin-top: 10px; + background-color: var(--primary); +} +.navigate-btn:hover { + background-color: var(--primary-700); +} +:deep(.v-input__details) { + display:none; +} +:deep(.v-field__loader) { + display:none; } diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue index d2ae4512..695ebfe7 100644 --- a/src/components/DataQuery.vue +++ b/src/components/DataQuery.vue @@ -1232,7 +1232,7 @@ body { padding: 20px; background: #445560; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-1); } .tool-tip { font-family: "Oxanium", monospace; @@ -1240,7 +1240,7 @@ body { /* Title bar */ .title-container { - background-color: #445560; + background-color: var(--bg-secondary); border-radius: 8px; margin: 0.5rem 0.5rem 0 0.5rem; } @@ -1250,6 +1250,7 @@ body { font-weight: 500; padding-left: 20px; padding-right: 20px; + color: var(--text-primary); } .login-container { margin: 0.5rem 0.25rem 0 0.25rem; @@ -1258,7 +1259,7 @@ body { /* loading spinner for login-check */ .loading-spinner-container { display: flex; - background-color: #445560; + background-color: var(--panel); border-radius: 6px; align-items: center; justify-content: flex-start; @@ -1272,11 +1273,13 @@ body { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.5px; + color: var(--text-primary); } /* Container pod-chooser bar */ .pod-chooseContainer { - background: #445560; + display: flex; + background: var(--bg-secondary); border-radius: 8px; padding: 0 0 0 1rem; margin: 0.5rem 0.5rem 0 0.5rem; @@ -1284,16 +1287,20 @@ body { /* Whole nav and query container */ .general-container { - background-color: #445560; + background-color: var(--bg-secondary); border-radius: 8px; margin: 0.5rem; display: flex; } /* Left nav bar */ +.general-container :deep(.v-input__details) { + display: none !important; +} .nav-container { display: flex; - background-color: #28353e; + background-color: var(--panel); + border: 2px solid var(--border); border-radius: 8px; font-family: "Oxanium", monospace; font-size: 14pt; @@ -1304,37 +1311,38 @@ body { padding: 10px; height: 100%; overflow: auto; + color: var(--text-secondary); } .nav-container li span { font-size: 18pt; font-weight: bold; padding: 10px 8px 4px 8px; text-decoration: none; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--border); } #top-button { margin-top: 10px; } .nav-container li button { display: block; - color: #ede7f6; + color: var(--text-secondary); width: 100%; border-radius: 4px; padding: 0.8rem 1.2rem; text-decoration: none; } .nav-container li button.active { - background-color: #04aa6d; - color: white; + background-color: var(--success); + color: var(--main-white); } .nav-container li button:hover:not(.active) { - background-color: #555; - color: white; + background-color: var(--hover); + color: var(--text-muted); width: 100%; } .nav-container .highlight { - background-color: #754ff6; - color: #ede7f6; + background-color: var(--primary); + color: var(--main-white); } /* Query elements */ @@ -1370,6 +1378,7 @@ body { display: flex; align-items: center; justify-content: space-between; + color: var(--text-secondary); } .top-container .top-label span { display: flex; @@ -1384,76 +1393,79 @@ body { } /* Query Container Customizations */ #yasqe-container { - border: 3px solid #1e1e1e; + border: 3px solid var(--yasqe-bg); border-radius: 8px; margin-bottom: 1rem; } #yasqe-container :deep(.CodeMirror-gutters) { - background-color: #1e1e1e; + background-color: var(--yasqe-bg); } #yasqe-container :deep(.resizeWrapper) { - background-color: #1e1e1e; + background-color: var(--yasqe-bg); } #yasqe-container :deep(.CodeMirror) { - background-color: #28353e; - border: 1px solid #1e1e1e; + background-color: var(--yasqe-bg-2); + border: 1px solid var(--yasqe-bg); color: #ede7f6; } #yasqe-container :deep(.CodeMirror-linenumber) { padding: 0; } #yasqe-container :deep(.notification.notif_property) { - background-color: #28353e; + background-color: var(--yasqe-bg); padding: 0; color: #a9a7ad; } #yasqe-container :deep(.notification.active) { - background-color: #28353e; + background-color: var(--yasqe-bg); padding: 0; - color: #a9a7ad; + color: var(--text-muted); } #yasqe-container :deep(.yasqe_buttons) { display: none; } /* TODO: Change colors to look nicer */ #yasqe-container :deep(.cm-keyword) { - color: #c792ea; /* Example: purple for keywords like SELECT, WHERE */ + color: var(--yasqe-keyword); /* Example: purple for keywords like SELECT, WHERE */ } #yasqe-container :deep(.cm-atom) { - color: #f78c6c; /* Example: orange for atoms like 'a' */ + color: var(--yasqe-atom); /* Example: orange for atoms like 'a' */ } #yasqe-container :deep(.cm-variable-2) { - color: #82aaff; /* Example: blue for variables like ?s */ + color: var(--yasqe-variable-2); /* Example: blue for variables like ?s */ } #yasqe-container :deep(.cm-string) { - color: #c3e88d; /* Example: green for string literals */ + color: var(--yasqe-string); /* Example: green for string literals */ } #yasqe-container :deep(.cm-string-2) { - color: #ff5370; /* Example: red for IRI's like */ + color: var(--yasqe-string-2); /* Example: red for IRI's like */ } #yasqe-container :deep(.cm-variable-3) { - color: #a0fa87; /* Example: red for IRI's like */ + color: var(--yasqe-variable-3); /* Example: red for IRI's like */ } #yasqe-container :deep(.cm-number) { - color: #ede7f6; /* Example: red for IRI's like */ + color: var(--yasqe-number); /* Example: red for IRI's like */ } #yasqe-container :deep(.cm-comment) { - color: #a9a7ad; /* Example: grey for comments */ + color: var(--yasqe-comment); /* Example: grey for comments */ } #yasqe-container :deep(.cm-operator) { - color: #89ddff; /* Example: light blue for operators */ + color: var(--yasqe-operator); /* Example: light blue for operators */ } #yasqe-container :deep(.cm-meta) { - color: #ffcb6b; /* Example: yellow for PREFIX */ + color: var(--yasqe-meta); /* Example: yellow for PREFIX */ +} +#yasqe-container :deep(.cm-punc) { + color: var(--text-primary); /* Example: yellow for PREFIX */ } #yasqe-container :deep(.cm-matchhighlight) { - background-color: #5f5f5f; /* Example: yellow for PREFIX */ + background-color: var(--yasqe-matchhighlight); /* Example: yellow for PREFIX */ } #yasqe-container :deep(.CodeMirror-cursor) { - border-left: 1px solid #ffcc00; /* Example: yellow cursor */ + border-left: 1px solid var(--yasqe-cursor); /* Example: yellow cursor */ } #yasqe-container :deep(.CodeMirror-selected) { - background: #545454; /* Example: dark grey for selection */ + background: var(--yasqe-selected); /* Example: dark grey for selection */ } /* source designation */ @@ -1462,12 +1474,14 @@ body { align-items: center; border-radius: 4px; margin: 0.2rem 0.2rem 0.4rem 0.2rem; - outline: #28353e 3px solid; + outline: 3px solid var(--yasqe-bg); + color: var(--text-secondary); } .source-selection span { font-size: 16pt; font-weight: 600; padding: 4px 8px 4px 8px; + color: var(--text-secondary); } .source-selection .autocomplete { padding: 0; @@ -1495,36 +1509,41 @@ body { /* execute */ .execute-button { padding: 8px 14px; - border: 2px solid #28353e; + border: 2px solid var(--yasqe-bg); border-radius: 8px; + color: var(--text-secondary); } .cancel-query { padding: 8px 14px; - border: 2px solid #28353e; + border: 2px solid var(--yasqe-bg); border-radius: 8px; + color: var(--text-secondary); } .query-container .execute-button:hover { - background-color: #754ff6; + background-color: var(--primary); + color: var(--main-white); } .query-container .execute-button:disabled { - background-color: #888; + background-color: var(--text-muted); cursor: not-allowed; } .sparql-guide { padding-left: 0.5rem; margin-left: auto; + color: var(--text-muted); } .clear-button { padding: 8px 14px; margin-right: 1rem; - border: 2px solid #28353e; + border: 2px solid var(--yasqe-bg); border-radius: 8px; + color: var(--text-secondary); } .query-container .clear-button:hover { - background-color: #ff7f7fbb; + background-color: var(--danger); } .query-container .clear-button:disabled { - background-color: #888; + background-color: var(--text-muted); cursor: not-allowed; } .save-query { @@ -1532,13 +1551,14 @@ body { align-items: center; margin-left: 1rem; gap: 1rem; + color: var(--text-secondary); } .save-checkbox { padding: 0px 0px 0px 20px; } .save-info { padding: 0px 0px 0px 10px; - color: #a9aeb1; + color: var(--text-muted); } /* message in past queries when no pod is connected */ .no-pod { @@ -1550,7 +1570,7 @@ body { /* Past Queries Display */ .query-catalog { - background-color: #445560; + background-color: var(--panel); border-radius: 8px; margin-top: 10px; display: flex; @@ -1574,7 +1594,7 @@ body { .cached-title { font-size: 24px; font-weight: bold; - color: #ede7f6; + color: var(--text-secondary); margin-bottom: 20px; } /* Query List Items */ @@ -1587,14 +1607,14 @@ ul { display: flex; flex-direction: column; width: 100%; - background-color: #28353e; + background-color: var(--bg); border-radius: 8px; padding: 16px; margin: 10px 0; transition: all 0.3s ease-in-out; } .folder:hover { - background-color: #37474f; + background-color: var(--panel); cursor: pointer; } /* Folder Header */ @@ -1620,7 +1640,7 @@ ul { font-family: "Oxanium", monospace; font-size: large; font-weight: 600; - color: white; + color: var(--text-secondary); transition: background 0.3s ease-in-out; } /* Ensure full-width coverage */ @@ -1648,26 +1668,26 @@ ul { flex-grow: 1; text-align: left; padding-left: 10px; - color: #ede7f6; + color: var(--text-secondary); } .card-panel .not-colored { - color: #ede7f6; + color: var(--text-secondary); } /* Query Details (Hidden by Default) */ .specific-query { display: flex; flex-direction: column; justify-content: space-between; - background: #1e1e1e; + background: var(--panel); padding: 10px; margin-top: 10px; border-radius: 5px; - color: white; + color: var(--text-secondary); } /* Query Details Spacing */ .specific-query div { padding: 8px; - border-bottom: 1px solid #444; + border-bottom: 1px solid var(--border); } .specific-query div:last-child { border-bottom: none; @@ -1675,11 +1695,11 @@ ul { /* Query Labels */ .user-tag { font-weight: bold; - color: #ede7f6; + color: var(--text-secondary); } /* Query Data */ .the-user { - color: #90caf9; + color: var(--yasqe-variable-2); font-style: italic; } /* Query Sources */ @@ -1690,7 +1710,7 @@ ul { list-style-type: disc; } .query-sources a { - color: #ffab40; + color: var(--yasqe-keyword); text-decoration: none; } .query-sources a:hover { @@ -1710,15 +1730,15 @@ ul { } /* SPARQL Code Box */ .sparql-box { - background-color: #1e1e1e; - color: #dcdcdc; + background-color: var(--bg); + color: var(--text-secondary); padding: 15px; border-radius: 6px; font-family: "Courier New", monospace; font-size: 14px; overflow-x: auto; max-height: 250px; - border-left: 4px solid #754ff6; + border-left: 4px solid var(--primary); } /* Syntax Formatting */ .sparql-box pre { @@ -1729,7 +1749,7 @@ ul { .sparql-box code { display: block; padding: 5px; - color: #ede7f6; + color: var(--text-secondary); } /* Displayed query results from .json file */ .query-results { @@ -1746,9 +1766,9 @@ ul { border-radius: 6px; margin: 0 0.5rem 0.5rem 0.5rem; padding: 1rem; - background-color: #28353e; - color: #ede7f6; - scrollbar-color: #a9a7ad #1e1e1e; + background-color: var(--bg-secondary); + color: var(--text-secondary); + scrollbar-color: dark; scrollbar-width: thin; } /* Loading Spinner */ @@ -1789,12 +1809,12 @@ ul { /* YASR Results Display Customizations */ #yasr-container :deep(.yasr) { font-family: "Oxanium", monospace; - background-color: #1e1e1e; - color: #ede7f6 !important; + background-color: var(--yasqe-bg); + color: var(--text-secondary) !important; border-radius: 8px; padding: 0; margin-top: 0.5rem; - border: 2px solid #1e1e1e; + border: 2px solid var(--border); } #yasr-container :deep(.grip-container) { padding-top: 0.4rem; @@ -1816,25 +1836,25 @@ ul { border-bottom: none; } #yasr-container :deep(.yasr_btn) { - color: #a9a7ad; + color: var(--text-secondary); } #yasr-container :deep(.yasr_btn.select_table.selected) { - color: #ede7f6 !important; - border-bottom: 3px solid #5728d9; + color: var(--text-secondary) !important; + border-bottom: 3px solid var(--primary); } #yasr-container :deep(.yasr_btn.select_response.selected) { - color: #ede7f6 !important; - border-bottom: 3px solid #5728d9; + color: var(--text-secondary) !important; + border-bottom: 3px solid var(--primary); } #yasr-container :deep(.yasr_btnGroup) { - color: #ede7f6 !important; + color: var(--text-secondary) !important; } #yasr-container :deep(.yasr_download_control) { margin-left: auto; } #yasr-container :deep(.tableControls div) { padding: 0 1rem 0 1.5rem; - border-left: 1px solid #f8f8f8; + border-left: 1px solid var(--bg-secondary); } #yasr-container :deep(.yasr_plugin_control label span) { margin: 0 0.5rem 0 0; @@ -1842,29 +1862,29 @@ ul { #yasr-container :deep(.tableFilter) { padding: 0 0.5rem 0 0.5rem; margin-right: 0; - color: #ede7f6; - border-left: 1px solid #f8f8f8; + color: var(--text-secondary); + border-left: 1px solid var(--bg-secondary); text-align: center !important; } #yasr-container :deep(.pageSizeWrapper) { padding: 0 1rem 0 1.5rem !important; text-align: center !important; - border-right: 1px solid #f8f8f8; + border-right: 1px solid var(--bg-secondary); } #yasr-container :deep(.pageSizeWrapper select) { padding: 0; text-align: center !important; - color: #ede7f6; - background-color: #1e1e1e; + color: var(--text-secondary); + background-color: var(--yasqe-bg); } #yasr-container :deep(.yasr_external_ref_btn) { display: none; } #yasr-container :deep(.yasr_btn) { - color: #a9a7ad; + color: var(--text-secondary); } #yasr-container :deep(.yasr_btnGroup) { - color: #ede7f6 !important; + color: var(--text-secondary) !important; } #yasr-container :deep(.yasr_response_chip) { display: none; @@ -1880,22 +1900,22 @@ ul { margin-bottom: 1rem; } #yasr-container :deep(ul.yasr_tabs li) { - background-color: #445560; - border: 1px solid #1e1e1e !important; + background-color: var(--bg); + border: 1px solid var(--border) !important; border-radius: 4px !important; margin-right: 0.5rem; } #yasr-container :deep(ul.yasr_tabs li.active) { - background-color: #754ff6; + background-color: var(--muted); } #yasr-container :deep(ul.yasr_tabs li span) { - color: #ede7f6 !important; + color: var(--text-secondary) !important; } /* Table results */ #yasr-container :deep(.yasr_results) { border-radius: 6px; overflow-x: auto; - scrollbar-color: #a9a7ad #1e1e1e; + scrollbar-color: dark; scrollbar-width: thin; } #yasr-container :deep(.dataTable) { @@ -1903,8 +1923,8 @@ ul { min-width: 100%; } #yasr-container :deep(thead tr th) { - background-color: #5728d9; - color: #ede7f6; + background-color: var(--primary-600); + color: var(--main-white); font-weight: bold; font-size: 13pt; padding: 12px 15px; @@ -1913,19 +1933,19 @@ ul { white-space: normal; } #yasr-container :deep(tbody tr:nth-child(even)) { - background-color: #445560; + background-color: var(--bg); } #yasr-container :deep(tbody tr:nth-child(odd)) { - background-color: #2c363d; + background-color: var(--panel); } #yasr-container :deep(tbody tr:hover) { - background-color: #201054; + background-color: var(--border); cursor: pointer; } #yasr-container :deep(tbody tr td) { padding: 12px 15px; border: none; - border-top: 1px solid #4a4a4a; + border-top: 1px solid var(--border); white-space: normal; /* Allow cell content to wrap */ overflow-wrap: break-word; /* Break long words to prevent overflow */ } @@ -1933,34 +1953,34 @@ ul { border-top: none; } #yasr-container :deep(tbody tr td .nonIri) { - color: #ede7f6; + color: var(--text-secondary); } #yasr-container :deep(tbody tr td .iri) { - color: #ffab40; + color: var(--yasqe-keyword); } #yasr-container :deep(.CodeMirror-lines) { - background-color: #28353e; + background-color: var(--panel); text-decoration: none; } #yasr-container :deep(.CodeMirror-gutters) { - background-color: #1e1e1e; + background-color: var(--yasqe-bg); } #yasr-container :deep(.resizeWrapper) { - background-color: #1e1e1e; + background-color: var(--yasqe-bg); } #yasr-container :deep(.CodeMirror) { - background-color: #28353e; - border: 1px solid #1e1e1e; - color: #ede7f6; + background-color: var(--panel); + border: 1px solid var(--yasqe-bg); + color: var(--text-secondary); } #yasr-container :deep(.CodeMirror-linenumber) { padding: 0; } #yasr-container :deep(.cm-string) { - color: #baa6fc; /* Example: green for string literals */ + color: var(--yasqe-string); /* Example: green for string literals */ } #yasr-container :deep(.cm-property) { - color: #ff5370; /* Example: red for IRI's like */ + color: var(--yasqe-keyword); /* Example: red for IRI's like */ } #yasr-container :deep(.overlay_content) { border-radius: 6px; @@ -1969,30 +1989,30 @@ ul { border-radius: 6px; } #yasr-container ::selection { - background: #5f5f5f; /* highlight background */ - color: #ede7f6; /* highlighted text color */ + background: var(--yasqe-selected); /* highlight background */ + color: var(--yasqe-number); /* highlighted text color */ } #yasr-container :deep(.dataTables_info) { padding-left: 0.5rem; - color: #a9a7ad; + color: var(--text-muted); } #yasr-container :deep(.paginate_button) { - color: #a9a7ad !important; + color: var(--text-muted) !important; } .cache-header { font-family: "Oxanium", monospace; display: flex; align-items: center; - background-color: #444; + background-color: var(--panel); border-radius: 6px; } .query-hash { display: flex; margin-right: auto; margin-left: 2rem; - color: #90caf9; + color: var(--yasqe-keyword); font-style: italic; font-size: 16pt; } @@ -2035,35 +2055,35 @@ ul { } /* Header Styling */ .result-table th { - background-color: #754ff6; - color: EDE7F6; + background-color: var(--primary); font-weight: bold; + color: var(--main-white); } /* Alternate Header colors */ .result-table th:nth-child(even) { - background-color: #5423f6; + background-color: var(--primary-600); } /* Alternating Row Colors */ .result-table tr:nth-child(even) { - background-color: #445560; /* Slightly lighter shade */ + background-color: var(--bg); } .result-table tr:nth-child(odd) { - background-color: #2c363d; /* Slightly lighter shade */ + background-color: var(--panel-elev); } /* Hover Effect */ .result-table tr:hover { - background-color: #201054; /* Light blue highlight */ + background-color: var(--hover); /* Light blue highlight */ cursor: pointer; } /* Sharing of a cached query */ .sharing-prompt { - background-color: #0d1115; + background-color: var(--bg-secondary); border-radius: 8px; - margin-top: 0.25rem; + margin-top: 0.5rem; } .sharing-prompt:hover { - background-color: #764ff633; + background-color: var(--hover); transition: background-color 0.2s ease; } .sharing-button { @@ -2075,7 +2095,7 @@ ul { .new-acl { padding: 0.25rem; margin-top: 5px; - background-color: #ede7f6; + background-color: var(--bg-secondary); color: #445560; border: none; cursor: pointer; diff --git a/src/components/EditPrivacy.vue b/src/components/EditPrivacy.vue index 0012fca9..794038d9 100644 --- a/src/components/EditPrivacy.vue +++ b/src/components/EditPrivacy.vue @@ -934,6 +934,9 @@ export default { diff --git a/src/components/Guides/LandingGuide.vue b/src/components/Guides/LandingGuide.vue index 05a7a726..1c35fb42 100644 --- a/src/components/Guides/LandingGuide.vue +++ b/src/components/Guides/LandingGuide.vue @@ -443,11 +443,11 @@ export default { diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue index 133c062a..f6239f68 100644 --- a/src/components/LandingPage.vue +++ b/src/components/LandingPage.vue @@ -73,24 +73,5 @@ img { margin: 0 0.5rem 0.5rem 0.5rem; } -.pod-reg { - background-color: #445560; - border-radius: 8px; - max-width: 100%; - margin: 0.5rem 1rem; - padding: 0.2rem 0 0 1rem; -} -.entry { - font-family: "Oxanium", monospace; - color: #28353e; - text-align: center; - margin-top: 10px; -} -.entry a { - text-decoration: none; - color: #28353e; -} -.entry span { - font-family: "Orbitron"; -} + \ No newline at end of file diff --git a/src/components/PodBrowser.vue b/src/components/PodBrowser.vue index 931e69d1..d83c64c9 100644 --- a/src/components/PodBrowser.vue +++ b/src/components/PodBrowser.vue @@ -31,10 +31,7 @@ />
  • - - -
    - - -
    -
  • Source IRI: {{ info.sourceIri }}
    • -
  • Type: {{ info.linkedResources.type }}
    • -
  • - Described By: {{ info.linkedResources.describedby }} -
    • + +
    +
    + Source IRI: +
    + {{ + info.sourceIri + }} + +
    +
    +
    + Type: + {{ + containerCheck(url) ? "Container" : "Resource" + }} +
    +
    + Metadata: +
    + {{ info.linkedResources.describedby }} +
    +
    -
    @@ -103,30 +136,7 @@ -
    - -
    -

    Pod Browser Guide

    - -
    -
      -
    1. Select the Pod you want to Browse.
      2. - -
    2. Navigate to the directory you want to browse.
      3. - -
    3. - Click the chevron_right to - see resource information. -
      4. - -
    4. - Future work: Graphical browser (as an interactive knowledge graph) / - Data Deletion / RDF data + Metadata editing (with syntax checking) / - View filtering / Search bar (for quick searching) -
      5. -
    -
    -
    + diff --git a/src/components/PodLogin.vue b/src/components/PodLogin.vue index 30d64b29..7ed15888 100644 --- a/src/components/PodLogin.vue +++ b/src/components/PodLogin.vue @@ -31,7 +31,7 @@ mdi-information Login .login-container { padding: 1rem; - background-color: #445560; + background-color: var(--panel); font-family: "Oxanium", monospace; font-size: larger; border-radius: 6px; @@ -165,6 +165,7 @@ export default { } .login-container h2 { margin: 0.5rem 1rem 1rem 1rem; + color: var(--text-primary); } .login-display { padding: 1rem; @@ -211,10 +212,12 @@ export default { margin-left: 1.5rem; margin-bottom: 0.5rem; } -button:hover { - background-color: #bda6fd; +.new-pod-btn { + background-color: var(--panel-elev); + color: var(--text-secondary); } -button:active { - background-color: #9b77ff; +.new-pod-btn:hover { + background-color: var(--hover); } + diff --git a/src/components/PodRegistration.vue b/src/components/PodRegistration.vue index 1deac20b..f00abeb1 100644 --- a/src/components/PodRegistration.vue +++ b/src/components/PodRegistration.vue @@ -251,6 +251,7 @@ export default { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.5px; + color: var(--text-primary); } .spinner { border: 4px solid rgba(63, 1, 117, 0.3); @@ -277,6 +278,7 @@ export default { list-style-type: none; padding: 0; margin: 0; + color: var(--text-primary); } .select-pod span { margin-bottom: 20px; diff --git a/src/components/PodUpload.vue b/src/components/PodUpload.vue index 61a6c6a7..c7cc830c 100644 --- a/src/components/PodUpload.vue +++ b/src/components/PodUpload.vue @@ -10,94 +10,96 @@ - -
    - -
    +
    + +
    + +
    +
      +
    • Location
      • +
    • + +
      • +
    • + +
      • +
    +
    + + +
      +
    • + Upload Location: +
      • + + +
    • + +
      • + + +
    • + +
      • + + +
    • +
      + + Check Path + Click to check if this path is a valid URL + + +
      + + mdi-check + + + + mdi-close + +
      +
      +
      • +
    +
    +
      -
    • Location
    • - + Current upload path:
    • - + {{ uploadPath }}
    - - -
      -
    • - Upload Location: -
      • - - -
    • - -
      • - - -
    • - -
      • - - -
    • -
      - - Check Path - Click to check if this path is a valid URL - - -
      - - mdi-check - - - - mdi-close - -
      -
      -
      • -
    -
    -
    -
      -
    • - Current upload path: -
      • -
    • - {{ uploadPath }} -
      • -
    @@ -106,7 +108,7 @@
    Add Files to Pod - +
    - + Upload
    @@ -153,36 +161,69 @@
    -
    +
    There was an error with the file(s) upload! - There is an error here somewhere. Try logging out and logging back in? (also could try clearing your browser cookies if problem reoccurs) + There is an error here somewhere. Try logging out and + logging back in? (also could try clearing your browser + cookies if problem reoccurs) - mdi-information + mdi-information
    -
  • +
  • -
    +
    - The file {{ files[index].name }} + The file + {{ files[index].name }} already exists in the container {{ uploadPath }}
    -
    +
    - There was an error uploading file {{ files[index].name }} + There was an error uploading file + {{ files[index].name }} to {{ uploadPath }}
    - The file {{ files[index].name }} + The file + {{ files[index].name }} can be found in your pod at {{ uploadPath }}
    @@ -191,30 +232,12 @@
    • -
    -
    -
    -

    Data Upload Guide

    - -
    - -
      -
    1. Select the pod you want to upload your file(s) to
      2. -
    2. - Select or input the directory you want to upload the file(s) to -
      3. -
    3. - Click the "File Input" bar or drag and drop a file from your - local machine -
      4. -
    4. Click the "Upload" button
      5. -
    -
    +
    @@ -223,11 +246,13 @@ import { handleFiles, uploadSuccess, alreadyExistsCheck } from "./fileUpload"; import { currentWebId } from "./login"; import ContainerNav from "./ContainerNav.vue"; import PodRegistration from "./PodRegistration.vue"; +import DataUploadGuide from "./Guides/DataUploadGuide.vue"; export default { components: { ContainerNav, PodRegistration, + DataUploadGuide, }, data() { return { @@ -292,8 +317,11 @@ export default { Calls uploadFile() from fileUpload.ts to upload a file to the user's pod. obtains 'files' variable (a FileList that contains references to all files selected using the upload UI). */ - uploadFile(event: FileList) { - this.files = event.target.files; + uploadFile(event: Event) { + const target = event.target as HTMLInputElement; + if (target.files) { + this.files = target.files; + } }, /* @@ -341,25 +369,12 @@ export default { diff --git a/src/components/Styling/FunctionSelector.vue b/src/components/Styling/FunctionSelector.vue index d246e9c5..569ed1bf 100644 --- a/src/components/Styling/FunctionSelector.vue +++ b/src/components/Styling/FunctionSelector.vue @@ -1,12 +1,12 @@ - - +
    @@ -99,6 +107,7 @@ + + diff --git a/src/components/Styling/useTheme.ts b/src/components/Styling/useTheme.ts new file mode 100644 index 00000000..5b92436e --- /dev/null +++ b/src/components/Styling/useTheme.ts @@ -0,0 +1,40 @@ +import { ref, readonly, onMounted, computed } from "vue"; + +type Theme = "light" | "dark"; + +const THEME_KEY = "app-theme"; + +const current = ref("dark"); // default to dark + +function applyTheme(theme: Theme) { + const root = document.documentElement; + if (theme === "dark") root.setAttribute("data-theme", "dark"); + else root.removeAttribute("data-theme"); + localStorage.setItem(THEME_KEY, theme); +} + +export function useTheme() { + const isDark = computed(() => current.value === "dark"); + + function setTheme(theme: Theme) { + current.value = theme; + applyTheme(theme); + } + + function toggleTheme() { + setTheme(current.value === "dark" ? "light" : "dark"); + } + + onMounted(() => { + const saved = (localStorage.getItem(THEME_KEY) as Theme) || "dark"; + current.value = saved; + applyTheme(saved); + }); + + return { + theme: readonly(current), + isDark, + setTheme, + toggleTheme, + }; +} diff --git a/src/components/fileUpload.ts b/src/components/fileUpload.ts index 45fd0780..480828fc 100644 --- a/src/components/fileUpload.ts +++ b/src/components/fileUpload.ts @@ -4,6 +4,7 @@ import { saveFileInContainer, createContainerAt, getSolidDataset, + getSourceUrl, getResourceInfo, getThing, deleteFile, diff --git a/src/main.ts b/src/main.ts index 8687bb0c..d4f2a1c1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,6 +10,8 @@ import * as components from 'vuetify/components'; import * as directives from 'vuetify/directives'; import { aliases, mdi } from 'vuetify/iconsets/mdi'; +import './assets/theme.css' + const pinia = createPinia(); const vuetify = createVuetify({ components, @@ -21,7 +23,28 @@ const vuetify = createVuetify({ mdi, }, }, -}); + theme: { + defaultTheme: 'dark', // or 'light' + themes: { + dark: { + colors: { + surface: '#28353e', // --main-darker2 + 'on-surface': '#ede7f6',// --main-white + primary: '#754ff6', // --main-purple + background: '#22343a', // your page bg (if different from surface) + }, + }, + light: { + colors: { + surface: '#ffffff', + 'on-surface': '#182028', + primary: '#754ff6', + background: '#faf8ff', + }, + }, + }, + }, +}) const app = createApp(App).use(vuetify); app.use(router); From fe20a5d4d67c2c635e77cf74e47ebabe38600bed Mon Sep 17 00:00:00 2001 From: ecrum19 Date: Tue, 2 Sep 2025 14:56:53 +0200 Subject: [PATCH 2/7] fixed query behavior (mostly) --- demonstrator/triple-combined-service.rq | 2 +- demonstrator/triple-idsm-3.rq | 96 +++++++++++++++ demonstrator/triple-oma-6.rq | 41 +++++++ .../{triple-rhea.rq => triple-rhea-4.rq} | 0 demonstrator/triple-solid-2.rq | 8 ++ ...{triple-uniprot.rq => triple-uniprot-5.rq} | 0 ...riple-wikidata.rq => triple-wikidata-1.rq} | 0 src/components/DataQuery.vue | 81 ++++++++++--- src/components/PodLogin.vue | 13 ++- src/components/queryPod.ts | 110 +++++++++++++++++- src/components/queryWorker.js | 1 + src/components/z3-headers.ts | 20 ++-- 12 files changed, 334 insertions(+), 38 deletions(-) create mode 100644 demonstrator/triple-idsm-3.rq create mode 100644 demonstrator/triple-oma-6.rq rename demonstrator/{triple-rhea.rq => triple-rhea-4.rq} (100%) create mode 100644 demonstrator/triple-solid-2.rq rename demonstrator/{triple-uniprot.rq => triple-uniprot-5.rq} (100%) rename demonstrator/{triple-wikidata.rq => triple-wikidata-1.rq} (100%) diff --git a/demonstrator/triple-combined-service.rq b/demonstrator/triple-combined-service.rq index fdba8a2a..a5407f51 100644 --- a/demonstrator/triple-combined-service.rq +++ b/demonstrator/triple-combined-service.rq @@ -1,4 +1,4 @@ -# Datasources: https://triple.ilabt.imec.be/test/chist-era-annex-1-chemicals.ttl +# Datasources: http://localhost:3000/test/Uploads/nbn-chist-era-annex-1-chemicals-alt.ttl PREFIX rdfs: PREFIX rh: PREFIX xsd: diff --git a/demonstrator/triple-idsm-3.rq b/demonstrator/triple-idsm-3.rq new file mode 100644 index 00000000..8db5b8a7 --- /dev/null +++ b/demonstrator/triple-idsm-3.rq @@ -0,0 +1,96 @@ +# Datasources: https://idsm.elixir-czech.cz/sparql/endpoint/idsm +PREFIX xsd: +PREFIX sio: +PREFIX vocab: +PREFIX sachem: + +SELECT ?CAS ?COMPOUND ?SIMILAR_COMPOUND ?SCORE WHERE { + { + # values from Solid pod + VALUES ?CAS { + "75-35-4" + "71-55-6" + "79-00-5" + "630-20-6" + "79-34-5" + "106-93-4" + "107-06-2" + "542-75-6" + "10061-01-5" + "13952-84-6" + "91-59-8" + "553-00-4" + "612-52-2" + "120-23-0" + "121-14-2" + "93-76-5" + "10519-33-2" + "92-67-1" + "2113-61-3" + "92-93-3" + "101-77-9" + "81-15-2" + "30560-19-1" + "34256-82-1" + "50594-66-6" + "15972-60-8" + "116-06-3" + "834-12-8" + "33089-61-1" + "61-82-5" + "84-65-1" + "1332-21-4" + "77536-66-4" + "77536-67-5" + "12172-73-5" + "12001-28-4" + "77536-68-6" + "3337-71-1" + "2302-17-2" + "1912-24-9" + "2642-71-9" + "86-50-0" + "41083-11-8" + "71626-11-4" + "82560-54-1" + "17606-31-4" + "71-43-2" + "92-87-5" + "36341-27-2" + "85-68-7" + "1820573-27-0" + "65731-84-2" + "82657-04-3" + "485-31-4" + } + + ?SYNONYM a sio:CHEMINF_000446 . # CAS registry number + ?SYNONYM sio:SIO_000300 ?CAS . + ?SYNONYM sio:SIO_000011 ?COMPOUND . + + ?COMPOUND a vocab:Compound . + + ?ATTRIBUTE a sio:SIO_011120 . # molecular structure file + ?ATTRIBUTE sio:SIO_000011 ?COMPOUND . + ?ATTRIBUTE sio:SIO_000300 ?MOLFILE . + + SERVICE { + [ + sachem:compound ?SIMILAR_COMPOUND ; + sachem:score ?SCORE + ] sachem:similaritySearch [ + sachem:query ?MOLFILE ; + sachem:cutoff "0.7"^^xsd:double ; + sachem:similarityRadius "3"^^xsd:integer ; + sachem:aromaticityMode sachem:aromaticityDetectIfMissing ; + sachem:tautomerMode sachem:inchiTautomers + ] . + } + } UNION { + SERVICE { + ?SIMILAR_COMPOUND sachem:substructureSearch [ + sachem:query "[As]" + ] . + } + } +} ORDER BY DESC(?SCORE) diff --git a/demonstrator/triple-oma-6.rq b/demonstrator/triple-oma-6.rq new file mode 100644 index 00000000..7a4b79df --- /dev/null +++ b/demonstrator/triple-oma-6.rq @@ -0,0 +1,41 @@ +# Datasources: https://sparql.omabrowser.org/sparql +PREFIX rdf: +PREFIX rdfs: +PREFIX owl: +PREFIX xsd: +PREFIX dc: +PREFIX dct: +PREFIX skos: +PREFIX obo: +PREFIX ensembl: +PREFIX oma: +PREFIX orth: +PREFIX sio: +PREFIX taxon: +PREFIX up: +PREFIX void: +PREFIX lscr: + +select ?protein2 ?OMA_LINK ?taxon_sci_name where { + + VALUES (?Uniprot_link) { ( ) } # here + #The three that contains Orthologs. The leafs are proteins. + #This graph pattern defines the relationship protein1 is Orthologs to protein2 + ?cluster a orth:OrthologsCluster. + ?cluster orth:hasHomologousMember ?node1. + ?cluster orth:hasHomologousMember ?node2. + ?node2 orth:hasHomologousMember* ?protein2. + ?node1 orth:hasHomologousMember* ?protein1. + ######## + + #Specify the protein to look for its orthologs + ?protein1 lscr:xrefUniprot ?Uniprot_link. + ######## + + #The OMA link to the second protein + ?protein2 rdfs:seeAlso ?OMA_LINK. + ?protein2 orth:organism/obo:RO_0002162/up:scientificName ?taxon_sci_name. + ######## + + filter(?node1 != ?node2) +} diff --git a/demonstrator/triple-rhea.rq b/demonstrator/triple-rhea-4.rq similarity index 100% rename from demonstrator/triple-rhea.rq rename to demonstrator/triple-rhea-4.rq diff --git a/demonstrator/triple-solid-2.rq b/demonstrator/triple-solid-2.rq new file mode 100644 index 00000000..286f294b --- /dev/null +++ b/demonstrator/triple-solid-2.rq @@ -0,0 +1,8 @@ +# Datasources: http://localhost:3000/test/Uploads/nbn-chist-era-annex-1-chemicals-alt.ttl +PREFIX thd: +SELECT DISTINCT ?CAS WHERE { + + # Solid pod data + ?SOLIDPOD thd:predicate ?CAS . + +} \ No newline at end of file diff --git a/demonstrator/triple-uniprot.rq b/demonstrator/triple-uniprot-5.rq similarity index 100% rename from demonstrator/triple-uniprot.rq rename to demonstrator/triple-uniprot-5.rq diff --git a/demonstrator/triple-wikidata.rq b/demonstrator/triple-wikidata-1.rq similarity index 100% rename from demonstrator/triple-wikidata.rq rename to demonstrator/triple-wikidata-1.rq diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue index 695ebfe7..c697ed52 100644 --- a/src/components/DataQuery.vue +++ b/src/components/DataQuery.vue @@ -578,6 +578,8 @@ import { CacheOutput, cleanSourcesUrls, QueryResultJson, + ComunicaSources, + executeQueryInMainThread, } from "./queryPod"; import { fetchPermissionsData, @@ -668,6 +670,7 @@ export default { showResultQuery: false as boolean, cachedQueryIndex: null as number | null, worker: null as Worker | null, + containsSolidSources: false as boolean, }; }, methods: { @@ -779,6 +782,12 @@ export default { this.possibleSources.unshift(`<${this.currentPod}>`); }, + /* Determines whether sources contain a Solid source and reflects this in boolean */ + checkSolidSources(querySources: ComunicaSources[]) { + this.containsSolidSources = querySources.some( + (source) => source.context != null + ); + }, // Executes user provided query and saves it to querycache if specified async runExecuteQuery() { this.loading = true; @@ -789,22 +798,35 @@ export default { return; } + // make sources into a ComunicaSources[] + const cleanedSources = cleanSourcesUrls(this.currentQuery.sources); + this.checkSolidSources(cleanedSources); + try { // if Save Query box is selected (pod must be connected) if (this.saveQuery) { this.cachePath = await ensureCacheContainer(this.currentPod); this.currentQuery.output = await executeQueryWithPodConnected( this.currentQuery.query, - this.currentQuery.sources, + cleanedSources, this.cachePath ); // If the output is a string, it means there was no matching entry in the cache if (typeof this.currentQuery.output === "string") { - this.currentQuery.output = await this.executeQuery( - this.currentQuery.query, - this.currentQuery.sources - ); + // if there are NOT solid sources use the Worker + if (!this.containsSolidSources) { + this.currentQuery.output = await this.executeQuery( + this.currentQuery.query, + cleanedSources + ); + } else { + // if there are Solid sources, use custom execution in main thread + this.currentQuery.output = await executeQueryInMainThread( + this.currentQuery.query, + cleanedSources + ); + } } // obtaining query cache hash if the cache contains a similar query @@ -833,8 +855,10 @@ export default { // pass found results to YASR (with save query selected) this.resultsForYasr = this.currentQuery.output.resultsOutput; + this.currentQuery.output = toRaw(this.currentQuery.output); // If there is NOT an equivalent query in cache, then add it to cache if ( + this.currentQuery.output.provenanceOutput === null || this.currentQuery.output.provenanceOutput.algorithm != "equivalence" ) { this.currHash = await createQueriesTTL( @@ -860,23 +884,41 @@ export default { this.cachePath = await ensureCacheContainer(this.currentPod); this.currentQuery.output = await executeQueryWithPodConnected( this.currentQuery.query, - this.currentQuery.sources, + cleanedSources, this.cachePath ); // If the output is a string, it means there was no matching entry in the cache if (typeof this.currentQuery.output === "string") { + // if there are NOT solid sources use the Worker + if (!this.containsSolidSources) { + this.currentQuery.output = await this.executeQuery( + this.currentQuery.query, + cleanedSources + ); + } else { + // if there are Solid sources, use custom execution in main thread + this.currentQuery.output = await executeQueryInMainThread( + this.currentQuery.query, + cleanedSources + ); + } + } + } else { + // if there is no pod connected, use the default query execution + // if there are NOT solid sources use the Worker + if (!this.containsSolidSources) { this.currentQuery.output = await this.executeQuery( this.currentQuery.query, - this.currentQuery.sources + cleanedSources + ); + } else { + // if there are Solid sources, use custom execution in main thread + this.currentQuery.output = await executeQueryInMainThread( + this.currentQuery.query, + cleanedSources ); } - } else { - // if there is no pod connected, use the default query execution - this.currentQuery.output = await this.executeQuery( - this.currentQuery.query, - this.currentQuery.sources - ); } // try to obtain cache hash if the cache contains a similar query @@ -922,10 +964,9 @@ export default { */ async executeQuery( query: string, - providedSources: string[] + providedSources: ComunicaSources[] ): Promise { this.cancelRequested = false; - const cleanedSources = cleanSourcesUrls(providedSources); this.worker = new Worker(new URL("./queryWorker.js", import.meta.url), { type: "module", @@ -966,7 +1007,7 @@ export default { this.worker.postMessage({ type: "run", query, - sources: cleanedSources, + sources: providedSources, }); }); }, @@ -1426,7 +1467,9 @@ body { } /* TODO: Change colors to look nicer */ #yasqe-container :deep(.cm-keyword) { - color: var(--yasqe-keyword); /* Example: purple for keywords like SELECT, WHERE */ + color: var( + --yasqe-keyword + ); /* Example: purple for keywords like SELECT, WHERE */ } #yasqe-container :deep(.cm-atom) { color: var(--yasqe-atom); /* Example: orange for atoms like 'a' */ @@ -1459,7 +1502,9 @@ body { color: var(--text-primary); /* Example: yellow for PREFIX */ } #yasqe-container :deep(.cm-matchhighlight) { - background-color: var(--yasqe-matchhighlight); /* Example: yellow for PREFIX */ + background-color: var( + --yasqe-matchhighlight + ); /* Example: yellow for PREFIX */ } #yasqe-container :deep(.CodeMirror-cursor) { border-left: 1px solid var(--yasqe-cursor); /* Example: yellow cursor */ diff --git a/src/components/PodLogin.vue b/src/components/PodLogin.vue index 7ed15888..7a6e1055 100644 --- a/src/components/PodLogin.vue +++ b/src/components/PodLogin.vue @@ -176,19 +176,22 @@ export default { #errorIndicator { margin-bottom: 1rem; padding: 0.2rem 0.2rem; - border: 2px solid #d72920; + border: 2px solid var(--border); border-radius: 5px; font-size: 14px; font-style: italic; - background-color: #ffcccc; + background-color: var(--error); } .input-row { display: flex; justify-content: space-between; align-items: center; - + color: var(--text-secondary); gap: 10px; } +.input-row :deep(v-input__control) { + color: var(--text-secondary) +} .form-row { width: 100%; } @@ -201,11 +204,11 @@ export default { } .logged-in { padding: 0.2rem 0.2rem; - border: 2px solid #307104; + border: 2px solid var(--border); border-radius: 6px; font-size: 14px; font-style: italic; - background-color: #9fe8b7; /* Highlighted background color */ + background-color: var(--success); margin: 0; } #new-pod { diff --git a/src/components/queryPod.ts b/src/components/queryPod.ts index e9901877..60873937 100644 --- a/src/components/queryPod.ts +++ b/src/components/queryPod.ts @@ -1,4 +1,5 @@ import { QueryEngine as SparqlEngineCache } from "query-sparql-remote-cache"; +import { QueryEngine as SolidQueryEngine } from "@comunica/query-sparql"; import { KeyRemoteCache } from "actor-query-process-remote-cache"; import { createCoiFetch } from "./z3-headers"; import { Bindings } from "@comunica/types"; @@ -20,6 +21,7 @@ import { } from "@inrupt/solid-client"; import { fetch } from "@inrupt/solid-client-authn-browser"; import { Parser as SparqlParser } from "sparqljs"; +import { fetchAclAgents } from "./getData"; export interface QueryResultJson { head: { vars: string[] }; @@ -97,7 +99,8 @@ export function cleanSourcesUrls(dirtySources: string[]): ComunicaSources[] { } }); betterSources.forEach((url) => { - if (url.includes("sparql")) { + // TODO: fix --> currently very dumb way of doing this + if (url.includes("sparql") || url.includes("endpoint")) { comunicasources.push({ value: url }); } else { comunicasources.push({ value: url, context: { fetch: fetch } }); @@ -106,6 +109,27 @@ export function cleanSourcesUrls(dirtySources: string[]): ComunicaSources[] { return comunicasources; } +/** + * Cleans an array of source URLs by removing angle brackets ("<" and ">") + * Also turns string[] into a ComunicaSources[], meaning Solid sources are given auth context. + * + * @param dirtySources - An array of source URLs, some of which may be enclosed in angle brackets. + * @returns A new array of cleaned source URLs without angle brackets. + */ +export function cleanSourcesUrlsForCache(dirtySources: string[]): string[] { + const betterSourcesCache: string[] = []; + + dirtySources.forEach((url) => { + // removes unwanted URI indicating characters + if (url.startsWith("<") && url.endsWith(">")) { + betterSourcesCache.push(url.slice(1, -1)); + } else { + betterSourcesCache.push(url); + } + }); + return betterSourcesCache; +} + /** * Executes a SPARQL query over one or many SPARQL endpoints and/or Solid Pods. * @@ -119,10 +143,9 @@ export function cleanSourcesUrls(dirtySources: string[]): ComunicaSources[] { */ export async function executeQueryWithPodConnected( query: string, - providedSources: string[], + providedSources: ComunicaSources[], userCachePath: string ): Promise { - const cleanedSources = cleanSourcesUrls(providedSources); // TODO: z3-solver DOES NOT work on a Worker Thread... (maybe could fix?) // First, try to perform the query using the cache worker. @@ -177,7 +200,7 @@ export async function executeQueryWithPodConnected( const output = await sparqlQueryWithCache( query, - cleanedSources, + providedSources, userCachePath ); // case where cache is not used @@ -204,7 +227,7 @@ async function sparqlQueryWithCache( const mySparqlEngine = new SparqlEngineCache(); try { - const fetchForCache = createCoiFetch(fetch, { coepCredentialless: true }); + const fetchForCache = createCoiFetch(fetch, { coepCredentialless: false, passthroughOpaque: true, noCors: false }); // Query executor using Comunica const bindingsStream = await mySparqlEngine.queryBindings(inputQuery, { @@ -282,6 +305,80 @@ async function sparqlQueryWithCache( } } +/** + * Executes a SPARQL query over a list of provided Solid Pod URLs. + * + * @param inputQuery The string representation of a SPARQL query to be executed. + * @param mixedSources a ComunicaSources[] that provides the Solid Pod or SPARQL Endpoint sources for executing the specified query. + * @returns a CacheOutput object (containing cache provenance + query results) + */ +export async function executeQueryInMainThread( + inputQuery: string, + mixedSources: ComunicaSources[], +): Promise { + const mySparqlEngine = new SolidQueryEngine(); + + const fetchForCache = createCoiFetch(fetch, { coepCredentialless: false, passthroughOpaque: true, noCors: true }); + try { + // Query executor using Comunica + const bindingsStream = await mySparqlEngine.queryBindings(inputQuery, { + lenient: true, + sources: mixedSources, + }); + + // Displays the results of the query + const bindingsArray: any[] = []; + let firstBinding: Bindings | undefined = undefined; + + // Process each binding from the stream. + for await (const binding of bindingsStream) { + // Capture the variable names from the first binding. + if (!firstBinding) { + firstBinding = binding; + } + const bindingObj: Record = {}; + binding.forEach((term, variable) => { + let termType: string; + switch (term.termType) { + case "Literal": + termType = "literal"; + break; + case "NamedNode": + termType = "uri"; + break; + case "BlankNode": + termType = "bnode"; + break; + default: + termType = term.termType.toLowerCase(); + } + bindingObj[variable.value] = { type: termType, value: term.value }; + }); + bindingsArray.push(bindingObj); + } + + // If there were no results, use an empty array of variables. + const vars = firstBinding + ? Array.from(firstBinding.keys()).map((variable) => variable.value) + : []; + + // results as an object + const resultsOutput: QueryResultJson = { + head: { vars }, + results: { bindings: bindingsArray }, + }; + + const returnVal: CacheOutput = { + provenanceOutput: null, + resultsOutput: resultsOutput, + }; + return returnVal; + } catch (err) { + return err; + } +} + + /** * Generates a unique 6-character hash using alphanumeric characters. * @param length - Length for the hash @@ -449,7 +546,8 @@ export async function createQueriesTTL( const SCHEMA = "https://schema.org/"; const SPEX = "https://purl.expasy.org/sparql-examples/ontology#"; - let cleanedSources: ComunicaSources[] = cleanSourcesUrls(sources); + const cleanedSources: string[] = cleanSourcesUrlsForCache(sources); + console.log(cleanedSources); // parse input query string using SPARQLjs const serviceSources = parseSparqlQuery(query); diff --git a/src/components/queryWorker.js b/src/components/queryWorker.js index c1cb99d1..61850e86 100644 --- a/src/components/queryWorker.js +++ b/src/components/queryWorker.js @@ -20,6 +20,7 @@ self.onmessage = async (e) => { controller = new AbortController(); const { signal } = controller; const engine = new QueryEngineSparql(); + // console.log(query, sources); try { // execute query using Comunica engine const bindingsStream = await engine.queryBindings(query, { diff --git a/src/components/z3-headers.ts b/src/components/z3-headers.ts index effcd6e9..44e4ee28 100644 --- a/src/components/z3-headers.ts +++ b/src/components/z3-headers.ts @@ -14,16 +14,16 @@ export type CoiFetchOptions = { * without trying to rewrite headers (mirrors SW behavior). */ passthroughOpaque?: boolean; + /** + * If true, the "Access-Control-Allow-Origin" header will not be added to the response. + */ + noCors?: boolean; }; export function createCoiFetch( baseFetch: typeof fetch = fetch, opts: CoiFetchOptions = {} ): typeof fetch { - const { - coepCredentialless = true, - passthroughOpaque = true, - } = opts; const coiFetch: typeof fetch = async (input: RequestInfo | URL, init?: RequestInit) => { // Normalize to a Request so we can inspect mode/cache/etc. @@ -37,7 +37,7 @@ export function createCoiFetch( // If credentialless is set and this is a no-cors request, drop credentials. const requestToSend = - coepCredentialless && originalRequest.mode === "no-cors" + opts.coepCredentialless && originalRequest.mode === "no-cors" ? new Request(originalRequest, { credentials: "omit" }) : originalRequest; @@ -45,7 +45,7 @@ export function createCoiFetch( // Opaque responses (status 0) can’t be inspected; return as-is unless you // want to force a rewrap (which would still be opaque and useless). - if (passthroughOpaque && (response as any).status === 0) { + if (opts.passthroughOpaque && (response as any).status === 0) { return response; } @@ -55,17 +55,21 @@ export function createCoiFetch( // Cross-Origin-Embedder-Policy: credentialless or require-corp newHeaders.set( "Cross-Origin-Embedder-Policy", - coepCredentialless ? "credentialless" : "require-corp" + opts.coepCredentialless ? "credentialless" : "require-corp" ); // Cross-Origin-Resource-Policy: only set when not credentialless (matches the SW) - if (!coepCredentialless) { + if (!opts.coepCredentialless) { newHeaders.set("Cross-Origin-Resource-Policy", "cross-origin"); } // Cross-Origin-Opener-Policy: same-origin newHeaders.set("Cross-Origin-Opener-Policy", "same-origin"); + if (!opts.noCors) { + newHeaders.set("Access-Control-Allow-Origin", "*"); + } + // Important: we must stream the body through; Response.body is a ReadableStream. // If the body has been used elsewhere, this will throw—callers should not consume // the original response before passing it on. From 541a9cb818281058cc9bf0677f1ccbc251694adc Mon Sep 17 00:00:00 2001 From: ecrum19 Date: Tue, 2 Sep 2025 16:15:34 +0200 Subject: [PATCH 3/7] dark and light mode (done) --- src/assets/main.css | 6 + src/assets/theme.css | 2 +- src/components/EditPrivacy.vue | 225 +++++++++--------- src/components/Guides/DataPrivacyGuide.vue | 0 src/components/Guides/PrivacyEditingGuide.vue | 119 +++++++++ src/components/PodUpload.vue | 4 +- src/components/Styling/SharedWith.vue | 31 +-- src/components/Styling/useTheme.ts | 3 +- src/main.ts | 19 +- 9 files changed, 279 insertions(+), 130 deletions(-) delete mode 100644 src/components/Guides/DataPrivacyGuide.vue create mode 100644 src/components/Guides/PrivacyEditingGuide.vue diff --git a/src/assets/main.css b/src/assets/main.css index 1d9b187f..647824dc 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap'); + body { background-color: var(--bg); margin: 0; @@ -16,3 +18,7 @@ body { flex-direction: column; margin-top: auto; } + +.v-application, .v-overlay-container { + font-family: 'Oxanium', monospace; +} diff --git a/src/assets/theme.css b/src/assets/theme.css index 33814751..c442e625 100644 --- a/src/assets/theme.css +++ b/src/assets/theme.css @@ -38,7 +38,7 @@ --bg: var(--gray-300); /* #d2d1d8 */ --bg-secondary: var(--gray-400); /* #adacb3 */ --panel: var(--main-gray); /* #ffffff */ - --panel-elev: hsl(0 0% 100%); /* #ffffff */ + --panel-elev: var(--gray-200); --muted: hsl(250 14% 90%); /* #e3e1e8 */ --border: var(--main-white); --text-primary: var(--gray-900); diff --git a/src/components/EditPrivacy.vue b/src/components/EditPrivacy.vue index 794038d9..db3d44e6 100644 --- a/src/components/EditPrivacy.vue +++ b/src/components/EditPrivacy.vue @@ -132,7 +132,10 @@ refresh - Refresh access rights content_copy     - Copy WebID to clipboard @@ -228,7 +234,10 @@ @@ -238,7 +247,10 @@ v-model="permissions.append" /> Append - Add to to existing content @@ -248,7 +260,10 @@ v-model="permissions.write" /> Write - Change existing content + create new content @@ -258,7 +273,10 @@ v-model="permissions.control" /> Control - Change .acl permissions for the resource @@ -274,7 +292,10 @@ :class="{ highlight: accessType === 'Agent' }" > Agent - Change access for a specific WebId @@ -286,7 +307,10 @@ :class="{ highlight: accessType === 'Public' }" > Public - Change access for anyone @@ -451,37 +475,12 @@
    - -
    -

    Privacy Editing Guide

    - -
    -
      -
    1. Select the Pod you want to Browse.
      2. - -
    2. - Use the nav bar above the container/resource list to navigate between - containers -
      3. - -
    3. - Click the lock next to a container or - resource to see current access rights -
      4. -
    4. - Select the "Add access rights +" section to adjust access for a - provided WebID -
      5. -
    5. - Future work: The left nav bar pages, add filter functionality, and - functionality to the info/notifications icons -
      6. -
    -
    +
    + + diff --git a/src/components/PodUpload.vue b/src/components/PodUpload.vue index c7cc830c..91bd7958 100644 --- a/src/components/PodUpload.vue +++ b/src/components/PodUpload.vue @@ -10,7 +10,7 @@
    -
    +
    @@ -104,7 +104,7 @@
    + TODO: clear files from upload box once uploaded -->
    Add Files to Pod diff --git a/src/components/Styling/SharedWith.vue b/src/components/Styling/SharedWith.vue index ae30d1d7..a21297ff 100644 --- a/src/components/Styling/SharedWith.vue +++ b/src/components/Styling/SharedWith.vue @@ -160,9 +160,7 @@ {{ "schedule" }} - {{ mode.created }} + {{ mode.created }}
    @@ -279,7 +277,7 @@ export default { .shared-title { font-size: 24px; font-weight: bold; - color: #ede7f6; + color: var(--text-secondary); margin-bottom: 20px; } /* Query List Items */ @@ -292,14 +290,15 @@ ul { display: flex; flex-direction: column; width: 100%; - background-color: #28353e; + background-color: var(--panel-elev); + border: 2px solid var(--border); border-radius: 8px; padding: 16px; margin: 10px 0; transition: all 0.3s ease-in-out; } .folder:hover { - background-color: #37474f; + background-color: var(--hover); cursor: pointer; } /* Folder Header */ @@ -325,7 +324,7 @@ ul { font-family: "Oxanium", monospace; font-size: large; font-weight: 600; - color: white; + color: var(--text-secondary); transition: background 0.3s ease-in-out; } .user-icon-button { @@ -341,7 +340,7 @@ ul { font-family: "Oxanium", monospace; font-size: large; font-weight: 600; - color: white; + color: var(--text-secondary); transition: background 0.3s ease-in-out; } /* Ensure full-width coverage */ @@ -370,20 +369,20 @@ ul { flex-grow: 1; text-align: left; padding-left: 10px; - color: #ede7f6; + color: var(--text-secondary); } .card-panel .not-colored { - color: #ede7f6; + color: var(--text-secondary); } /* Item Details (Hidden by Default) */ .specific-access { display: flex; flex-direction: column; - background: #1e1e1e; + background: var(--panel); padding: 0.8rem; margin: 1rem 0; border-radius: 5px; - color: white; + color: var(--text-secondary); } /* Users Details Spacing */ .specific-access div { @@ -398,11 +397,12 @@ ul { /* Query Labels */ .user-tag { font-weight: bold; - color: #ede7f6; + color: var(--text-secondary); } /* File Data */ .the-user { - color: #90caf9; + color: var(--yasqe-keyword); + font-weight: 600; font-style: italic; } .shared-with-item { @@ -429,9 +429,10 @@ ul { font-weight: bold; font-size: 12pt; margin-top: 1rem; + color: var(--text-secondary); } .shared-with a { - color: #ffab40; + color: var(--accent-700); text-decoration: none; } .shared-with a:hover { diff --git a/src/components/Styling/useTheme.ts b/src/components/Styling/useTheme.ts index 5b92436e..c313dde0 100644 --- a/src/components/Styling/useTheme.ts +++ b/src/components/Styling/useTheme.ts @@ -8,8 +8,7 @@ const current = ref("dark"); // default to dark function applyTheme(theme: Theme) { const root = document.documentElement; - if (theme === "dark") root.setAttribute("data-theme", "dark"); - else root.removeAttribute("data-theme"); + root.setAttribute("data-theme", theme); localStorage.setItem(THEME_KEY, theme); } diff --git a/src/main.ts b/src/main.ts index d4f2a1c1..55648ecb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -24,7 +24,6 @@ const vuetify = createVuetify({ }, }, theme: { - defaultTheme: 'dark', // or 'light' themes: { dark: { colors: { @@ -49,4 +48,20 @@ const vuetify = createVuetify({ const app = createApp(App).use(vuetify); app.use(router); app.use(pinia); -app.mount('#app'); + +// Set theme based on data-theme attribute +const observer = new MutationObserver(() => { + const newTheme = document.documentElement.getAttribute('data-theme'); + if (newTheme) { + vuetify.theme.global.name.value = newTheme; + } +}); +observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); + +// Set initial theme +const initialTheme = document.documentElement.getAttribute('data-theme'); +if (initialTheme) { + vuetify.theme.global.name.value = initialTheme; +} + +app.mount('#app'); \ No newline at end of file From fb57f4c87b28ed0ec60177a9bb32962424c3f0e6 Mon Sep 17 00:00:00 2001 From: ecrum19 Date: Wed, 3 Sep 2025 14:31:49 +0200 Subject: [PATCH 4/7] fixed data upload, data manager, and display query errors --- src/assets/theme.css | 6 +- src/components/DataQuery.vue | 117 ++++++++++++++++------- src/components/Guides/DataQueryGuide.vue | 2 +- src/components/PodBrowser.vue | 110 ++++++++++++++------- src/components/PodUpload.vue | 53 ++++++---- src/components/fileUpload.ts | 21 ++-- src/components/queryPod.ts | 25 ++++- src/components/queryWorker.js | 1 - src/main.ts | 2 +- 9 files changed, 235 insertions(+), 102 deletions(-) diff --git a/src/assets/theme.css b/src/assets/theme.css index c442e625..69e9bf9d 100644 --- a/src/assets/theme.css +++ b/src/assets/theme.css @@ -53,8 +53,9 @@ --accent-700: hsl(195 85% 36%); /* #107eab */ --success: hsl(160 72% 42%); /* #1fba74 */ - --warning: hsl(35 92% 50%); /* #f7a611 */ + --warning: #ffd904; /* #f7a611 */ --danger: #ff7f7fbb; + --error: #ff1e00c2; --info: hsl(195 85% 48%); /* #1ba9e0 */ --focus-ring: 2px solid hsl(262 92% 65% / 0.7); /* #8a42f4 */ @@ -100,8 +101,9 @@ --accent-700: hsl(195 85% 60%); /* #4dc0ec */ --success: hsl(160 72% 46%); /* #26c980 */ - --warning: hsl(35 92% 58%); /* #f8ad29 */ + --warning: #ffd700; --danger: #ff7f7fbb; + --error: #ff1e00; --info: hsl(195 85% 54%); /* #34b8e6 */ --focus-ring: 2px solid hsl(262 92% 65% / 0.8); /* #8a42f4 */ diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue index c697ed52..e5b2721d 100644 --- a/src/components/DataQuery.vue +++ b/src/components/DataQuery.vue @@ -163,8 +163,15 @@ >Please connect your pod if you wish to look at your Query Cache...
    (simply click the "select pod" button above.) + No query cache found in your pod. To create a query cache, simply + execute a query with the "Save Query?" checkbox checked.
      -
      +
      Cached Queries @@ -544,11 +551,40 @@
      - - -
      + +
      + +
      + This query produced no results 🙃 +
      + + +
      + There was a(n) + {{ queryError }} + error when executing this query
      (open the browser console to see + more details.)       +
    @@ -562,7 +598,7 @@ import Yasqe from "@triply/yasqe"; import "@triply/yasqe/build/yasqe.min.css"; import Yasr from "@triply/yasr"; import "@triply/yasr/build/yasr.min.css"; -import { isLoggedin } from "./login"; +import { isLoggedin, currentWebId } from "./login"; import { ensureCacheContainer, createQueriesTTL, @@ -609,9 +645,11 @@ export default { // TODO: Integrate demonstrators + example queries data() { return { + webid: "" as string, yasqe: shallowRef(null), yasr: shallowRef(null), resultsForYasr: null as QueryResultJson | null, + queryError: null as Error | null, successfulLogin: false as boolean, currentPod: "" as string, currentView: "newQuery" as "newQuery" | "previousQueries", @@ -801,11 +839,17 @@ export default { // make sources into a ComunicaSources[] const cleanedSources = cleanSourcesUrls(this.currentQuery.sources); this.checkSolidSources(cleanedSources); - + try { + // reset query error + this.queryError = null; + // if Save Query box is selected (pod must be connected) if (this.saveQuery) { - this.cachePath = await ensureCacheContainer(this.currentPod); + this.cachePath = await ensureCacheContainer( + this.currentPod, + this.webid + ); this.currentQuery.output = await executeQueryWithPodConnected( this.currentQuery.query, cleanedSources, @@ -841,17 +885,6 @@ export default { ); } - // if the result of the query was null - if ( - !this.currentQuery.output.resultsOutput || - !this.currentQuery.output.resultsOutput.results - ) { - this.currentQuery.output.resultsOutput = { - head: { vars: [] }, - results: { bindings: [] }, - }; - } - // pass found results to YASR (with save query selected) this.resultsForYasr = this.currentQuery.output.resultsOutput; @@ -878,10 +911,13 @@ export default { ); } } else { - // If the Save Query button was not selected + // If the Save Query button was not selected (pod is connected) if (this.currentPod !== "") { // if there is a pod connected, try to use cache - this.cachePath = await ensureCacheContainer(this.currentPod); + this.cachePath = await ensureCacheContainer( + this.currentPod, + this.webid + ); this.currentQuery.output = await executeQueryWithPodConnected( this.currentQuery.query, cleanedSources, @@ -905,8 +941,8 @@ export default { } } } else { - // if there is no pod connected, use the default query execution - // if there are NOT solid sources use the Worker + // if there is NO pod connected, use the default query execution + // if there are NOT solid sources --> use the Worker if (!this.containsSolidSources) { this.currentQuery.output = await this.executeQuery( this.currentQuery.query, @@ -932,7 +968,12 @@ export default { this.currentQuery.output.provenanceOutput.id.value ); } - + } + // if there was an error report it here + if (this.currentQuery.output instanceof Error) { + this.queryError = this.currentQuery.output.message; + } else { + // if the query was empty assign it empty bindings if ( !this.currentQuery.output.resultsOutput || !this.currentQuery.output.resultsOutput.results @@ -942,9 +983,10 @@ export default { results: { bindings: [] }, }; } - // pass found results to YASR (if save query was not selected) - this.resultsForYasr = this.currentQuery.output.resultsOutput; } + // pass found results to YASR (if save query was not selected) + this.resultsForYasr = this.currentQuery.output.resultsOutput; + } catch (err) { if (this.cancelRequested) { console.log("Query canceled by user."); @@ -965,14 +1007,14 @@ export default { async executeQuery( query: string, providedSources: ComunicaSources[] - ): Promise { + ): Promise { this.cancelRequested = false; this.worker = new Worker(new URL("./queryWorker.js", import.meta.url), { type: "module", }); - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { this.worker!.onmessage = (e: MessageEvent) => { const { data } = e as { data: any }; switch (data?.type) { @@ -984,9 +1026,8 @@ export default { }); break; case "error": - console.log("Worker error:", data.error); this.cleanupWorker(); - resolve(null); // or reject(data.error) if you prefer + resolve(new Error(data.error.message)); // or reject(data.error) if you prefer break; case "cancelled": this.cleanupWorker(); @@ -999,9 +1040,8 @@ export default { }; // for an error or cancellation this.worker!.onerror = (err) => { - console.log("Worker error:", err); this.cancelQuery(); - reject(err); + resolve(err as any); }; // starts a run this.worker.postMessage({ @@ -1253,6 +1293,7 @@ export default { setTimeout(() => { this.loginCheck(); + this.webid = currentWebId(); }, 500); setTimeout(() => { this.handleDelay(); @@ -1843,6 +1884,18 @@ ul { } } +/* No results */ +.null-results { + font-family: "Oxanium", monospace; + color: var(--text-secondary); + font-size: 14pt; + padding: 0.25rem; + text-align: center; +} +.null-results b { + color: var(--error); +} + /* Results */ .results-container .results-text { font-size: 18pt; @@ -1968,7 +2021,7 @@ ul { min-width: 100%; } #yasr-container :deep(thead tr th) { - background-color: var(--primary-600); + background-color: var(--primary); color: var(--main-white); font-weight: bold; font-size: 13pt; diff --git a/src/components/Guides/DataQueryGuide.vue b/src/components/Guides/DataQueryGuide.vue index 44b3834f..f0bc8a17 100644 --- a/src/components/Guides/DataQueryGuide.vue +++ b/src/components/Guides/DataQueryGuide.vue @@ -37,7 +37,7 @@ @@ -1336,7 +1316,7 @@ form input[type="text"] { padding: 3px; margin-bottom: 5px; border: 1px solid var(--text-secondary) !important; - border-radius: 4px;; + border-radius: 4px; font-family: "Courier New", Courier, monospace; font-size: large; max-width: 100%; @@ -1347,7 +1327,8 @@ form input::placeholder { padding-left: 0.5rem; color: var(--text-muted); /* Slight transparency */ } -.agent-button, .public-button { +.agent-button, +.public-button { padding: 10px; margin-top: 5px; background-color: var(--border); @@ -1360,7 +1341,7 @@ form input::placeholder { font-family: "Oxanium", monospace; font-weight: 600; border-radius: 6px; - margin-top: 0.25rem;; + margin-top: 0.25rem; padding: 0.75rem; background-color: var(--primary); color: var(--main-white); @@ -1423,6 +1404,4 @@ label span { #resetButton button:hover { background-color: var(--hover); } - - diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue index f6239f68..e6dbf054 100644 --- a/src/components/LandingPage.vue +++ b/src/components/LandingPage.vue @@ -2,12 +2,8 @@
    - Full Solid Cockpit logo + Full Solid Cockpit logo
    -     @@ -15,16 +11,21 @@
    +
    + +
    +
    @@ -70,8 +79,12 @@ img { text-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .login-container { - margin: 0 0.5rem 0.5rem 0.5rem; - + margin: 0 0.5rem 0.25rem 0.5rem; +} +.pod-chooseContainer { + margin: 0 1rem 0.5rem 1rem; + background-color: var(--panel); + border-radius: 6px; } - \ No newline at end of file + diff --git a/src/components/PodBrowser.vue b/src/components/PodBrowser.vue index 401b304a..123b8294 100644 --- a/src/components/PodBrowser.vue +++ b/src/components/PodBrowser.vue @@ -16,11 +16,11 @@
    - +
    -
    +
      @@ -33,7 +33,7 @@
      • @@ -150,13 +150,16 @@ @@ -164,7 +176,7 @@ export default { margin-top: 0.5rem; } .login-container h2 { - margin: 0.5rem 1rem 1rem 1rem; + margin: 0 0 0.25rem 0; color: var(--text-primary); } .login-display { @@ -190,7 +202,7 @@ export default { gap: 10px; } .input-row :deep(v-input__control) { - color: var(--text-secondary) + color: var(--text-secondary); } .form-row { width: 100%; @@ -222,5 +234,4 @@ export default { .new-pod-btn:hover { background-color: var(--hover); } - diff --git a/src/components/PodRegistration.vue b/src/components/PodRegistration.vue index f00abeb1..10b4275f 100644 --- a/src/components/PodRegistration.vue +++ b/src/components/PodRegistration.vue @@ -1,14 +1,26 @@ @@ -180,6 +194,7 @@ import { sharedSomething, getSharedWithMe, getSharedWithOthers, + SharedWithMeData, } from "../privacyEdit"; import { getStoredTtl } from "../queryPod"; @@ -250,7 +265,7 @@ export default { if (this.currentOperation === "sharedWithMe") { try { const sharedItemsThings = await getSharedWithMe(this.currentPod); - this.sharedMeItems = await toRaw(sharedItemsThings); + this.sharedMeItems = sharedItemsThings.sharedItems; } catch (err) { console.error("Error fetching shared items:", err); } @@ -280,6 +295,15 @@ export default { color: var(--text-secondary); margin-bottom: 20px; } + +.no-items { + font-family: "Oxanium", monospace; + padding: 1rem 0.5rem; + font-size: 1.2rem; + color: var(--text-secondary); + margin-bottom: 1rem; +} + /* Query List Items */ ul { list-style: none; diff --git a/src/components/Styling/TheHeader.vue b/src/components/Styling/TheHeader.vue index 26b88926..ddfdb8c3 100644 --- a/src/components/Styling/TheHeader.vue +++ b/src/components/Styling/TheHeader.vue @@ -106,6 +106,7 @@ import ThemeSwitch from "./ThemeSwitch.vue"; import { useAuthStore } from "../../stores/auth"; // Import the store import { + handleRedirectAfterPageLoad, redirectToHomepage, redirectToLogin, logOut, @@ -151,6 +152,17 @@ export default { LoginpageRedir(): void { redirectToLogin(); }, + async loginCheck(): Promise { + await handleRedirectAfterPageLoad(); + }, + }, + mounted() { + this.loginCheck(); // Perform login check on component mount + + // Regularly check login status + setInterval(() => { + this.loginCheck(); + }, 30000); // Check every 30 seconds }, }; diff --git a/src/components/Unused.ts b/src/components/Unused.ts index a591581e..7ee8a21b 100644 --- a/src/components/Unused.ts +++ b/src/components/Unused.ts @@ -1,3 +1,147 @@ +// query cache sharing HTML +// +// +// +// + + + + + + + + + + + + + import { getContainedResourceUrlAll, getResourceInfo, diff --git a/src/components/fileUpload.ts b/src/components/fileUpload.ts index f164c96a..d168bf1c 100644 --- a/src/components/fileUpload.ts +++ b/src/components/fileUpload.ts @@ -4,14 +4,15 @@ import { saveFileInContainer, createContainerAt, getSolidDataset, - getSourceUrl, + saveSolidDatasetAt, getResourceInfo, getThing, + removeThing, deleteFile, deleteSolidDataset, getContainedResourceUrlAll, + getUrlAll, } from "@inrupt/solid-client"; -import { fetchData } from "./getData"; import { fetch } from "@inrupt/solid-client-authn-browser"; import { mimeTypes } from "./mime_types.js"; @@ -21,7 +22,7 @@ import { mimeTypes } from "./mime_types.js"; * @param fileList The list of files to be uploaded to the Pod. * @param uploadPath The URL path to the specified upload container. * @param podURL The URL of the Pod files are to be uploaded to. - * + * * @returns a list of file names that have been uploaded. */ export async function handleFiles( @@ -35,7 +36,11 @@ export async function handleFiles( if (await alreadyExists(fileList[i], uploadPath)) { outputList.push(`already exists`); } else { - const upload: string = await uploadToPod(`${uploadPath}`, fileList[i], fetch); + const upload: string = await uploadToPod( + `${uploadPath}`, + fileList[i], + fetch + ); outputList.push(upload); } } @@ -100,7 +105,6 @@ async function overwriteToPod( export async function deleteFromPod(fileUrl: string): Promise { try { await deleteFile(fileUrl, { fetch }); - // console.log(`${fileUrl} deleted successfully`); return true; } catch (error) { console.error(`Error deleting ${fileUrl}:`, error); @@ -132,6 +136,46 @@ export async function deleteContainer(containerUrl: string): Promise { } } +/** + * Deletes a Query Hash Thing from queries.ttl file using the @inrupt/solid-client method removeThing(). + * + * @param queriesttlUrl The URL of the file to be deleted. + * @param targetHash The hash of the Query Thing to be deleted. + * @returns A Promise that resolves to a boolean indicating whether the deletion was successful. + */ +export async function deleteThing( + queriesttlUrl: string, + targetHash: string +): Promise { + const SD_ENDPOINT = + "http://www.w3.org/ns/sparql-service-description#endpoint"; + const removalTarget = `${queriesttlUrl}#${targetHash}`; + try { + let dataset = await getSolidDataset(removalTarget, { fetch }); + + // Get the sources Thing from the desired query and delete it + const entry = getThing(dataset, removalTarget); + const endpointUrls = getUrlAll(entry, SD_ENDPOINT); + let removed = dataset; + console.log(removed); + if (endpointUrls.length != 0) { + for (const oUrl of endpointUrls) { + // a) Remove the object URL from the entry’s sd:endpoint values + removed = removeThing(removed, oUrl); + } + } + + // delete the hash Thing + removed = removeThing(removed, removalTarget); + console.log(removed); + await saveSolidDatasetAt(queriesttlUrl, removed, { fetch }); + + return true; + } catch (error) { + console.log(`Error deleting ${removalTarget}`); + return false; + } +} /** * Takes in a File and uploads it to a Solid Pod using the @inrupt/solid-client method saveFileInContainer(). @@ -200,11 +244,15 @@ async function ensureDirectoriesExist( // handles deep directory structure try { // Check if directory exists - const result = await getResourceInfo(`${currentUrl}${directories[i]}/`, { fetch: fetch }); + const result = await getResourceInfo(`${currentUrl}${directories[i]}/`, { + fetch: fetch, + }); } catch (error) { if (error.statusCode === 404) { // console.log(`Creating directory: ${directories[i]}`); - await createContainerAt(`${currentUrl}${directories[i]}/`, { fetch: fetch }); + await createContainerAt(`${currentUrl}${directories[i]}/`, { + fetch: fetch, + }); } else { console.error(`Error creating directory ${directories[i]}:`, error); } @@ -218,14 +266,17 @@ async function ensureDirectoriesExist( * * @param file The container URL where the files are to be uploaded. * @param uploadUrl The file that is to be uploaded to the Pod. - * + * * @return A boolean representing whether the file to be uploaded alreay exists in the current directory */ -export async function alreadyExists(file: File, uploadUrl: string): Promise { +export async function alreadyExists( + file: File, + uploadUrl: string +): Promise { // const containerContents = await fetchData(uploadUrl); try { - const containerContents = await getSolidDataset(uploadUrl, {fetch}); - const allegedFile = getThing(containerContents, `${uploadUrl}${file.name}`) + const containerContents = await getSolidDataset(uploadUrl, { fetch }); + const allegedFile = getThing(containerContents, `${uploadUrl}${file.name}`); // console.log(`The file ${allegedFile.url} already exists...`) return true; } catch (e) { @@ -238,14 +289,14 @@ export async function alreadyExists(file: File, uploadUrl: string): Promise { +export async function startLogin(purl: string): Promise { // Start the Login Process if not already logged in. let status = ''; if (!session.info.isLoggedIn) { @@ -45,7 +44,7 @@ async function startLogin(purl: string): Promise { * * @returns A Promise that resolves to a boolean. (false === 'logged out' / true === 'logged in') */ -async function logOut(): Promise { +export async function logOut(): Promise { if (session.info.isLoggedIn) { try { await session.logout({ logoutType: 'app' }); @@ -63,7 +62,7 @@ async function logOut(): Promise { * * @returns a boolean that signifies login status (false === 'logged out' / true === 'logged in') */ -function isLoggedin(): boolean { +export function isLoggedin(): boolean { return session.info.isLoggedIn } @@ -72,7 +71,7 @@ function isLoggedin(): boolean { * * @returns a user's webID URL as a string. */ -function currentWebId(): string { +export function currentWebId(): string { return session.info.webId as string; } @@ -82,7 +81,7 @@ function currentWebId(): string { * @param webid The webID URL of the current user. * @returns A Promise that resolves to a string[] of user Pod URLs, if available, or `undefined` if no pods are found. */ -async function getPodURLs(): Promise { +export async function getPodURLs(): Promise { try { return await getPodUrlAll(session.info.webId, { fetch: fetch }); } catch (error) { @@ -93,29 +92,30 @@ async function getPodURLs(): Promise { /** * Redirects the user back to the TRIPLE App homepage */ -function redirectToHomepage(): void { +export function redirectToHomepage(): void { window.location.href = new URL("/solid-cockpit/", window.location.href).toString() } /** * Redirects the user to the TRIPLE App login page */ -function redirectToLogin(): void { +export function redirectToLogin(): void { window.location.href = new URL("/solid-cockpit/login", window.location.href).toString() } /** * Checks if the current User is logged-in to a Solid Pod after page-reload. -*/ -async function handleRedirectAfterPageLoad(): Promise { + * Ensures the user stays on the current page. + * @returns A Promise that resolves when the session restoration is complete. + */ +export async function handleRedirectAfterPageLoad(): Promise { try { - handleIncomingRedirect({restorePreviousSession: true}) + await handleIncomingRedirect({ + restorePreviousSession: true, // Restore the session without redirection + }); } catch (error) { - console.error('Error:', error); + console.error("Error during session restoration:", error); } } - - -export { startLogin, isLoggedin, handleRedirectAfterPageLoad, currentWebId, getPodURLs, redirectToHomepage, redirectToLogin, logOut, session } diff --git a/src/components/privacyEdit.ts b/src/components/privacyEdit.ts index 85d9764a..a4c331bb 100644 --- a/src/components/privacyEdit.ts +++ b/src/components/privacyEdit.ts @@ -26,10 +26,14 @@ import { getUrl, getIri, getIriAll, + createThing, + addIri, + setDatetime, + addDatetime, } from "@inrupt/solid-client"; import { fetch } from "@inrupt/solid-client-authn-browser"; import { WorkingData, fetchData, fetchPermissionsData } from "./getData"; -import { generateHash, generateSeededHash } from "./queryPod"; +import { generateSeededHash } from "./queryPod"; export type Permissions = { read: boolean; @@ -135,6 +139,8 @@ export async function changeAclAgent( } } +// Set Agent ACL access + /** * Changes the access control settings of a specified resource using setPublicResourceAccess() from Inrupt. * @@ -214,7 +220,11 @@ export async function generateAcl( // add that root ACL info to empty acl const updatedNewAcl = setAgentResourceAccess(newAcl, userWebId, userAccess); - const defUpdatedNewAcl = setAgentDefaultAccess(updatedNewAcl, userWebId, userAccess); + const defUpdatedNewAcl = setAgentDefaultAccess( + updatedNewAcl, + userWebId, + userAccess + ); const savedDataset = await saveSolidDatasetAt( location.internal_resourceInfo.aclUrl, @@ -299,7 +309,11 @@ export async function createInboxWithACL( // Initialize the sharedWithMe.ttl file const mefileName = "sharedWithMe.ttl"; const medataset = createSolidDataset(); - await saveSolidDatasetAt(inboxUrl + mefileName, medataset, { fetch }); + const newDataset = await recordLastAccessTime( + medataset, + inboxUrl + mefileName + ); + await saveSolidDatasetAt(inboxUrl + mefileName, newDataset, { fetch }); console.log(`CREATED sharedWithMe.ttl`); // Initialize the sharedWithOthers.ttl file @@ -359,14 +373,6 @@ export async function updateSharedWithMe( // Remove the trailing comma and space accessModesString = accessModesString.slice(0, -2); - // TODO: Add additional logic here for RDFSource / NonRDFSource / BasicContainer - let sharedThing = ""; - if (resourceURL.endsWith("/")) { - sharedThing = "Container"; - } else { - sharedThing = "Resource"; - } - // Attempt to update sharedWithMe.ttl with a PATCH SPARQL update try { const newTriples = ` @@ -386,7 +392,6 @@ export async function updateSharedWithMe( PREFIX dct: PREFIX acl: PREFIX as: - PREFIX ldp: INSERT DATA { ${newTriples} } @@ -430,7 +435,7 @@ export async function updateSharedWithOthers( ): Promise { const sharedWithMeUrl = `${podUrl}inbox/`; const fileName = "sharedWithOthers.ttl"; - const hash = generateSeededHash(resourceUrl+sharedWith); + const hash = generateSeededHash(resourceUrl + sharedWith); // Construct access modes string let accessModesString = ""; @@ -525,7 +530,7 @@ export interface indexedUserHash { */ export async function getSharedWithOthers( rootPodUrl: string, - currentUserWebId: string, + currentUserWebId: string ): Promise { // Load the dataset from the TTL file. const sharedWithOthersUrl = `${rootPodUrl}inbox/sharedWithOthers.ttl`; @@ -540,21 +545,32 @@ export async function getSharedWithOthers( // Extract the hash from the Thing’s URL fragment. i += 1; const thingUrl = thing.url; - const resourceHash = thingUrl.includes("#") ? `${thingUrl.split("#")[1]}` : ""; + const resourceHash = thingUrl.includes("#") + ? `${thingUrl.split("#")[1]}` + : ""; // Only consider resources - if (resourceHash.includes('/')) { - const whatKind = getIri(thing, "http://www.w3.org/1999/02/22-rdf-syntax-ns#type") || "N/A"; - const sharedHashes = getIriAll(thing, "https://www.w3.org/ns/activitystreams#Offer") || ["N/A"]; - const usersSharedWith = thingsUsersSharedWithParse(sharedHashes, things, i); + if (resourceHash.includes("/")) { + const whatKind = + getIri(thing, "http://www.w3.org/1999/02/22-rdf-syntax-ns#type") || + "N/A"; + const sharedHashes = getIriAll( + thing, + "https://www.w3.org/ns/activitystreams#Offer" + ) || ["N/A"]; + const usersSharedWith = thingsUsersSharedWithParse( + sharedHashes, + things, + i + ); const owner = currentUserWebId; sharedItems.push({ resourceHash, usersSharedWith, owner, - whatKind + whatKind, }); - } + } }); return sharedItems; } @@ -571,28 +587,24 @@ function thingsUsersSharedWithParse( things: Thing[], index: number ): userHash[] { - const usersSharedWith: userHash[] = []; // Iterate through the Things array and extract the users a resource is shared with - let userIndex = 0 + let userIndex = 0; while (index < things.length && userIndex < userHashes.length) { // See is the current thing is a user hash if (userHashes[userIndex] === things[index].url) { const created = getDatetime( - things[index], "http://purl.org/dc/terms/created")?.toISOString() - || "N/A"; - const sharedWith = - getUrl( things[index], - "https://www.w3.org/ns/activitystreams#target" - ) || "N/A"; + "http://purl.org/dc/terms/created" + )?.toISOString() || "N/A"; + const sharedWith = + getUrl(things[index], "https://www.w3.org/ns/activitystreams#target") || + "N/A"; const resourceUrl = - getUrl( - things[index], - "http://www.w3.org/ns/auth/acl#accessTo" - ) || "N/A"; + getUrl(things[index], "http://www.w3.org/ns/auth/acl#accessTo") || + "N/A"; const access = getIriAll( things[index], "http://www.w3.org/ns/auth/acl#mode" @@ -613,6 +625,10 @@ function thingsUsersSharedWithParse( return usersSharedWith; } +export interface SharedWithMeData { + lastAccessed: string; + sharedItems: sharedSomething[]; +} /** * Retrieves all shared data entries from a sharedWithMe.ttl file. * @@ -628,37 +644,127 @@ function thingsUsersSharedWithParse( * @param rootPodUrl - The URL of the current user's Solid Pod URL * @returns An array of sharedItems objects. */ -export async function getSharedWithMe(rootPodUrl: string): Promise { +export async function getSharedWithMe( + rootPodUrl: string +): Promise { // Load the dataset from the TTL file. const sharedWithMeUrl = `${rootPodUrl}inbox/sharedWithMe.ttl`; const dataset = await getSolidDataset(sharedWithMeUrl, { fetch }); + const things: Thing[] = getThingAll(dataset); const sharedItems: sharedSomething[] = []; + let lastAccessed: string = "N/A"; things.forEach((thing) => { - const resourceHash = thing.url.includes("#") ? thing.url.split("#")[1] : ""; - const creator = getUrl(thing, "http://purl.org/dc/terms/creator") || "N/A"; - const created = getDatetime(thing, "http://purl.org/dc/terms/created")?.toISOString() || "N/A"; - const accessTo = getUrl(thing, "http://www.w3.org/ns/auth/acl#accessTo") || "N/A"; - const accessModes = getIriAll(thing, "http://www.w3.org/ns/auth/acl#mode") || ["N/A"]; - const whatKind = getIri(thing, "http://www.w3.org/1999/02/22-rdf-syntax-ns#type") || "N/A"; - - const usersSharedWith: userHash[] = [ - { - sharedWith: creator, - resourceUrl: accessTo, - accessModes: accessModes, - created: created, - }, - ]; - - sharedItems.push({ - resourceHash, - usersSharedWith, - owner: creator, - whatKind, - }); + try { + const resourceHash = thing.url.includes("#") + ? thing.url.split("#")[1] + : ""; + + // Get the last accessed time + if (resourceHash === "lastAccess") { + lastAccessed = + getDatetime( + thing, + "http://purl.org/dc/terms/modified" + )?.toISOString() || "N/A"; + } else { + // Get all other info + const creator = + getUrl(thing, "http://purl.org/dc/terms/creator") || "N/A"; + const created = + getDatetime( + thing, + "http://purl.org/dc/terms/created" + )?.toISOString() || "N/A"; + const accessTo = + getUrl(thing, "http://www.w3.org/ns/auth/acl#accessTo") || "N/A"; + const accessModes = getIriAll( + thing, + "http://www.w3.org/ns/auth/acl#mode" + ) || ["N/A"]; + const whatKind = + getIri(thing, "http://www.w3.org/1999/02/22-rdf-syntax-ns#type") || + "N/A"; + + const usersSharedWith: userHash[] = [ + { + sharedWith: creator, + resourceUrl: accessTo, + accessModes: accessModes, + created: created, + }, + ]; + + sharedItems.push({ + resourceHash, + usersSharedWith, + owner: creator, + whatKind, + }); + } + } catch (error) { + console.log("Error processing thing:", error); + } }); - return sharedItems; + return { + lastAccessed, + sharedItems, + }; +} + +/** + * Records the last access time of the sharedWithMe.ttl file. + * If the triple exists, updates the object to the current date and time. + * If the triple does not exist, creates the triple. + * + * @param dataset The SolidDataset representing the sharedWithMe.ttl file. + * @param fileUrl The URL of the sharedWithMe.ttl file. + */ +export function recordLastAccessTime( + dataset: SolidDataset, + fileUrl: string +): SolidDataset { + const accessTimePredicate = "http://purl.org/dc/terms/modified"; + const thingSubj = `${fileUrl}#lastAccess`; + try { + // change date accessed to current dateTime + let thing = getThing(dataset, thingSubj); + thing = setDatetime(thing, accessTimePredicate, new Date()); + return setThing(dataset, thing); + } catch (error) { + // Triple does not exist, create the triple + try { + let thing = addDatetime( + createThing({ name: "lastAccess" }), + "http://purl.org/dc/terms/modified", + new Date() + ); + return setThing(dataset, thing); + } catch (error) { + console.error("Error creating lastAccess thing:", error); + } + } +} + +export async function saveNewAccessTime(podUrl: string): Promise { + try { + const workingDataset = await getSolidDataset( + `${podUrl}inbox/sharedWithMe.ttl`, + { fetch } + ); + const newAccess = recordLastAccessTime( + workingDataset, + `${podUrl}inbox/sharedWithMe.ttl` + ); + console.log(newAccess); + await saveSolidDatasetAt(`${podUrl}inbox/sharedWithMe.ttl`, newAccess, { + fetch, + }); + return true; + } catch (error) { + console.error("Error saving new access time:", error); + return false; + } } diff --git a/src/components/queryPod.ts b/src/components/queryPod.ts index 28c8f0e4..ef33c501 100644 --- a/src/components/queryPod.ts +++ b/src/components/queryPod.ts @@ -147,7 +147,6 @@ export async function executeQueryWithPodConnected( providedSources: ComunicaSources[], userCachePath: string ): Promise { - // TODO: z3-solver DOES NOT work on a Worker Thread... (maybe could fix?) // First, try to perform the query using the cache worker. // This worker attempts to find results in the user's cache (Solid Pod). @@ -228,7 +227,11 @@ async function sparqlQueryWithCache( const mySparqlEngine = new SparqlEngineCache(); try { - const fetchForCache = createCoiFetch(fetch, { coepCredentialless: false, passthroughOpaque: true, noCors: false }); + const fetchForCache = createCoiFetch(fetch, { + coepCredentialless: false, + passthroughOpaque: true, + noCors: false, + }); // Query executor using Comunica const bindingsStream = await mySparqlEngine.queryBindings(inputQuery, { @@ -315,11 +318,15 @@ async function sparqlQueryWithCache( */ export async function executeQueryInMainThread( inputQuery: string, - mixedSources: ComunicaSources[], + mixedSources: ComunicaSources[] ): Promise { const mySparqlEngine = new SolidQueryEngine(); - const fetchForCache = createCoiFetch(fetch, { coepCredentialless: false, passthroughOpaque: true, noCors: true }); + const fetchForCache = createCoiFetch(fetch, { + coepCredentialless: false, + passthroughOpaque: true, + noCors: true, + }); try { // Query executor using Comunica const bindingsStream = await mySparqlEngine.queryBindings(inputQuery, { @@ -379,7 +386,6 @@ export async function executeQueryInMainThread( } } - /** * Generates a unique 6-character hash using alphanumeric characters. * @param length - Length for the hash @@ -448,35 +454,55 @@ function stringToSeed(str: string): number { * @param podUrl - The URL of the container (should end with a slash, e.g., "https://pod.example.com/"). * @returns the query cache directory path. */ -export async function ensureCacheContainer(podUrl: string, webId: string): Promise { - const cacheUrl = podUrl + "querycache/"; +export async function ensureCacheContainer( + podUrl: string, + webId: string, + providedCache: string +): Promise { + let cacheUrl: string; + + // check if url contains querycache + if (podUrl === providedCache) { + cacheUrl = providedCache + "querycache/"; + } else { + if (!providedCache.endsWith("/")) { + cacheUrl = providedCache + "/"; + } else { + cacheUrl = providedCache; + } + } + try { // Try to retrieve the dataset (container) await getSolidDataset(cacheUrl, { fetch }); return cacheUrl; } catch (error) { - // If not found, create the container - await createContainerAt(cacheUrl, { fetch }); - - // TODO: Change this to just initialize acl with default permissions - // Set public read permissions for the cache container - const publicRead: Permissions = { - read: true, - append: false, - write: false, - control: false, - }; - let aclDataset = await fetchPermissionsData(cacheUrl); - if (aclDataset == null) { - console.warn("Initializing an ACL for your inbox/ container..."); - await generateAcl(cacheUrl, webId); - await changeAclPublic(cacheUrl, publicRead); + // If not found, create the container (if it is the users pod in question) + if (providedCache === podUrl) { + await createContainerAt(cacheUrl, { fetch }); + + // TODO: Change this to just initialize acl with default permissions + // Set public read permissions for the cache container + const publicRead: Permissions = { + read: true, + append: false, + write: false, + control: false, + }; + let aclDataset = await fetchPermissionsData(cacheUrl); + if (aclDataset == null) { + console.warn("Initializing an ACL for your inbox/ container..."); + await generateAcl(cacheUrl, webId); + await changeAclPublic(cacheUrl, publicRead); + } else { + await changeAclPublic(cacheUrl, publicRead); + } + + console.log(`Query Cache container was created at ${cacheUrl}`); + return cacheUrl; } else { - await changeAclPublic(cacheUrl, publicRead); + return error.toString(); } - - console.log(`Query Cache container was created at ${cacheUrl}`); - return cacheUrl; } } @@ -566,7 +592,7 @@ export async function createQueriesTTL( const SPEX = "https://purl.expasy.org/sparql-examples/ontology#"; const cleanedSources: string[] = cleanSourcesUrlsForCache(sources); - console.log(cleanedSources); + // parse input query string using SPARQLjs const serviceSources = parseSparqlQuery(query); diff --git a/src/router.ts b/src/router.ts index 43d915b4..088f5c01 100644 --- a/src/router.ts +++ b/src/router.ts @@ -9,7 +9,7 @@ import DataQuery from "./components/DataQuery.vue"; import EditPrivacy from "./components/EditPrivacy.vue"; import NotFound from "./components/Styling/NotFound.vue"; -import { isLoggedin } from "./components/login"; +import { useAuthStore } from "./stores/auth"; /** * The router here allows for navigation between different functional pages of the TRIPLE App @@ -61,15 +61,18 @@ const router = createRouter({ * (and returning to the login page if logged out at any point) */ const publicPages = ["Home", "Login Page", "Query"]; + setTimeout(() => { + const authStore = useAuthStore(); router.beforeEach(async (to, from, next) => { + // make sure the user is authenticated - if (publicPages.includes(to.name)) { + if (publicPages.includes(to.name as string)) { // Always allow public pages return next(); } // If not logged in, redirect to login - if (!isLoggedin()) { + if (!authStore.loggedIn) { return next({ name: "Login Page" }); } // Otherwise allow navigation From 6717783aa478501df8f75fe955a71ee36da7acd9 Mon Sep 17 00:00:00 2001 From: ecrum19 Date: Mon, 8 Sep 2025 17:33:00 +0200 Subject: [PATCH 7/7] small refresh page fixes --- package.json | 2 +- src/components/DataQuery.vue | 6 ------ src/components/PodBrowser.vue | 7 +++++-- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 89e81000..b0d34ff1 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "core-js": "^3.8.3", "fs": "^0.0.1-security", "pinia": "^2.3.1", - "query-sparql-remote-cache": "^0.0.8", + "query-sparql-remote-cache": "^0.0.9", "sparqljs": "^3.7.3", "vite": "^6.2.3", "vue": "^3.2.13", diff --git a/src/components/DataQuery.vue b/src/components/DataQuery.vue index 467bf1e3..e8b40a8e 100644 --- a/src/components/DataQuery.vue +++ b/src/components/DataQuery.vue @@ -1315,11 +1315,6 @@ export default { }, deep: true, }, - selectedPodUrl(newValue, oldValue) { - if (newValue !== oldValue) { - window.location.reload(); - } - }, }, beforeUnmount() { if (this.worker) this.worker.terminate(); @@ -1332,7 +1327,6 @@ export default { showQueryButton: false, }); this.yasqe.setValue(this.currentQuery.query); - this.yasqe.on("change", (instance) => { this.currentQuery.query = instance.getValue(); }); diff --git a/src/components/PodBrowser.vue b/src/components/PodBrowser.vue index 72bf66d8..edba64cf 100644 --- a/src/components/PodBrowser.vue +++ b/src/components/PodBrowser.vue @@ -81,7 +81,10 @@
      -
      +
      + No info to display +
      +
      Source IRI:
      {{ @@ -408,7 +411,7 @@ export default { watch: { selectedPodUrl(newValue, oldValue) { if (newValue !== oldValue) { - window.location.reload(); + this.getItems(this.selectedPodUrl); // Fetch items for the initial path } }, },