Packaging HTML/Javascript "application" for visualizing some json data

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

 



Hi,

The next release of valgrind (3.15.0) will have an updated dhat tool
which creates a json output file. To make it easier to use the data it
comes with a small html/css/js "application" that makes it easy to
sort/visualize the data.

This html/css/js application is self-contained, it doesn't use any
other javascript code/libraries. It consists of 4 files:
dh_view.html, dh_view.css, dh_view.js and dh_test.js.

You can see all files at:
https://gnu.wildebeest.org/~mark/dh_view/

You would use it something like:
$ valgrind --tool=dhat /bin/sort < /usr/share/dict/words > /dev/null

Which generates a json file dhat.out.3759 (as attached).
Which you can then "load" into the dh_view.html app to see various
different representations of the data collected.

You can try it out on the attached file at:
https://gnu.wildebeest.org/~mark/dh_view/dh_view.html
By clicking "Load" and giving it a copy of the attache dhat.out.3759
file.

sort isn't a very interesting example since it doesn't have a very
complicated allocation pattern, but it should give you an idea of what
the visualization does.

But it isn't really meant as "web app", the idea is that the user runs
this locally in their own browser on their locally generated dhat.out
json files.

I am not sure how to properly package this little app/viewer thingy as
part of valgrind. There are the Java Script and Web Assets guidelines,
but those are really for web applications, which this isn't.

Is there an example that I could follow?

How would users discover where/how to load the html/js application?

We could make the valgrind --tool=dhat output a location of the
html/css/js to load (and the generated json file), but which file
system location is proper for it?

Thanks,

