Metro Layout | Data Views | MESCIUS DataViewsJS JavaScript Demos

This example demonstrates the options you have when using the masonry layout. The Masonry Layout Engine organizes items automatically according to size, but you have options such as order, column and row sizing, gutter width, and more. You can also set grouping strategies which dictate how items are arranged. This demo gives you controls to show you what each option does. These controls are labeled by their JavaScript option names. keepOrder: when set to true, the engine preserves the order of the data. When set to false, the engine optimizes the order. rowHeight: sets the minimum vertical padding between items. gutter: sets the padding between items. columnWidth: sets the minimum horizontal padding between items. This demo also has three buttons, metro, pinterest, and random, that load preset grouping strategies. Metro groups items in a manner that optimizes layout. Pinterest uses a set item width. Random randomizes item size.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Masonry/MetroLayout/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="masonry, metro, pinterest, pinterest like" />
<meta name="description" content="This example demonstrates the options you have when using the masonry layout." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Metro Layout | Data Views | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" />
<link
href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.masonry.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.masonry.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="rowTemplate" style="display: none">
<div data-column="block"></div>
</template>
<div class="main-container responsive-container">
<div class="mobile-only toggle-options">
<span class="fa fa-cog"></span>
</div>
<div id="grid" class="grid main-content"></div>
<div class="sample-options">
<div class="option-row">
<div class="btn-group" role="group">
<button id="metroData" class="btn btn-default active">Metro</button>
<button id="pinterestData" class="btn btn-default">Pinterest</button>
<button id="randomData" class="btn btn-default">Random</button>
</div>
</div>
<div class="option-row">
<div class="range-container">
<b class="label">Keep Order:</b>
<div class="range-wrapper">
<input type="range" id="keepOrder" min="0" max="1" style="width: 100px" value="0" />
<span class="indicator" id="keepOrder-indicator">OFF</span>
</div>
</div>
</div>
<div class="option-row">
<div class="range-container">
<b class="label">Gutter:</b>
<div class="range-wrapper">
<input type="range" id="gutter" min="0" max="50" style="width: 200px" value="0" />
<span class="indicator" id="gutter-indicator">0</span>
</div>
</div>
</div>
<div class="option-row">
<div class="range-container">
<b class="label">Row Height:</b>
<div class="range-wrapper">
<input type="range" id="rowHeight" min="1" max="200" style="width: 200px" value="1" />
<span class="indicator" id="rowHeight-indicator">1</span>
</div>
</div>
</div>
<div class="option-row">
<div class="range-container">
<b class="label">Column Width:</b>
<div class="range-wrapper">
<input type="range" id="columnWidth" min="1" max="200" style="width: 200px" value="1" />
<span class="indicator" id="columnWidth-indicator">1</span>
</div>
</div>
</div>
</div>
</div>
<script src="locale.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
id: 'block',
dataField: 'block',
presenter:
'<div class="block" style="width:{{=it.block.width}}px;height:{{=it.block.height}}px;background-color:{{=it.currentColor}};"></div>',
},
{
id: 'currentColor',
dataField: 'currentColor',
visible: false,
},
{
id: 'color',
dataField: 'color',
visible: false,
},
{
id: 'darkerColor',
dataField: 'darkerColor',
visible: false,
},
];
var layout = new GC.DataViews.MasonryLayout({
rowTemplate: '#rowTemplate',
keepOrder: false,
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
document.getElementById('grid').addEventListener('click', handleMouseClick);
function setOption(name) {
var input = document.getElementById(name);
var indicator = document.getElementById(''.concat(name, '-indicator'));
var value = parseInt(input.value, 10);
indicator.innerHTML = name === 'keepOrder' ? (value ? locale.on : locale.off) : input.value;
var opts = {};
opts[name] = value;
Object.assign(dataView.options, opts);
dataView.invalidate();
}
function changeDataSet(name) {
$('.btn-group .btn').removeClass('active');
$('#'.concat(name)).addClass('active');
var currData = window[name];
data.forEach(function (item, index) {
var factor = item.size === 'small' ? 1 : 2;
item.block.width = currData[index].width * factor;
item.block.height = currData[index].height * factor;
});
dataView.invalidate();
}
function handleMouseClick(args) {
var hitTestInfo = dataView.hitTest(args);
if (hitTestInfo.row > -1) {
var item = dataView.data.getItem(hitTestInfo.row);
if (item) {
toggleSize(item);
dataView.invalidate();
}
}
}
function toggleSize(item) {
var maxWidth = dataView.getLayoutInfo().viewport.contentWidth;
if (item.size === 'small') {
item.block.width = Math.min(maxWidth, 2 * item.block.width);
item.block.height *= 2;
item.size = 'large';
item.currentColor = item.darkerColor;
} else {
item.block.width /= 2;
item.block.height /= 2;
item.size = 'small';
item.currentColor = item.color;
}
}
$('#metroData').click(function () {
return changeDataSet('metroData');
});
$('#pinterestData').click(function () {
return changeDataSet('pinterestData');
});
$('#randomData').click(function () {
return changeDataSet('randomData');
});
$('#keepOrder').change(function () {
return setOption('keepOrder');
});
$('#gutter').change(function () {
return setOption('gutter');
});
$('#rowHeight').change(function () {
return setOption('rowHeight');
});
$('#columnWidth').change(function () {
return setOption('columnWidth');
});
// helpers for responsive options panel
$(function () {
$('body').on('click', '.toggle-options', function () {
const options = $('.sample-options');
const display = options.css('display');
options.css({ display: display === 'flex' ? 'none' : 'flex' });
$('.toggle-options .fa').toggleClass('fa-cog').toggleClass('fa-times');
});
window.addEventListener('resize', function () {
if ($('.mobile-only').css('visibility') === 'hidden') {
$('.sample-options').css({ display: 'flex' });
}
});
});

var colors = ['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686'];
var darkerColors = ['#67DB67', '#40BC7C', '#0E8787', '#00436B'];
var data = [];
var pinterestData = [];
var metroData = [];
var randomData = [];
for (var i = 0; i < 80; i++) {
// to control the probability
var tempFactor = _.random(1, 13);
var sideLength = tempFactor < 2 ? 160 : tempFactor < 5 ? 80 : 40;
metroData.push({
width: sideLength,
height: sideLength,
});
pinterestData.push({
width: 100,
height: _.random(4, 6) * 20,
});
randomData.push({
width: _.random(1, 3) * 40,
height: _.random(1, 3) * 40,
});
data.push({
block: {
width: metroData[i].width,
height: metroData[i].height,
},
size: 'small',
currentColor: colors[i % colors.length],
color: colors[i % colors.length],
darkerColor: darkerColors[i % colors.length],
});
}
window.metroData = metroData;
window.pinterestData = pinterestData;
window.randomData = randomData;

var locale = {
keepOrder: 'Keep Order',
on: 'ON',
off: 'OFF',
rowHeight: 'Row Height',
gutter: 'Gutter',
columnWidth: 'Column Width',
metro: 'Metro',
pinterest: 'Pinterest',
random: 'Random',
};

.main-container {
width: 100%;
height: 100%;
}
.sample-options {
background: #fbfbfb;
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 10px;
min-width: 240px;
max-width: 300px;
}
.sample-options label {
display: inline-block;
font-weight: normal;
width: 75px;
}
.sample-options select {
border: 1px solid #999;
}
.sample-options .range-container {
width: 100%;
}
.sample-options .range-wrapper {
display: flex;
flex-direction: row;
}
.sample-options .range-wrapper input {
flex: 1 1 auto;
}
.sample-options .range-wrapper .indicator {
padding: 1rem;
min-width: 2rem;
}
.sample-options .option-row {
margin-bottom: 5px;
}
.sample-options .option-row .label {
display: block;
margin-bottom: 5px;
}
.sample-options .option-row range {
width: 100%;
}
.sample-options .btn-group {
display: inline-flex;
white-space: nowrap;
}
#grid {
height: 100%;
}
.block {
border: 2px solid #f1f1f1;
box-sizing: border-box;
}
.block:hover {
border: 2px solid #fff;
}
.flex-break {
flex-basis: 100%;
height: 0;
}
.mobile-only {
visibility: hidden;
}
.responsive-container {
display: flex;
box-sizing: border-box;
}
.responsive-container .main-content {
box-sizing: border-box;
height: 100%;
flex-grow: 1;
flex-shrink: 1;
min-width: 50%;
max-width: 100%;
}
.responsive-container .sample-options {
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
height: 100%;
flex-grow: 0;
flex-shrink: 1;
}
.responsive-container .sample-options .option-row {
box-sizing: border-box;
display: inline-flex;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
white-space: nowrap;
padding-right: 10px;
width: auto;
}
.responsive-container .toggle-options {
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
background-color: #ebebeb;
color: #47a06c;
border-radius: 16px;
cursor: pointer;
width: 36px;
height: 36px;
font-size: 28px;
z-index: 101;
display: none;
}
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.mobile-only {
visibility: visible;
}
.responsive-container {
display: block;
position: relative;
}
.responsive-container .main-content {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
z-index: 99;
}
.responsive-container .toggle-options {
display: flex;
}
.responsive-container .sample-options {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 100;
}
.responsive-container .sample-options .option-row {
padding-right: 20px;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L3B1cmVqcy9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxnQkFBQTtFQUNBLGdCQUFBO0FDQ0Y7QURDRTtFQUNFLHFCQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDQ0o7QURFRTtFQUNFLHNCQUFBO0FDQUo7QURHRTtFQUNFLFdBQUE7QUNESjtBRElFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0FDRko7QURJSTtFQUNFLGNBQUE7QUNGTjtBREtJO0VBQ0UsYUFBQTtFQUNBLGVBQUE7QUNITjtBRE9FO0VBQ0Usa0JBQUE7QUNMSjtBRE9JO0VBQ0UsY0FBQTtFQUNBLGtCQUFBO0FDTE47QURRSTtFQUNFLFdBQUE7QUNOTjtBRFVFO0VBQ0Usb0JBQUE7RUFDQSxtQkFBQTtBQ1JKOztBRFlBO0VBQ0UsWUFBQTtBQ1RGOztBRFlBO0VBQ0UseUJBQUE7RUFDQSxzQkFBQTtBQ1RGO0FEV0U7RUFDRSxzQkFBQTtBQ1RKOztBRDhCQTtFQUNFLGdCQUFBO0VBQ0EsU0FBQTtBQzNCRjs7QUQ4QkE7RUFDRSxrQkFBQTtBQzNCRjs7QUQ4QkE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7QUMzQkY7QUQ2QkU7RUFDRSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0FDM0JKO0FEOEJFO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDNUJKO0FEOEJJO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLG1CQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxnQkFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDNUJOO0FEZ0NFO0VBMURBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxrQkFBQTtFQUNBLFFBQUE7RUFDQSxVQUFBO0VBQ0EseUJBQUE7RUFDQSxjQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxlQUFBO0VBQ0EsWUFBQTtFQWdERSxhQUFBO0FDbEJKOztBRHVCQTtFQUNFO0lBQ0UsbUJBQUE7RUNwQkY7O0VEc0JBO0lBQ0UsY0FBQTtJQUNBLGtCQUFBO0VDbkJGO0VEcUJFO0lBQ0Usa0JBQUE7SUFDQSxjQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFdBQUE7RUNuQko7RURzQkU7SUFDRSxhQUFBO0VDcEJKO0VEdUJFO0lBQ0UsYUFBQTtJQUNBLGtCQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFlBQUE7SUFDQSxZQUFBO0VDckJKO0VEdUJJO0lBQ0UsbUJBQUE7RUNyQk47QUFDRiIsImZpbGUiOiJEYXRhVmlld3MvTWFzb25yeS9NZXRyb0xheW91dC9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG5cbiAgbGFiZWwge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHdpZHRoOiA3NXB4O1xuICB9XG5cbiAgc2VsZWN0IHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAjOTk5O1xuICB9XG5cbiAgLnJhbmdlLWNvbnRhaW5lciB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICAucmFuZ2Utd3JhcHBlciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgaW5wdXQge1xuICAgICAgZmxleDogMSAxIGF1dG87XG4gICAgfVxuXG4gICAgLmluZGljYXRvciB7XG4gICAgICBwYWRkaW5nOiAxcmVtO1xuICAgICAgbWluLXdpZHRoOiAycmVtO1xuICAgIH1cbiAgfVxuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG5cbiAgICAubGFiZWwge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gICAgfVxuXG4gICAgcmFuZ2Uge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLmJ0bi1ncm91cCB7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgfVxufVxuXG4jZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmJsb2NrIHtcbiAgYm9yZGVyOiAycHggc29saWQgI2YxZjFmMTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xuICB9XG59XG5cbi8vIGhlbHBlcnMgZm9yIHJlc3BvbnNpdmUgb3B0aW9ucyBwYW5lbFxuQG1peGluIG1vYmlsZS1idG4oKSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzQ3YTA2YztcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAubWFpbi1jb250ZW50IHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gICAgZmxleC1zaHJpbms6IDE7XG4gICAgbWluLXdpZHRoOiA1MCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBmbGV4LXNocmluazogMTtcblxuICAgIC5vcHRpb24tcm93IHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBmbGV4LWdyb3c6IDA7XG4gICAgICBmbGV4LXNocmluazogMDtcbiAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgICAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgICAgIHdpZHRoOiBhdXRvO1xuICAgIH1cbiAgfVxuXG4gIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgQGluY2x1ZGUgbW9iaWxlLWJ0bjtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG5cbi8vIG1vc3Qgc21hcnRwaG9uZXNcbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAubWFpbi1jb250ZW50IHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk7XG4gICAgfVxuXG4gICAgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuXG4gICAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB6LWluZGV4OiAxMDA7XG5cbiAgICAgIC5vcHRpb24tcm93IHtcbiAgICAgICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIHdpZHRoOiA3NXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIHNlbGVjdCB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICM5OTk7XG59XG4uc2FtcGxlLW9wdGlvbnMgLnJhbmdlLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cbi5zYW1wbGUtb3B0aW9ucyAucmFuZ2Utd3JhcHBlciBpbnB1dCB7XG4gIGZsZXg6IDEgMSBhdXRvO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIC5pbmRpY2F0b3Ige1xuICBwYWRkaW5nOiAxcmVtO1xuICBtaW4td2lkdGg6IDJyZW07XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBtYXJnaW4tYm90dG9tOiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cgLmxhYmVsIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDVweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyByYW5nZSB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5idG4tZ3JvdXAge1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuI2dyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ibG9jayB7XG4gIGJvcmRlcjogMnB4IHNvbGlkICNmMWYxZjE7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG4uYmxvY2s6aG92ZXIge1xuICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xufVxuXG4uZmxleC1icmVhayB7XG4gIGZsZXgtYmFzaXM6IDEwMCU7XG4gIGhlaWdodDogMDtcbn1cblxuLm1vYmlsZS1vbmx5IHtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4ucmVzcG9uc2l2ZS1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG1pbi13aWR0aDogNTAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMTtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZmxleC1iYXNpczogYXV0bztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgd2lkdGg6IGF1dG87XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnRvZ2dsZS1vcHRpb25zIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiA1cHg7XG4gIHJpZ2h0OiA1cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICNlYmViZWI7XG4gIGNvbG9yOiAjNDdhMDZjO1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHdpZHRoOiAzNnB4O1xuICBoZWlnaHQ6IDM2cHg7XG4gIGZvbnQtc2l6ZTogMjhweDtcbiAgei1pbmRleDogMTAxO1xuICBkaXNwbGF5OiBub25lO1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG5cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgei1pbmRleDogOTk7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHotaW5kZXg6IDEwMDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAyMHB4O1xuICB9XG59Il19 */