Skip to content

Commit

Permalink
Improve UI responsiveness (#8)
Browse files Browse the repository at this point in the history 
Co-authored-by: Andy Mair
Co-authored-by: Philip Burrows

Signed-off-by: Alessandro Pomponio <alessandro.pomponio1@ibm.com>
  • Loading branch information
@AlessandroPomponio
AlessandroPomponio authored Dec 15, 2022
1 parent 96fbc77 commit 77e886f
Show file tree
Hide file tree
Showing 21 changed files with 973 additions and 772 deletions.
20 changes: 9 additions & 11 deletions src/components/ExperimentView/AddPackage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<template>
<!-- Python oneliner to add package -->
<div class="cds--row pad1">
<div class="cds--col-lg-4">
<cv-row class="pad1">
<cv-column :sm="4" :md="2" :lg="4">
<dds-content-block class="ve-content-block">
<dds-content-block-heading class="ve-heading"
>Get this package</dds-content-block-heading
>
</dds-content-block>
</div>
<div class="cds--col">
<div class="cds--row">
<bx-code-snippet language="python">
api.api_experiment_push({{ exp_python }})
</bx-code-snippet>
</div>
</div>
</div>
</cv-column>
<cv-column :sm="4" :md="6" :lg="12">
<bx-code-snippet language="python">
api.api_experiment_push({{ exp_python }})
</bx-code-snippet>
</cv-column>
</cv-row>
</template>

<script>
Expand Down
169 changes: 93 additions & 76 deletions src/components/ExperimentView/ExperimentHistory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,91 @@
<template>
<div class="cds--row pad1">
<div class="cds--col-lg-4">
<cv-row class="pad1">
<cv-column :sm="4" :md="2" :lg="4">
<dds-content-block class="ve-content-block">
<dds-content-block-heading class="ve-heading"
>History</dds-content-block-heading
>
</dds-content-block>
</div>
<div class="cds--col no-padding">
<bx-table sort @bx-table-header-cell-sort="handleTableHeaderCellSort">
<bx-table-head>
<!-- <bx-table-toolbar-search></bx-table-toolbar-search> -->
<bx-table-header-row>
<bx-table-header-cell
sort-direction="descending"
data-column-id="tag"
>Tag</bx-table-header-cell
>
<bx-table-header-cell sort-direction="none" data-column-id="digest"
>Digest</bx-table-header-cell
>
<!-- <bx-table-header-cell>Times executed</bx-table-header-cell> -->
<bx-table-header-cell
sort-direction="none"
data-column-id="originalTag"
>Previous tag</bx-table-header-cell
>
<bx-table-header-cell
sort-direction="none"
data-column-id="createdOn"
>Creation date</bx-table-header-cell
>
</bx-table-header-row>
</bx-table-head>
<bx-table-body>
<!-- Tagged entries -->
<bx-table-row
v-for="(entry, entryIdx) in getTableSlice"
:key="entryIdx"
>
<bx-table-cell
><bx-link
:href="`${getDeploymentEndpoint()}experiment/${getPackageName(
id
)}:${entry.tag}`"
</cv-column>
<cv-column :sm="4" :md="6" :lg="12">
<div class="tableOverflowContainer">
<bx-table sort @bx-table-header-cell-sort="handleTableHeaderCellSort">
<bx-table-head>
<!-- <bx-table-toolbar-search></bx-table-toolbar-search> -->
<bx-table-header-row>
<bx-table-header-cell
sort-direction="descending"
data-column-id="tag"
>Tag</bx-table-header-cell
>
{{ entry.tag }}
</bx-link></bx-table-cell
>
<bx-table-cell
><bx-link
:href="`${getDeploymentEndpoint()}experiment/${getPackageName(
id
)}@${entry.digest}`"
<bx-table-header-cell
sort-direction="none"
data-column-id="digest"
>Digest</bx-table-header-cell
>
<!-- <bx-table-header-cell>Times executed</bx-table-header-cell> -->
<bx-table-header-cell
sort-direction="none"
data-column-id="originalTag"
>Previous tag</bx-table-header-cell
>
{{ entry.digest }}
</bx-link></bx-table-cell
<bx-table-header-cell
sort-direction="none"
data-column-id="createdOn"
>Creation date</bx-table-header-cell
>
</bx-table-header-row>
</bx-table-head>
<bx-table-body>
<!-- Tagged entries -->
<bx-table-row
v-for="(entry, entryIdx) in getTableSlice"
:key="entryIdx"
>
<!-- <bx-table-cell>Placeholder</bx-table-cell> -->
<bx-table-cell>{{ entry.originalTag }}</bx-table-cell>
<bx-table-cell>{{
new Date(Date.parse(entry.createdOn))
}}</bx-table-cell>
</bx-table-row>
</bx-table-body>
</bx-table>
<bx-pagination
:page-size="elementsToShow"
:start="firstElement"
:total="history.tags.length + history.untagged.length"
@bx-pages-select-changed="handleTablePagesSelectChanged"
@bx-pagination-changed-current="handleTablePaginationChangedCurrent"
@bx-page-sizes-select-changed="handleTablePageSizesSelectChanged"
>
<bx-page-sizes-select slot="page-sizes-select">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</bx-page-sizes-select>
<bx-pages-select></bx-pages-select>
</bx-pagination>
</div>
</div>
<bx-table-cell
><bx-link
:href="`${getDeploymentEndpoint()}experiment/${getPackageName(
id
)}:${entry.tag}`"
>
{{ entry.tag }}
</bx-link></bx-table-cell
>
<bx-table-cell
><bx-link
:href="`${getDeploymentEndpoint()}experiment/${getPackageName(
id
)}@${entry.digest}`"
>
{{ entry.digest }}
</bx-link></bx-table-cell
>
<!-- <bx-table-cell>Placeholder</bx-table-cell> -->
<bx-table-cell>{{ entry.originalTag }}</bx-table-cell>
<bx-table-cell>{{
new Date(Date.parse(entry.createdOn))
}}</bx-table-cell>
</bx-table-row>
</bx-table-body>
</bx-table>
<bx-pagination
:page-size="elementsToShow"
:start="firstElement"
:total="history.tags.length + history.untagged.length"
@bx-pages-select-changed="handleTablePagesSelectChanged"
@bx-pagination-changed-current="handleTablePaginationChangedCurrent"
@bx-page-sizes-select-changed="handleTablePageSizesSelectChanged"
>
<bx-page-sizes-select slot="page-sizes-select">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</bx-page-sizes-select>
<bx-pages-select></bx-pages-select>
</bx-pagination>
</div>
</cv-column>
</cv-row>
</template>

<script>
Expand Down Expand Up @@ -172,4 +176,17 @@ export default {
};
</script>

<style></style>
<style>
bx-link {
overflow-wrap: anywhere;
}
bx-table-cell {
padding-right: 0;
}
.tableOverflowContainer {
width: 100%;
overflow-x: scroll;
}
</style>
80 changes: 41 additions & 39 deletions src/components/ExperimentView/ExperimentInputs.vue
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
<template>
<div class="cds--row pad1">
<div class="cds--col-lg-4">
<dds-content-block class="ve-content-block">
<dds-content-block-heading class="ve-heading"
>Inputs</dds-content-block-heading
>
</dds-content-block>
</div>
<div class="cds--col">
<dds-structured-list>
<dds-structured-list-head>
<dds-structured-list-header-row>
<dds-structured-list-header-cell
>Names</dds-structured-list-header-cell
>
</dds-structured-list-header-row>
</dds-structured-list-head>
<dds-structured-list-body>
<dds-structured-list-row>
<dds-structured-list-cell>
<bx-unordered-list>
<bx-list-item
v-if="experiment.metadata.registry.inputs.length == 0"
>
No inputs
</bx-list-item>
<bx-list-item
v-else
v-for="(input, idx) in experiment.metadata.registry.inputs"
:key="idx"
>
<code>{{ input.name }}</code>
</bx-list-item>
</bx-unordered-list>
</dds-structured-list-cell>
</dds-structured-list-row>
</dds-structured-list-body>
</dds-structured-list>
</div>
<div>
<cv-row class="pad1">
<cv-column :sm="4" :md="2" :lg="4">
<dds-content-block class="ve-content-block">
<dds-content-block-heading class="ve-heading"
>Inputs</dds-content-block-heading
>
</dds-content-block>
</cv-column>
<cv-column :sm="4" :md="6" :lg="12">
<dds-structured-list>
<dds-structured-list-head>
<dds-structured-list-header-row>
<dds-structured-list-header-cell
>Names</dds-structured-list-header-cell
>
</dds-structured-list-header-row>
</dds-structured-list-head>
<dds-structured-list-body>
<dds-structured-list-row>
<dds-structured-list-cell>
<bx-unordered-list>
<bx-list-item
v-if="experiment.metadata.registry.inputs.length == 0"
>
No inputs
</bx-list-item>
<bx-list-item
v-else
v-for="(input, idx) in experiment.metadata.registry.inputs"
:key="idx"
>
<code>{{ input.name }}</code>
</bx-list-item>
</bx-unordered-list>
</dds-structured-list-cell>
</dds-structured-list-row>
</dds-structured-list-body>
</dds-structured-list>
</cv-column>
</cv-row>
</div>
</template>

Expand Down
20 changes: 10 additions & 10 deletions src/components/ExperimentView/ExperimentJSON.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<template>
<div class="cds--row pad1">
<div class="cds--col-lg-4">
<cv-row class="pad1">
<cv-column :sm="4" :md="2" :lg="4">
<dds-content-block class="ve-content-block">
<dds-content-block-heading class="ve-heading"
>Description</dds-content-block-heading
>
</dds-content-block>
</div>
<div class="cds--col">
<div class="cds--row">
</cv-column>
<cv-column :sm="4" :md="6" :lg="12">
<cv-row>
<bx-code-snippet language="json" type="multi">
{{ JSON.stringify(exp_no_interface, null, 2) }}
</bx-code-snippet>
</div>
<div class="cds--row">
</cv-row>
<cv-row>
<bx-btn class="bx--btn--primary" type="button" @click="download()">
Download JSON&nbsp;
<img class="download-icon" src="../../assets/download.svg"
/></bx-btn>
</div>
</div>
</div>
</cv-row>
</cv-column>
</cv-row>
</template>

<script>
Expand Down
Loading

0 comments on commit 77e886f

Please sign in to comment.