From c7c4950b9245afc9fadca614f796a906374fba43 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Wed, 16 Mar 2022 11:02:57 +0100
Subject: [PATCH 01/24] show workspace in dataset table
---
frontend/components/core/ReTableInfo.vue | 9 ++++++---
frontend/pages/ws/_workspace/index.vue | 1 +
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/frontend/components/core/ReTableInfo.vue b/frontend/components/core/ReTableInfo.vue
index fa14679455..4844f65974 100644
--- a/frontend/components/core/ReTableInfo.vue
+++ b/frontend/components/core/ReTableInfo.vue
@@ -494,9 +494,12 @@ export default {
&:nth-last-of-type(3) {
max-width: 180px;
}
- &:nth-of-type(2) {
- min-width: 30%;
- }
+ // &:nth-of-type(2) {
+ // min-width: 30%;
+ // }
+ // .task span {
+ // display: flex;
+ // }
&:first-child {
flex-shrink: 0;
min-width: 220px;
diff --git a/frontend/pages/ws/_workspace/index.vue b/frontend/pages/ws/_workspace/index.vue
index ea5a92b273..07f7592873 100644
--- a/frontend/pages/ws/_workspace/index.vue
+++ b/frontend/pages/ws/_workspace/index.vue
@@ -69,6 +69,7 @@ export default {
querySearch: undefined,
tableColumns: [
{ name: "Name", field: "name", class: "table-info__title", type: "link" },
+ { name: "Workspace", field: "owner", class: "text", type: "text" },
{ name: "Tags", field: "tags", class: "text", type: "object" },
{ name: "Task", field: "task", class: "task", type: "task" },
{ name: "Created at", field: "created_at", class: "date", type: "date" },
From 1697c0da7e65b0e24d7e080104cab5c5cda68415 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Thu, 17 Mar 2022 10:23:00 +0100
Subject: [PATCH 02/24] new user dropdown
---
frontend/assets/icons/docs.js | 27 ++++
frontend/assets/icons/index.js | 18 +--
frontend/assets/icons/logout.js | 8 +-
.../components/commons/header/user/user.vue | 131 ++++--------------
frontend/static/icons/docs.svg | 13 ++
frontend/static/icons/logout.svg | 16 +--
6 files changed, 82 insertions(+), 131 deletions(-)
create mode 100644 frontend/assets/icons/docs.js
create mode 100644 frontend/static/icons/docs.svg
diff --git a/frontend/assets/icons/docs.js b/frontend/assets/icons/docs.js
new file mode 100644
index 0000000000..4145af4ad9
--- /dev/null
+++ b/frontend/assets/icons/docs.js
@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+ 'docs': {
+ width: 12,
+ height: 16,
+ viewBox: '0 0 12 16',
+ data: ''
+ }
+})
\ No newline at end of file
diff --git a/frontend/assets/icons/index.js b/frontend/assets/icons/index.js
index a2edd67811..58d8f9dc6a 100644
--- a/frontend/assets/icons/index.js
+++ b/frontend/assets/icons/index.js
@@ -1,20 +1,3 @@
-/*
- * coding=utf-8
- * Copyright 2021-present, the Recognai S.L. team.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
/* eslint-disable */
require('./annotate-view')
require('./arrow-bottom')
@@ -41,6 +24,7 @@ require('./datasets-empty')
require('./datasource')
require('./datasources')
require('./delete')
+require('./docs')
require('./double-chev')
require('./drop-down')
require('./drop-up')
diff --git a/frontend/assets/icons/logout.js b/frontend/assets/icons/logout.js
index a794741ee7..e8295806af 100644
--- a/frontend/assets/icons/logout.js
+++ b/frontend/assets/icons/logout.js
@@ -19,9 +19,9 @@
var icon = require('vue-svgicon')
icon.register({
'logout': {
- width: 17,
- height: 22,
- viewBox: '0 0 17 22',
- data: ''
+ width: 12,
+ height: 15,
+ viewBox: '0 0 12 15',
+ data: ''
}
})
\ No newline at end of file
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index 73bfe0d172..4742dbe65f 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -1,51 +1,19 @@
@@ -53,11 +21,8 @@
@@ -144,61 +90,40 @@ $buttonSize: 30px;
}
&__content {
position: absolute;
- top: 3em;
+ top: 3.5em;
right: 0;
+ padding-top: 1em;
background: $lighter-color;
border-radius: 3px;
- @include font-size(12px);
- font-weight: 600;
+ @include font-size(14px);
+ font-weight: 400;
color: palette(grey, medium);
- padding: 1.2em 1.2em 0.8em 1.2em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
min-width: 200px;
+ text-align: center;
a {
text-decoration: none;
}
}
+ &__name {
+ color: palette(grey, dark);
+ @include font-size(16px);
+ margin-bottom: 0.5em;
+ margin-top: 0;
+ }
&__mail {
margin-bottom: 1em;
margin-top: 0;
}
- &__logout {
- display: block;
- @include font-size(14px);
- margin-top: 0.5em;
- }
- &__workspace {
+ &__link {
display: flex;
align-items: center;
- outline: none !important;
- padding: 0.7em;
- margin: 0 -0.5em 0 -0.5em;
- transition: background-color 0.3s ease-in-out;
- border-radius: 3px;
- &:hover {
- background: #f5f5f5;
- transition: background-color 0.3s ease-in-out;
- }
- &__circle {
- @extend %circle;
- margin-right: 0.7em;
- background: palette(grey, dark);
- color: $lighter-color;
- &.active {
- background: $primary-color;
- }
- }
- &__name {
- color: palette(grey, dark);
- margin-top: 0;
- margin-bottom: 0;
- line-height: 1.4em;
- span {
- display: block;
- margin-top: 0;
- margin-bottom: 0;
- color: palette(grey, medium);
- }
+ margin-top: 0.5em;
+ text-align: left;
+ color: palette(grey, medium);
+ margin-left: 1em;
+ .svg-icon {
+ margin-right: 0.5em;
}
}
}
@@ -209,6 +134,8 @@ $buttonSize: 30px;
font-weight: 400;
color: palette(grey, dark);
line-height: 1em;
- margin-top: 1em;
+ margin-top: 1.5em;
+ padding: 1em;
+ background: #fcfcfc;
}
diff --git a/frontend/static/icons/docs.svg b/frontend/static/icons/docs.svg
new file mode 100644
index 0000000000..9619643429
--- /dev/null
+++ b/frontend/static/icons/docs.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/frontend/static/icons/logout.svg b/frontend/static/icons/logout.svg
index 10e5250e56..a511cba9ff 100644
--- a/frontend/static/icons/logout.svg
+++ b/frontend/static/icons/logout.svg
@@ -1,12 +1,12 @@
-
-
+
+
+ {{arrayItem}}{{index + 1 === itemValue(item, column).length ? '' : ','}}
+
+
0) {
- return Object.keys(this.data[0]);
- }
- return [];
- },
filterActions() {
return this.actions.filter((a) => a.hide !== this.hideButton);
},
@@ -314,6 +314,16 @@ export default {
}
return false;
};
+ const matchFilters = (item) => {
+ if (Object.values(this.filters).length) {
+ return Object.keys(this.filters).every(key => {
+ return this.filters[key]
+ .toString()
+ .includes(item[key]);
+ })
+ }
+ return true;
+ };
const itemComparator = (a, b) => {
let modifier = 1;
if (this.sortedOrder === "desc") modifier = -1;
@@ -321,7 +331,7 @@ export default {
if (a[this.sortedBy] > b[this.sortedBy]) return 1 * modifier;
return 0;
};
- const results = this.data.filter(matchSearch);
+ const results = this.data.filter(matchSearch).filter(matchFilters);
return results.sort(itemComparator);
},
groups() {
@@ -340,18 +350,15 @@ export default {
this.sortedBy = this.sortedByField;
},
mounted() {
+ if (this.filterFromRoute && this.$route.query[this.filterFromRoute]) {
+ this.$set(this.filters, this.filterFromRoute, this.$route.query[this.filterFromRoute])
+ }
this.filteredResults.forEach((r) => {
const rec = r;
rec.selectedRecord = false;
});
},
methods: {
- itemDisabled(item) {
- if (item.status) {
- return item.status.toLowerCase() !== "ready";
- }
- return undefined;
- },
itemValue(item, column) {
if (column.subfield) {
return item[column.field][column.subfield];
@@ -368,6 +375,13 @@ export default {
this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
}
},
+ onApplyFilters(column, selectedOptions) {
+ if (selectedOptions.length) {
+ this.$set(this.filters, column.field, selectedOptions)
+ } else {
+ this.$delete(this.filters, column.field)
+ }
+ },
filteredResultsByGroup(group) {
if (this.groupBy) {
return this.filteredResults.filter(
@@ -432,12 +446,10 @@ export default {
}
&__header {
background: $lighter-color;
- min-height: auto;
+ min-height: 50px;
position: relative;
- padding-bottom: 0.3em;
margin-top: 1em;
margin-bottom: 3px;
- padding: 1em 0;
&__checkbox {
margin: 0 !important;
}
@@ -448,11 +460,13 @@ export default {
margin-bottom: 0 !important;
}
#{$this}__item {
- min-height: auto;
+ min-height: 50px;
background: none;
border-bottom: none;
- padding-top: 0;
+ padding-top: 0.2em;
padding-bottom: 0.2em;
+ display: flex;
+ align-items: center;
}
button:not(.re-button) {
cursor: pointer;
@@ -494,12 +508,6 @@ export default {
&:nth-last-of-type(3) {
max-width: 180px;
}
- // &:nth-of-type(2) {
- // min-width: 30%;
- // }
- // .task span {
- // display: flex;
- // }
&:first-child {
flex-shrink: 0;
min-width: 220px;
diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
new file mode 100644
index 0000000000..8887f1db74
--- /dev/null
+++ b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -0,0 +1,202 @@
+
+
+
+
+
+
+ -
+
+ {{ option }} ({{ datasetsCounter(option) | formatNumber }})
+
+
+ -
+ 0 results
+
+
+
+
+
+
+
+
+
diff --git a/frontend/models/Workspace.js b/frontend/models/Workspace.js
index fb3e5e8132..547afea22d 100644
--- a/frontend/models/Workspace.js
+++ b/frontend/models/Workspace.js
@@ -20,21 +20,13 @@ function defaultWorkspace(user) {
}
function currentWorkspace(route) {
- return route.params.workspace;
-}
-function workspaceHome(ws) {
- return `/ws/${ws}`;
+ return route.query.owner;
}
-function setWorkspace(router, workspace) {
- router.push(workspaceHome(workspace));
-}
const NO_WORKSPACE = "-";
export {
defaultWorkspace,
currentWorkspace,
- setWorkspace,
- workspaceHome,
NO_WORKSPACE,
};
From 6d51742ab5f70baa66b32d2ca6353bf1e3a3cc2d Mon Sep 17 00:00:00 2001
From: LeireA
Date: Mon, 21 Mar 2022 11:47:05 +0100
Subject: [PATCH 07/24] test table components
---
.../components/core/table/ReTableInfo.spec.js | 65 +++++++++++++++++++
.../core/table/TableFiltrableColumn.spec.js | 36 ++++++++++
.../__snapshots__/ReTableInfo.spec.js.snap | 58 +++++++++++++++++
.../TableFiltrableColumn.spec.js.snap | 11 ++++
4 files changed, 170 insertions(+)
create mode 100644 frontend/specs/components/core/table/ReTableInfo.spec.js
create mode 100644 frontend/specs/components/core/table/TableFiltrableColumn.spec.js
create mode 100644 frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
create mode 100644 frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap
diff --git a/frontend/specs/components/core/table/ReTableInfo.spec.js b/frontend/specs/components/core/table/ReTableInfo.spec.js
new file mode 100644
index 0000000000..88594a71d3
--- /dev/null
+++ b/frontend/specs/components/core/table/ReTableInfo.spec.js
@@ -0,0 +1,65 @@
+import { mount } from "@vue/test-utils";
+import ReTableInfo from "@/components/core/table/ReTableInfo";
+
+const $route = {
+ query: {},
+};
+
+function mountReTableInfo() {
+ return mount(ReTableInfo, {
+ propsData: {
+ actions: [],
+ columns: [
+ {
+ class: "text",
+ field: "owner",
+ filtrable: "true",
+ name: "Workspace",
+ type: "text",
+ }
+ ],
+ data: [
+ {
+ name: "dataset_1",
+ owner: "recognai",
+ task: "TokenClassification",
+ },
+ {
+ name: "dataset_2",
+ owner: "recognai",
+ task: "TokenClassification",
+ },
+ ],
+ deleteModalContent: {
+ text:"You are about to delete: undefined. This action cannot be undone",
+ title:"Delete confirmation",
+ },
+ emptySearchInfo: {
+ title:"0 datasets found",
+ },
+ globalActions:false,
+ groupBy:undefined,
+ hideButton:false,
+ noDataInfo:undefined,
+ querySearch: undefined,
+ filterFromRoute:"owner",
+ searchOn: "name",
+ sortedByField:"last_updated",
+ sortedOrder: "desc",
+ visibleModalId: undefined,
+ },
+ mocks: {
+ $route,
+ },
+ });
+}
+
+describe("ReTableInfo", () => {
+ let spy = jest.spyOn(console, "error");
+ afterEach(() => spy.mockReset());
+
+ test("renders properly", () => {
+ const wrapper = mountReTableInfo();
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});
diff --git a/frontend/specs/components/core/table/TableFiltrableColumn.spec.js b/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
new file mode 100644
index 0000000000..b4f8f9427d
--- /dev/null
+++ b/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
@@ -0,0 +1,36 @@
+import { mount } from "@vue/test-utils";
+import TableFiltrableColumn from "@/components/core/table/TableFiltrableColumn";
+
+function mountTableFiltrableColumn() {
+ return mount(TableFiltrableColumn, {
+ propsData: {
+ filters: {
+ owner: ["recognai"]
+ },
+ column: {
+ class: "text",
+ field: "owner",
+ filtrable: "true",
+ name: "Workspace",
+ type: "text",
+ },
+ data: [
+ {
+ name: "dataset_1",
+ owner: "recognai",
+ task: "TokenClassification",
+ },
+ ],
+ },
+ });
+}
+
+describe("TableFiltrableColumn", () => {
+ let spy = jest.spyOn(console, "error");
+ afterEach(() => spy.mockReset());
+
+ test("renders properly", () => {
+ const wrapper = mountTableFiltrableColumn();
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});
diff --git a/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap b/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
new file mode 100644
index 0000000000..9e4ee490ce
--- /dev/null
+++ b/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReTableInfo renders properly 1`] = `
+
+
+
+
+
+
+ -
+
recognai
+
+
+
+
Delete confirmation
+
You are about to delete: undefined. This action cannot be undone
+
+
+ Cancel
+
+
+ Yes, delete
+
+
+
+
+
+
+ -
+
recognai
+
+
+
+
Delete confirmation
+
You are about to delete: undefined. This action cannot be undone
+
+
+ Cancel
+
+
+ Yes, delete
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap b/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap
new file mode 100644
index 0000000000..566e215d2a
--- /dev/null
+++ b/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableFiltrableColumn renders properly 1`] = `
+
+`;
From 7b144247cc4ea26e6b63870d8d13a93914edbcf8 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Mon, 21 Mar 2022 12:23:58 +0100
Subject: [PATCH 08/24] fix lint
---
.../components/commons/header/user/user.vue | 22 +++++----
.../components/core/table/ReTableInfo.vue | 49 ++++++++++++-------
.../core/table/TableFiltrableColumn.vue | 45 +++++++----------
frontend/pages/ws/datasets/_dataset/index.vue | 7 ++-
frontend/pages/ws/datasets/index.vue | 16 +++++-
.../components/core/table/ReTableInfo.spec.js | 20 ++++----
.../core/table/TableFiltrableColumn.spec.js | 2 +-
7 files changed, 91 insertions(+), 70 deletions(-)
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index d2ee94dc47..381db88495 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -1,19 +1,21 @@
@@ -98,10 +100,10 @@ $buttonSize: 30px;
@include font-size(14px);
font-weight: 400;
color: palette(grey, medium);
- box-shadow: 0 5px 12px 0 rgba(204,204,204,0.50);
+ box-shadow: 0 5px 12px 0 rgba(204, 204, 204, 0.5);
min-width: 290px;
&:after {
- position: absolute;
+ position: absolute;
top: -12px;
right: 1.2em;
@include triangle(top, 12px, 12px, white);
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index 646b5841ff..b8a5387bc8 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -26,7 +26,13 @@
:key="key"
class="table-info__item__col"
>
-
+
@@ -108,8 +109,16 @@
{{ itemValue(item, column) | percent }}
-
- {{arrayItem}}{{index + 1 === itemValue(item, column).length ? '' : ','}}
+
+ {{ arrayItem
+ }}{{
+ index + 1 === itemValue(item, column).length
+ ? ""
+ : ","
+ }}
@@ -281,7 +290,7 @@ export default {
filterFromRoute: {
type: String,
default: undefined,
- }
+ },
},
data() {
return {
@@ -290,7 +299,7 @@ export default {
sortedBy: this.sortedByField,
allRecordsSelected: false,
selectedItems: [],
- filters: {}
+ filters: {},
};
},
computed: {
@@ -316,11 +325,9 @@ export default {
};
const matchFilters = (item) => {
if (Object.values(this.filters).length) {
- return Object.keys(this.filters).every(key => {
- return this.filters[key]
- .toString()
- .includes(item[key]);
- })
+ return Object.keys(this.filters).every((key) => {
+ return this.filters[key].toString().includes(item[key]);
+ });
}
return true;
};
@@ -351,7 +358,11 @@ export default {
},
mounted() {
if (this.filterFromRoute && this.$route.query[this.filterFromRoute]) {
- this.$set(this.filters, this.filterFromRoute, this.$route.query[this.filterFromRoute])
+ this.$set(
+ this.filters,
+ this.filterFromRoute,
+ this.$route.query[this.filterFromRoute]
+ );
}
this.filteredResults.forEach((r) => {
const rec = r;
@@ -377,9 +388,9 @@ export default {
},
onApplyFilters(column, selectedOptions) {
if (selectedOptions.length) {
- this.$set(this.filters, column.field, selectedOptions)
+ this.$set(this.filters, column.field, selectedOptions);
} else {
- this.$delete(this.filters, column.field)
+ this.$delete(this.filters, column.field);
}
},
filteredResultsByGroup(group) {
diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
index 8887f1db74..a95925bd6f 100644
--- a/frontend/components/core/table/TableFiltrableColumn.vue
+++ b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -6,10 +6,7 @@
:class="[visibleFilter || selectedOptions.length ? 'active' : '']"
>
{{ column.name }}
-
+
-
+
-
diff --git a/frontend/pages/ws/datasets/_dataset/index.vue b/frontend/pages/ws/datasets/_dataset/index.vue
index fcd7a2a1d3..b5738aa310 100644
--- a/frontend/pages/ws/datasets/_dataset/index.vue
+++ b/frontend/pages/ws/datasets/_dataset/index.vue
@@ -53,8 +53,11 @@ export default {
}),
breadcrumbs() {
return [
- { link: { path: '/ws/datasets' }, name: 'Datasets' },
- { link: { path: `/ws/datasets?owner=${this.$route.query.owner}`}, name: this.workspace },
+ { link: { path: "/ws/datasets" }, name: "Datasets" },
+ {
+ link: { path: `/ws/datasets?owner=${this.$route.query.owner}` },
+ name: this.workspace,
+ },
{
link: this.$route.fullPath,
name: this.dataset ? this.dataset.name : undefined,
diff --git a/frontend/pages/ws/datasets/index.vue b/frontend/pages/ws/datasets/index.vue
index be5a7e5552..772715167d 100644
--- a/frontend/pages/ws/datasets/index.vue
+++ b/frontend/pages/ws/datasets/index.vue
@@ -71,9 +71,21 @@ export default {
querySearch: undefined,
tableColumns: [
{ name: "Name", field: "name", class: "table-info__title", type: "link" },
- { name: "Workspace", field: "owner", class: "text", type: "text", filtrable: "true" },
+ {
+ name: "Workspace",
+ field: "owner",
+ class: "text",
+ type: "text",
+ filtrable: "true",
+ },
{ name: "Tags", field: "tags", class: "text", type: "object" },
- { name: "Task", field: "task", class: "task", type: "task", filtrable: "true" },
+ {
+ name: "Task",
+ field: "task",
+ class: "task",
+ type: "task",
+ filtrable: "true",
+ },
{ name: "Created at", field: "created_at", class: "date", type: "date" },
{
name: "Updated at",
diff --git a/frontend/specs/components/core/table/ReTableInfo.spec.js b/frontend/specs/components/core/table/ReTableInfo.spec.js
index 88594a71d3..4443697de2 100644
--- a/frontend/specs/components/core/table/ReTableInfo.spec.js
+++ b/frontend/specs/components/core/table/ReTableInfo.spec.js
@@ -16,7 +16,7 @@ function mountReTableInfo() {
filtrable: "true",
name: "Workspace",
type: "text",
- }
+ },
],
data: [
{
@@ -31,20 +31,20 @@ function mountReTableInfo() {
},
],
deleteModalContent: {
- text:"You are about to delete: undefined. This action cannot be undone",
- title:"Delete confirmation",
+ text: "You are about to delete: undefined. This action cannot be undone",
+ title: "Delete confirmation",
},
emptySearchInfo: {
- title:"0 datasets found",
+ title: "0 datasets found",
},
- globalActions:false,
- groupBy:undefined,
- hideButton:false,
- noDataInfo:undefined,
+ globalActions: false,
+ groupBy: undefined,
+ hideButton: false,
+ noDataInfo: undefined,
querySearch: undefined,
- filterFromRoute:"owner",
+ filterFromRoute: "owner",
searchOn: "name",
- sortedByField:"last_updated",
+ sortedByField: "last_updated",
sortedOrder: "desc",
visibleModalId: undefined,
},
diff --git a/frontend/specs/components/core/table/TableFiltrableColumn.spec.js b/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
index b4f8f9427d..5648cd1cca 100644
--- a/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
+++ b/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
@@ -5,7 +5,7 @@ function mountTableFiltrableColumn() {
return mount(TableFiltrableColumn, {
propsData: {
filters: {
- owner: ["recognai"]
+ owner: ["recognai"],
},
column: {
class: "text",
From a5e1d0bc7c85778176c844104c7d12ebe8473517 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Tue, 22 Mar 2022 11:41:35 +0100
Subject: [PATCH 09/24] new route structure and redirect old url
---
.../components/core/table/ReTableInfo.vue | 18 ++++++++----
frontend/models/Workspace.js | 2 +-
.../_workspace}/_dataset/index.vue | 6 ++--
frontend/pages/{ws => }/datasets/index.vue | 6 ++--
frontend/pages/index.vue | 2 +-
frontend/pages/ws/_id/_dataset/index.vue | 28 +++++++++++++++++++
frontend/pages/ws/_id/index.vue | 26 +++++++++++++++++
frontend/pages/ws/index.vue | 26 +++++++++++++++++
8 files changed, 101 insertions(+), 13 deletions(-)
rename frontend/pages/{ws/datasets => datasets/_workspace}/_dataset/index.vue (93%)
rename frontend/pages/{ws => }/datasets/index.vue (97%)
create mode 100644 frontend/pages/ws/_id/_dataset/index.vue
create mode 100644 frontend/pages/ws/_id/index.vue
create mode 100644 frontend/pages/ws/index.vue
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index b8a5387bc8..04ba87622e 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -288,8 +288,13 @@ export default {
default: undefined,
},
filterFromRoute: {
- type: String,
- default: undefined,
+ type: Object,
+ default: () => {
+ return {
+ query: undefined,
+ field: undefined,
+ };
+ },
},
},
data() {
@@ -357,11 +362,14 @@ export default {
this.sortedBy = this.sortedByField;
},
mounted() {
- if (this.filterFromRoute && this.$route.query[this.filterFromRoute]) {
+ if (
+ this.filterFromRoute.query &&
+ this.$route.query[this.filterFromRoute.query]
+ ) {
this.$set(
this.filters,
- this.filterFromRoute,
- this.$route.query[this.filterFromRoute]
+ this.filterFromRoute.field,
+ this.$route.query[this.filterFromRoute.query]
);
}
this.filteredResults.forEach((r) => {
diff --git a/frontend/models/Workspace.js b/frontend/models/Workspace.js
index 547afea22d..dd8f574656 100644
--- a/frontend/models/Workspace.js
+++ b/frontend/models/Workspace.js
@@ -20,7 +20,7 @@ function defaultWorkspace(user) {
}
function currentWorkspace(route) {
- return route.query.owner;
+ return route.params.workspace;
}
diff --git a/frontend/pages/ws/datasets/_dataset/index.vue b/frontend/pages/datasets/_workspace/_dataset/index.vue
similarity index 93%
rename from frontend/pages/ws/datasets/_dataset/index.vue
rename to frontend/pages/datasets/_workspace/_dataset/index.vue
index b5738aa310..f8b457e1a2 100644
--- a/frontend/pages/ws/datasets/_dataset/index.vue
+++ b/frontend/pages/datasets/_workspace/_dataset/index.vue
@@ -30,7 +30,7 @@
@@ -53,9 +53,9 @@ export default {
}),
breadcrumbs() {
return [
- { link: { path: "/ws/datasets" }, name: "Datasets" },
+ { link: { path: "/datasets" }, name: "Datasets" },
{
- link: { path: `/ws/datasets?owner=${this.$route.query.owner}` },
+ link: { path: `/datasets?workspace=${this.$route.params.workspace}` },
name: this.workspace,
},
{
diff --git a/frontend/pages/ws/datasets/index.vue b/frontend/pages/datasets/index.vue
similarity index 97%
rename from frontend/pages/ws/datasets/index.vue
rename to frontend/pages/datasets/index.vue
index 772715167d..bf2beda0be 100644
--- a/frontend/pages/ws/datasets/index.vue
+++ b/frontend/pages/datasets/index.vue
@@ -22,7 +22,7 @@
export default {
mounted() {
- this.$router.push("/ws/datasets");
+ this.$router.push("/datasets");
},
};
diff --git a/frontend/pages/ws/_id/_dataset/index.vue b/frontend/pages/ws/_id/_dataset/index.vue
new file mode 100644
index 0000000000..ae4768ea7b
--- /dev/null
+++ b/frontend/pages/ws/_id/_dataset/index.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/frontend/pages/ws/_id/index.vue b/frontend/pages/ws/_id/index.vue
new file mode 100644
index 0000000000..4246b3dd79
--- /dev/null
+++ b/frontend/pages/ws/_id/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/frontend/pages/ws/index.vue b/frontend/pages/ws/index.vue
new file mode 100644
index 0000000000..d0174b2d2a
--- /dev/null
+++ b/frontend/pages/ws/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
From 68dd54a9c37c441309173ee62b5bd0c8a1556102 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Tue, 22 Mar 2022 11:43:10 +0100
Subject: [PATCH 10/24] display the two first characters of user name
---
frontend/components/commons/header/user/user.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index 381db88495..4088d1b075 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -45,7 +45,7 @@ export default {
getRubrixVersion: "entities/rubrix-info/getRubrixVersion",
}),
firstChar(name) {
- return name.charAt(0);
+ return name.slice(0,2);
},
showSelector() {
this.visibleSelector = !this.visibleSelector;
@@ -62,7 +62,7 @@ export default {
From 3cd7d3bc9617a9635285031633e7b8f9d3ef7620 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Tue, 22 Mar 2022 14:28:02 +0100
Subject: [PATCH 13/24] fix conflict
---
frontend/components/commons/header/user/user.vue | 3 ---
1 file changed, 3 deletions(-)
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index 93b37f259a..7cbc065b21 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -141,11 +141,8 @@ $buttonSize: 34px;
margin-top: 1.5em;
padding: 1em;
background: #fcfcfc;
-<<<<<<< HEAD
text-align: right;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-=======
->>>>>>> f4bf8517... new user dropdown
}
From f35b8a6e8bf00e7c7bd3cbfda7522dd98ea47394 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Tue, 22 Mar 2022 14:35:41 +0100
Subject: [PATCH 14/24] cols width
---
frontend/components/core/table/ReTableInfo.vue | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index 04ba87622e..4a3914db1d 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -521,12 +521,9 @@ export default {
text-align: left;
margin-right: 1.5em;
flex: 1 1 0px;
- &:nth-last-of-type(-n + 2) {
+ &:nth-last-of-type(-n + 1) {
max-width: 120px;
}
- &:nth-last-of-type(3) {
- max-width: 180px;
- }
&:first-child {
flex-shrink: 0;
min-width: 220px;
From 9b840f08ff8947f5607b66800fd79ea7aaa364b3 Mon Sep 17 00:00:00 2001
From: LeireA
Date: Wed, 23 Mar 2022 10:57:09 +0100
Subject: [PATCH 15/24] qa
---
.../scss/abstract/variables/_variables.scss | 6 ++---
.../components/commons/header/user/user.vue | 4 +--
.../components/core/table/ReTableInfo.vue | 12 +++++++--
.../core/table/TableFiltrableColumn.vue | 27 ++++++++++++++-----
frontend/models/Workspace.js | 7 +----
frontend/pages/datasets/index.vue | 2 +-
6 files changed, 36 insertions(+), 22 deletions(-)
diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
index 15ea12f110..b905cd508b 100644
--- a/frontend/assets/scss/abstract/variables/_variables.scss
+++ b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -106,13 +106,11 @@ $cb-slow: cubic-bezier(0.59,
$maxwidth: 980px;
// Utilities
//-----------
+$border-radius: 5px;
$radius: 0.5em;
// Shadows
//-----------
-$shadow: 0 2px 4px 0 rgba(0,
-0,
-0,
-0.27);
+$shadow: 0 5px 10px 0 rgba(204, 204, 204, 0.5);
$shadow-light: 0 1px 4px 1px rgba(222,
222,
222,
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index 7cbc065b21..dfc9df3bc6 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -45,7 +45,7 @@ export default {
getRubrixVersion: "entities/rubrix-info/getRubrixVersion",
}),
firstChar(name) {
- return name.slice(0,2);
+ return name.slice(0, 2);
},
showSelector() {
this.visibleSelector = !this.visibleSelector;
@@ -100,7 +100,7 @@ $buttonSize: 34px;
@include font-size(14px);
font-weight: 400;
color: palette(grey, medium);
- box-shadow: 0 5px 12px 0 rgba(204, 204, 204, 0.5);
+ box-shadow: $shadow;
min-width: 290px;
&:after {
position: absolute;
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index 4a3914db1d..dff540abd3 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -122,8 +122,16 @@
-
- {{arrayItem}}{{index + 1 === itemValue(item, column).length ? '' : ','}}
+
+ {{ arrayItem
+ }}{{
+ index + 1 === itemValue(item, column).length
+ ? ""
+ : ","
+ }}
diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
index a95925bd6f..e7ce06cee4 100644
--- a/frontend/components/core/table/TableFiltrableColumn.vue
+++ b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -99,7 +99,15 @@ export default {
return filtered;
},
datasetsCounter(option) {
- return this.data.filter(
+ const keys = Object.keys(this.filters).filter(
+ (k) => k !== this.column.field
+ );
+ const filteredData = this.data.filter((dataset) => {
+ return keys.every((key) => {
+ return this.filters[key].includes(dataset[key]);
+ });
+ });
+ return filteredData.filter(
(dataset) => dataset[this.column.field] === option
).length;
},
@@ -111,15 +119,15 @@ export default {
background: $bg;
position: absolute;
top: 50px;
- left: 0;
+ left: -1em;
margin-top: 0;
padding: 10px 20px;
z-index: 3;
transform: translate(0);
right: auto;
min-width: 270px;
- border-radius: 3px;
- box-shadow: 0 5px 12px 0 rgba(204, 204, 204, 0.7);
+ border-radius: $border-radius;
+ box-shadow: $shadow;
ul {
list-style: none;
max-height: 220px;
@@ -177,14 +185,19 @@ button {
color: $font-secondary;
@include font-size(14px);
font-family: $sff;
+ &:hover,
&.active {
background: $bg;
min-height: 40px;
padding: 0 1em;
- border-radius: 3px;
+ margin: 0 -1em;
+ border-radius: $border-radius;
color: $primary-color;
- ::v-deep svg * {
- fill: $primary-color !important;
+ ::v-deep svg {
+ margin-right: 0;
+ & > * {
+ fill: $primary-color !important;
+ }
}
}
.svg-icon {
diff --git a/frontend/models/Workspace.js b/frontend/models/Workspace.js
index dd8f574656..0e0cf37c85 100644
--- a/frontend/models/Workspace.js
+++ b/frontend/models/Workspace.js
@@ -23,10 +23,5 @@ function currentWorkspace(route) {
return route.params.workspace;
}
-
const NO_WORKSPACE = "-";
-export {
- defaultWorkspace,
- currentWorkspace,
- NO_WORKSPACE,
-};
+export { defaultWorkspace, currentWorkspace, NO_WORKSPACE };
diff --git a/frontend/pages/datasets/index.vue b/frontend/pages/datasets/index.vue
index bf2beda0be..46782cf942 100644
--- a/frontend/pages/datasets/index.vue
+++ b/frontend/pages/datasets/index.vue
@@ -78,7 +78,6 @@ export default {
type: "text",
filtrable: "true",
},
- { name: "Tags", field: "tags", class: "text", type: "object" },
{
name: "Task",
field: "task",
@@ -86,6 +85,7 @@ export default {
type: "task",
filtrable: "true",
},
+ { name: "Tags", field: "tags", class: "text", type: "object" },
{ name: "Created at", field: "created_at", class: "date", type: "date" },
{
name: "Updated at",
From 217f1a34b998aedb8407784567a0db011b3c398e Mon Sep 17 00:00:00 2001
From: LeireA
Date: Wed, 23 Mar 2022 13:43:31 +0100
Subject: [PATCH 16/24] styles
---
frontend/assets/scss/abstract/variables/_variables.scss | 2 +-
frontend/components/commons/header/user/user.vue | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
index b905cd508b..0cbd27fa64 100644
--- a/frontend/assets/scss/abstract/variables/_variables.scss
+++ b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -110,7 +110,7 @@ $border-radius: 5px;
$radius: 0.5em;
// Shadows
//-----------
-$shadow: 0 5px 10px 0 rgba(204, 204, 204, 0.5);
+$shadow: 0 8px 20px 0 rgba(93,105,151,0.20);
$shadow-light: 0 1px 4px 1px rgba(222,
222,
222,
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index dfc9df3bc6..0730b665b7 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -92,7 +92,7 @@ $buttonSize: 34px;
}
&__content {
position: absolute;
- top: 3.5em;
+ top: 3.8em;
right: -1em;
padding-top: 1.5em;
background: $lighter-color;
@@ -101,7 +101,7 @@ $buttonSize: 34px;
font-weight: 400;
color: palette(grey, medium);
box-shadow: $shadow;
- min-width: 290px;
+ min-width: 300px;
&:after {
position: absolute;
top: -12px;
From bed3148735ae2e72362ef61dfdea36badf518bf8 Mon Sep 17 00:00:00 2001
From: dcfidalgo
Date: Wed, 23 Mar 2022 17:43:48 +0100
Subject: [PATCH 17/24] fix: update text for DatasetsEmpty
---
.../components/commons/datasets-list/DatasetsEmpty.vue | 9 +++------
1 file changed, 3 insertions(+), 6 deletions(-)
diff --git a/frontend/components/commons/datasets-list/DatasetsEmpty.vue b/frontend/components/commons/datasets-list/DatasetsEmpty.vue
index 87b9218041..ce8585f4ca 100644
--- a/frontend/components/commons/datasets-list/DatasetsEmpty.vue
+++ b/frontend/components/commons/datasets-list/DatasetsEmpty.vue
@@ -13,7 +13,7 @@
see the docs for
more information.
-
+
@@ -28,14 +28,11 @@ export default {
},
methods: {
- generateCodeSnippet(ws) {
+ generateCodeSnippet() {
return `import rubrix as rb
-# If you are using the default installation you can skip this line
-rb.set_workspace("${ws}")
-
rb.log(
- rb.TextClassificationRecord(inputs="my first rubrix example"),
+ rb.TextClassificationRecord(text="my first rubrix example"),
name='example-dataset'
)`;
},
From 4d7018a343a988cee0b58aa62277f10fc32b32bf Mon Sep 17 00:00:00 2001
From: LeireA
Date: Thu, 24 Mar 2022 12:37:35 +0100
Subject: [PATCH 18/24] show workspace in url
---
frontend/components/core/table/ReTableInfo.vue | 6 +++++-
frontend/pages/datasets/_workspace/_dataset/index.vue | 4 +++-
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index dff540abd3..b5fe77da5c 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -233,6 +233,7 @@