Mark
{"dhatFileVersion":1
,"cmd":"/bin/sort"
,"pid":3759
,"mi":167361679,"ei":6481435849
,"aps":
 [{"tb":5,"tbk":1,"tli":129
  ,"mb":5,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":9,"wb":5
  ,"acc":[-4,2,3]
  ,"fs":[1,2,3,4,5]
  }
 ,{"tb":120,"tbk":1,"tli":6481261872
  ,"mb":120,"mbk":1
  ,"gb":120,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":440,"wb":112
  ,"acc":[-8,2,-8,28,-8,5,-8,3,-8,4,-24,3,-8,0,-48,3]
  ,"fs":[6,3,4,5]
  }
 ,{"tb":11,"tbk":1,"tli":6481261077
  ,"mb":11,"mbk":1
  ,"gb":11,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":803,"wb":11
  ,"acc":[66,-9,54,67]
  ,"fs":[7,8,3,4,5]
  }
 ,{"tb":3344,"tbk":12,"tli":77775089283
  ,"mb":3344,"mbk":12
  ,"gb":3344,"gbk":12
  ,"fb":0,"fbk":0
  ,"rb":197299980,"wb":3192
  ,"fs":[9,10,3,4,5]
  }
 ,{"tb":132,"tbk":12,"tli":64812497572
  ,"mb":132,"mbk":12
  ,"gb":110,"gbk":10
  ,"fb":0,"fbk":0
  ,"rb":1342,"wb":132
  ,"acc":[101,-9,93,136]
  ,"fs":[7,11,5]
  }
 ,{"tb":11,"tbk":1,"tli":8795
  ,"mb":11,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":0,"wb":11
  ,"acc":[-11,1]
  ,"fs":[12,13,5]
  }
 ,{"tb":34,"tbk":1,"tli":6481235478
  ,"mb":34,"mbk":1
  ,"gb":34,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":24,"wb":34
  ,"acc":[-24,2,-10,1]
  ,"fs":[14,15,16]
  }
 ,{"tb":10,"tbk":1,"tli":6481234116
  ,"mb":10,"mbk":1
  ,"gb":10,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":0,"wb":10
  ,"acc":[-10,1]
  ,"fs":[7,17,18]
  }
 ,{"tb":11,"tbk":1,"tli":6481227879
  ,"mb":11,"mbk":1
  ,"gb":11,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":309,"wb":11
  ,"acc":[22,-6,20,21,-2,20,32]
  ,"fs":[7,19,20,21]
  }
 ,{"tb":11,"tbk":1,"tli":5498
  ,"mb":11,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":0,"wb":11
  ,"acc":[-11,1]
  ,"fs":[12,22,20,21]
  }
 ,{"tb":11,"tbk":1,"tli":35688
  ,"mb":11,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":17,"wb":12
  ,"acc":[-7,2,3,-2,2,3]
  ,"fs":[23,24,25,21]
  }
 ,{"tb":11,"tbk":1,"tli":6481222428
  ,"mb":11,"mbk":1
  ,"gb":11,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":310,"wb":11
  ,"acc":[22,-6,20,21,-2,20,33]
  ,"fs":[7,19,26,21]
  }
 ,{"tb":11,"tbk":1,"tli":6481222191
  ,"mb":11,"mbk":1
  ,"gb":11,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":0,"wb":11
  ,"acc":[-11,1]
  ,"fs":[12,22,26,21]
  }
 ,{"tb":11,"tbk":1,"tli":31314
  ,"mb":11,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":17,"wb":12
  ,"acc":[-7,2,3,-2,2,3]
  ,"fs":[23,24,27,21]
  }
 ,{"tb":48,"tbk":12,"tli":77774572508
  ,"mb":48,"mbk":12
  ,"gb":48,"gbk":12
  ,"fb":48,"fbk":12
  ,"rb":1020,"wb":48
  ,"acc":[122,78,76,72]
  ,"fs":[23,28,21]
  }
 ,{"tb":32,"tbk":1,"tli":6481219674
  ,"mb":32,"mbk":1
  ,"gb":32,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":1184,"wb":32
  ,"acc":[-8,98,-8,2,-8,50,-8,2]
  ,"fs":[29,30,31,32,33,21]
  }
 ,{"tb":208,"tbk":1,"tli":6481218337
  ,"mb":208,"mbk":1
  ,"gb":208,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":776,"wb":96
  ,"acc":[-8,50,-12,1,-4,0,-16,1,-8,49,-44,1,-4,0,-8,1,-104,0]
  ,"fs":[34,35,36,37,30,31,32,33,21]
  }
 ,{"tb":208,"tbk":1,"tli":6481217501
  ,"mb":208,"mbk":1
  ,"gb":208,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":392,"wb":96
  ,"acc":[-8,26,-12,1,-4,0,-16,1,-8,25,-44,1,-4,0,-8,1,-104,0]
  ,"fs":[34,35,38,39,30,31,32,33,21]
  }
 ,{"tb":8,"tbk":1,"tli":3956
  ,"mb":8,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":0,"wb":0
  ,"acc":[-8,0]
  ,"fs":[23,40,41]
  }
 ,{"tb":128,"tbk":1,"tli":6481186550
  ,"mb":128,"mbk":1
  ,"gb":128,"gbk":1
  ,"fb":128,"fbk":1
  ,"rb":0,"wb":8
  ,"acc":[-8,1,-120,0]
  ,"fs":[42,43,44,45]
  }
 ,{"tb":8,"tbk":1,"tli":6481186460
  ,"mb":8,"mbk":1
  ,"gb":8,"gbk":1
  ,"fb":8,"fbk":1
  ,"rb":16,"wb":8
  ,"acc":[-8,3]
  ,"fs":[23,46]
  }
 ,{"tb":568,"tbk":1,"tli":3366
  ,"mb":568,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":566,"wb":594
  ,"acc":[44,-3,41,-4,0,-8,14,-8,11,-8,4,-8,5,-16,4,-8,10,-8,5,-8,6,-16,1,-8,4,-8,3,-4,10,7,-3,4,-8,0,-2,1,-6,0,-8,6,-8,3,-8,0,-16,1,-16,0,-4,7,-20,0,-8,8,-4,5,-4,7,-8,4,-88,1,-232,0,-8,1]
  ,"fs":[47,48,49,50,51,52,53,54,55,56]
  }
 ,{"tb":568,"tbk":1,"tli":2799
  ,"mb":568,"mbk":1
  ,"gb":0,"gbk":0
  ,"fb":0,"fbk":0
  ,"rb":534,"wb":578
  ,"acc":[39,-3,36,-4,0,-8,12,-8,10,-8,4,-8,5,-16,4,-8,10,-8,5,-8,6,-16,1,-8,4,-8,3,-4,10,7,-3,4,-8,0,-2,1,-6,0,-8,6,-8,3,-8,0,-16,1,-16,0,-4,6,-20,0,-8,8,-4,5,-4,7,-8,4,-88,1,-232,0,-8,1]
  ,"fs":[47,48,57,58,59,60,61,62,63,64]
  }
 ,{"tb":639024864,"tbk":1,"tli":6481150428
  ,"mb":639024864,"mbk":1
  ,"gb":639024864,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":525742469,"wb":166479564
  ,"fs":[65,66,67]
  }
 ,{"tb":32,"tbk":1,"tli":6460249338
  ,"mb":32,"mbk":1
  ,"gb":32,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":38248,"wb":6856
  ,"acc":[-8,1708,-8,428,-8,2648,-8,854]
  ,"fs":[23,68,69,70,71]
  }
 ,{"tb":128,"tbk":1,"tli":6460249260
  ,"mb":128,"mbk":1
  ,"gb":128,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":15152,"wb":14400
  ,"acc":[-8,1,-8,3309,-8,384,-104,0]
  ,"fs":[23,72,73,69,70,71]
  }
 ,{"tb":2048,"tbk":1,"tli":6460248287
  ,"mb":2048,"mbk":1
  ,"gb":2048,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":40414680,"wb":11549845
  ,"fs":[23,74,75,76]
  }
 ,{"tb":560,"tbk":1,"tli":6460262675
  ,"mb":560,"mbk":1
  ,"gb":560,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":569,"wb":25
  ,"acc":[-8,35,-8,0,-8,1,-8,0,-9,2,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0]
  ,"fs":[77,78,79,80,81,82,83]
  }
 ,{"tb":560,"tbk":1,"tli":6460256975
  ,"mb":560,"mbk":1
  ,"gb":560,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":569,"wb":25
  ,"acc":[-8,35,-8,0,-8,1,-8,0,-9,2,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0]
  ,"fs":[77,78,79,80,81,84,82,83]
  }
 ,{"tb":560,"tbk":1,"tli":6314071418
  ,"mb":560,"mbk":1
  ,"gb":560,"gbk":1
  ,"fb":0,"fbk":0
  ,"rb":569,"wb":25
  ,"acc":[-8,35,-8,0,-8,1,-8,0,-9,2,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0,-9,1,-7,0]
  ,"fs":[77,78,79,80,81,85,86,87]
  }
 ]
,"ftbl":
 ["[root]"
 ,"0x507CC84: _nl_normalize_codeset (l10nflist.c:323)"
 ,"0x5076FDE: _nl_load_locale_from_archive (loadarchive.c:173)"
 ,"0x50761DD: _nl_find_locale (findlocale.c:154)"
 ,"0x5075B42: setlocale (setlocale.c:341)"
 ,"0x402D0B: main (sort.c:4828)"
 ,"0x5076EA5: _nl_load_locale_from_archive (loadarchive.c:456)"
 ,"0x50D50C9: strdup (strdup.c:42)"
 ,"0x5076EC4: _nl_load_locale_from_archive (loadarchive.c:460)"
 ,"0x507683F: _nl_intern_locale_data (loadlocale.c:95)"
 ,"0x5076F25: _nl_load_locale_from_archive (loadarchive.c:473)"
 ,"0x5075B90: setlocale (setlocale.c:370)"
 ,"0x50757FB: new_composite_name (setlocale.c:168)"
 ,"0x5075D3E: setlocale (setlocale.c:379)"
 ,"0x5078710: set_binding_values (bindtextdom.c:226)"
 ,"0x5078710: bindtextdomain (bindtextdom.c:344)"
 ,"0x402D1E: main (sort.c:4829)"
 ,"0x507C787: textdomain (textdomain.c:110)"
 ,"0x402D2A: main (sort.c:4830)"
 ,"0x50759D4: setlocale (setlocale.c:435)"
 ,"0x409D84: inittables_mb (sort.c:1449)"
 ,"0x402E28: main (sort.c:4880)"
 ,"0x50759F0: setlocale (setlocale.c:441)"
 ,"0x4124C8: xmalloc (xmalloc.c:41)"
 ,"0x412693: xmemdup (xmalloc.c:113)"
 ,"0x409D96: inittables_mb (sort.c:1451)"
 ,"0x409DA9: inittables_mb (sort.c:1453)"
 ,"0x409DC0: inittables_mb (sort.c:1455)"
 ,"0x409E5D: inittables_mb (sort.c:1466)"
 ,"0x50FB7DB: __wcsmbs_load_conv (wcsmbsload.c:169)"
 ,"0x50F17DC: get_gconv_fcts (wcsmbsload.h:75)"
 ,"0x50F17DC: mbrtowc (mbrtowc.c:69)"
 ,"0x408388: ismbblank (sort.c:872)"
 ,"0x409EC7: inittables_mb (sort.c:1474)"
 ,"0x5074C70: __gconv_lookup_cache (gconv_cache.c:371)"
 ,"0x506D539: __gconv_find_transform (gconv_db.c:721)"
 ,"0x50FB8E6: __wcsmbs_getfct (wcsmbsload.c:92)"
 ,"0x50FB8E6: __wcsmbs_load_conv (wcsmbsload.c:187)"
 ,"0x50FB9E5: __wcsmbs_getfct (wcsmbsload.c:92)"
 ,"0x50FB9E5: __wcsmbs_load_conv (wcsmbsload.c:190)"
 ,"0x4030FE: UnknownInlinedFun (xalloc.h:107)"
 ,"0x4030FE: main (sort.c:4941)"
 ,"0x412520: xrealloc (xmalloc.c:61)"
 ,"0x406978: UnknownInlinedFun (xalloc.h:209)"
 ,"0x406978: add_temp_dir (sort.c:1291)"
 ,"0x40481B: main (sort.c:5361)"
 ,"0x4047EA: main (sort.c:5368)"
 ,"0x50B7A3C: __fopen_internal (iofopen.c:69)"
 ,"0x514522F: phys_pages_info (getsysstats.c:296)"
 ,"0x5110169: posix_sysconf (sysconf.c:636)"
 ,"0x5110169: linux_sysconf (sysconf.c:145)"
 ,"0x5110169: sysconf (sysconf.c:36)"
 ,"0x40F30D: physmem_available (physmem.c:190)"
 ,"0x404DD9: default_sort_size (sort.c:1624)"
 ,"0x404DD9: sort_buffer_size (sort.c:1692)"
 ,"0x404DD9: sort (sort.c:4548)"
 ,"0x404DD9: main (sort.c:5424)"
 ,"0x5110159: posix_sysconf (sysconf.c:633)"
 ,"0x5110159: linux_sysconf (sysconf.c:145)"
 ,"0x5110159: sysconf (sysconf.c:36)"
 ,"0x40F2AD: physmem_total (physmem.c:86)"
 ,"0x404DE4: default_sort_size (sort.c:1625)"
 ,"0x404DE4: sort_buffer_size (sort.c:1692)"
 ,"0x404DE4: sort (sort.c:4548)"
 ,"0x404DE4: main (sort.c:5424)"
 ,"0x4067ED: initbuf (sort.c:1722)"
 ,"0x4051BE: sort (sort.c:4548)"
 ,"0x4051BE: main (sort.c:5424)"
 ,"0x40EAB3: heap_alloc (heap.c:46)"
 ,"0x404649: queue_init (sort.c:3984)"
 ,"0x404649: sort (sort.c:4586)"
 ,"0x404649: main (sort.c:5424)"
 ,"0x40EAE6: UnknownInlinedFun (xalloc.h:107)"
 ,"0x40EAE6: heap_alloc (heap.c:51)"
 ,"0x40467B: merge_tree_init (sort.c:3864)"
 ,"0x40467B: sort (sort.c:4587)"
 ,"0x40467B: main (sort.c:5424)"
 ,"0x40126B4: allocate_dtv (dl-tls.c:317)"
 ,"0x40126B4: _dl_allocate_tls (dl-tls.c:533)"
 ,"0x4E357AB: allocate_stack (allocatestack.c:539)"
 ,"0x4E357AB: pthread_create@@GLIBC_2.2.5 (pthread_create.c:447)"
 ,"0x40AA6E: sortlines (sort.c:4257)"
 ,"0x404715: sort (sort.c:4591)"
 ,"0x404715: main (sort.c:5424)"
 ,"0x40AADA: sortlines (sort.c:4259)"
 ,"0x40AB27: sortlines_thread (sort.c:4212)"
 ,"0x4E34DD4: start_thread (pthread_create.c:307)"
 ,"0x5146EAC: clone (clone.S:111)"
 ]
}
_______________________________________________
devel mailing list -- devel@xxxxxxxxxxxxxxxxxxxxxxx
To unsubscribe send an email to devel-leave@xxxxxxxxxxxxxxxxxxxxxxx
Fedora Code of Conduct: https://getfedora.org/code-of-conduct.html
List Guidelines: https://fedoraproject.org/wiki/Mailing_list_guidelines
List Archives: https://lists.fedoraproject.org/archives/list/devel@xxxxxxxxxxxxxxxxxxxxxxx

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Index of Archives]     [Fedora Announce]     [Fedora Users]     [Fedora Kernel]     [Fedora Testing]     [Fedora Formulas]     [Fedora PHP Devel]     [Kernel Development]     [Fedora Legacy]     [Fedora Maintainers]     [Fedora Desktop]     [PAM]     [Red Hat Development]     [Gimp]     [Yosemite News]

  Powered by Linux