Migrate from san to vue #281
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add App.vue Add AppMenu.vue
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key.
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add Scalars, Images, Histograms, Graph. * Switch to use the stylus language for CSS * Port functions from Scalars.san to Scalars.vue
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add Config Vue
* Fix warnings from Vue compiler * use default prop instead of duplicate data and prop * use function instead of shorthand declaration with data * refract naming style, fix scalar options * Fix config UI * Add chart and chart page and integrate to scalar * update with varun and jeff's comments
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add the Config.vue for Images * Add the CharPage.vue and Image.vue * Hook up the config to the image.vue so that the image height and width can update
* Watch tagInfo changes to update chart and fix tooltip issue * Add expand panel and maintain isShow state in the panel * Add Expand Panel in Image
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add Watch on the groupNameReg
* Make sure to clear the chart before each use. * Add key for v-for loop.
-Apply theme color in Vuetify -Add main.styl to override Vuetify default stylus variables -Add relative path in web pack config to find variables.styl
jetfuel
requested review from
Superjomn,
nickyfantasy,
jacquesqiao and
deqingli
* Fix multiple scalar issues: -download link / outliers should take boolean value instead of array -download link now show proper selector of runsItem and download button -Use tag as key to prevent chart re-rendering -Add missing label in scalar config and fix UI * simply use index for key because scalar has different tag info structure from image and histogram
daming-lu
reviewed
Mar 2, 2018
| }, | ||
| methods: { | ||
| handleHeadClick() { | ||
| this.toogleShow(); |
| <div class="visual-dl-expand-panel"> | ||
| <h3 | ||
| class="visual-dl-expand-head" | ||
| @click="handleHeadClick()" |
There was a problem hiding this comment.
Since this click only toggles show/hide, we can write it simply as below:
@click="isShow = !isShow"
| @@ -1,7 +1,9 @@ | |||
| import Notification from './Notification'; | |||
| import NotificationItem from './NotificationItem'; | |||
| //TODO: Migrate this part to Vue | |||
frontend/src/graph/ui/Chart.vue
Outdated
|
|
||
| getOriginChartsData() { | ||
| getPluginGraphsGraph().then(({status, data}) => { | ||
| if (+status === 0 && data.url) { |
There was a problem hiding this comment.
Is the '+' an error?
Also we should add handler for error promise later
frontend/src/graph/ui/Config.vue
Outdated
|
|
||
| export default { | ||
| props:['config'], | ||
| data() { |
There was a problem hiding this comment.
data() is not used thus should be removed.
|
The download button toggled by 'Show data download link' is broken. Note the small download button (4th one on the upper row) is working |
|
@daming-lu good catch regarding the download button bug. This is because "train" run is empty and nothing can be downloaded, same issue before the migration. I think the fix should let the selector only displays non empty chart. |
-Dropdown should only display non empty runs -Select first run by default -Remove drop down if all are empty runs -Refract download type to runItemForDownload -Add train run and multiple tags in mock data
-Error comes in when trying to access elements inside empty data -When one of the runs has empty data, the chart will display nothing even other run has non empty data -Fix by checking length of data before accessing
deqingli
reviewed
Mar 8, 2018
| }, | ||
| methods: { | ||
| handleItemClick: function (item) { | ||
| this.selected = item.name |
deqingli
reviewed
Mar 8, 2018
| Download image | ||
| </v-btn> | ||
|
|
||
| <v-slider label="Scale" |
deqingli
reviewed
Mar 8, 2018
| <script> | ||
| import ExpandPanel from '../../common/component/ExpandPanel'; | ||
| import Image from './Image'; | ||
| //import Pagination from 'san-mui/Pagination'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We created Vue version of the VisualDL. Please take some time to take a look. Once it is merged, let's discuss how we can build interactive graph together.