You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by fj...@apache.org on 2019/08/29 15:41:46 UTC
[incubator-druid] branch master updated: Web-Console: Increase
snapshot coverage (#8408)
This is an automated email from the ASF dual-hosted git repository.
fjy pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git
The following commit(s) were added to refs/heads/master by this push:
new beed070 Web-Console: Increase snapshot coverage (#8408)
beed070 is described below
commit beed07022a890778cf563d8c8fdac8955871f82a
Author: mcbrewster <37...@users.noreply.github.com>
AuthorDate: Thu Aug 29 09:41:34 2019 -0600
Web-Console: Increase snapshot coverage (#8408)
* increase test-coverage
* fix ordered inputs
* fixes
* prettier fix
* fixes
---
.../__snapshots__/segment-timeline.spec.tsx.snap | 198 +++
.../segment-timeline/segment-timeline.spec.tsx} | 11 +-
.../__snapshots__/timed-button.spec.tsx.snap | 44 +
.../timed-button/timed-button.spec.tsx} | 16 +-
web-console/src/utils/spec-utils.spec.ts | 40 +
web-console/src/utils/utils.spec.ts | 241 +++
.../__snapshots__/query-output.spec.tsx.snap | 1609 +++++++++++++++++++-
.../query-view/query-output/query-output.spec.tsx | 65 +-
.../views/query-view/query-output/query-output.tsx | 1 +
.../__snapshots__/visualization.spec.tsx.snap | 18 +
.../visualization.spec.tsx} | 19 +-
11 files changed, 2190 insertions(+), 72 deletions(-)
diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
new file mode 100644
index 0000000..b4a34bb
--- /dev/null
+++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Segment Timeline matches snapshot 1`] = `
+<div
+ class="segment-timeline app-view"
+>
+ <div>
+ <div
+ class="loader"
+ >
+ <div
+ class="loader-logo"
+ >
+ <svg
+ viewBox="0 0 100 100"
+ >
+ <path
+ class="one"
+ d="M54.2,69.8h-2.7c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h2.7c11.5,0,23.8-7.4,23.8-23.7
+ c0-9.1-6.9-15.8-16.4-15.8H38c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h23.6c5.3,0,10.1,1.9,13.6,5.3c3.5,3.4,5.4,8,5.4,13.1
+ c0,6.6-2.3,13-6.3,17.7C69.5,66.8,62.5,69.8,54.2,69.8z"
+ />
+ <path
+ class="two"
+ d="M55.7,59.5h-26c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h26c7.5,0,11.5-5.8,11.5-11.5
+ c0-4.2-3.2-7.3-7.7-7.3h-26c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h26c5.9,0,10.3,4.3,10.3,9.9c0,3.7-1.3,7.2-3.7,9.8
+ C63.5,58,59.9,59.5,55.7,59.5z"
+ />
+ <path
+ class="three"
+ d="M27.2,38h-6.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3S27.9,38,27.2,38z"
+ />
+ <path
+ class="four"
+ d="M45.1,69.8h-5.8c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h5.8c0.7,0,1.3,0.6,1.3,1.3
+ C46.4,69.2,45.8,69.8,45.1,69.8z"
+ />
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div
+ class="side-control"
+ >
+ <div
+ class="bp3-form-group"
+ >
+ <div
+ class="bp3-form-content"
+ >
+ <div>
+ <label
+ class="bp3-control bp3-radio"
+ >
+ <input
+ checked=""
+ name="Blueprint3.RadioGroup-0"
+ type="radio"
+ value="countData"
+ />
+ <span
+ class="bp3-control-indicator"
+ />
+ Segment count
+ </label>
+ <label
+ class="bp3-control bp3-radio"
+ >
+ <input
+ name="Blueprint3.RadioGroup-0"
+ type="radio"
+ value="sizeData"
+ />
+ <span
+ class="bp3-control-indicator"
+ />
+ Total size
+ </label>
+ </div>
+ </div>
+ </div>
+ <div
+ class="bp3-form-group"
+ >
+ <label
+ class="bp3-label"
+ >
+ Datasource:
+
+ <span
+ class="bp3-text-muted"
+ />
+ </label>
+ <div
+ class="bp3-form-content"
+ >
+ <div
+ class="bp3-html-select bp3-fill"
+ >
+ <select>
+ <option
+ value="all"
+ >
+ Show all
+ </option>
+ </select>
+ <span
+ class="bp3-icon bp3-icon-double-caret-vertical"
+ icon="double-caret-vertical"
+ >
+ <svg
+ data-icon="double-caret-vertical"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <desc>
+ double-caret-vertical
+ </desc>
+ <path
+ d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div
+ class="bp3-form-group"
+ >
+ <label
+ class="bp3-label"
+ >
+ Period:
+
+ <span
+ class="bp3-text-muted"
+ />
+ </label>
+ <div
+ class="bp3-form-content"
+ >
+ <div
+ class="bp3-html-select bp3-fill"
+ >
+ <select>
+ <option
+ value="1"
+ >
+ 1 months
+ </option>
+ <option
+ value="3"
+ >
+ 3 months
+ </option>
+ <option
+ value="6"
+ >
+ 6 months
+ </option>
+ <option
+ value="9"
+ >
+ 9 months
+ </option>
+ <option
+ value="12"
+ >
+ 1 year
+ </option>
+ </select>
+ <span
+ class="bp3-icon bp3-icon-double-caret-vertical"
+ icon="double-caret-vertical"
+ >
+ <svg
+ data-icon="double-caret-vertical"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <desc>
+ double-caret-vertical
+ </desc>
+ <path
+ d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/web-console/src/views/query-view/query-output/query-output.spec.tsx b/web-console/src/components/segment-timeline/segment-timeline.spec.tsx
similarity index 79%
copy from web-console/src/views/query-view/query-output/query-output.spec.tsx
copy to web-console/src/components/segment-timeline/segment-timeline.spec.tsx
index ae3d06e..6d13e43 100644
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.spec.tsx
@@ -19,15 +19,12 @@
import { render } from '@testing-library/react';
import React from 'react';
-import { QueryOutput } from './query-output';
+import { SegmentTimeline } from './segment-timeline';
-describe('query output', () => {
+describe('Segment Timeline', () => {
it('matches snapshot', () => {
- const queryOutput = (
- <QueryOutput runeMode={false} onQueryChange={() => {}} loading={false} error="lol" />
- );
-
- const { container } = render(queryOutput);
+ const tableColumn = <SegmentTimeline chartHeight={100} chartWidth={100} />;
+ const { container } = render(tableColumn);
expect(container.firstChild).toMatchSnapshot();
});
});
diff --git a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
new file mode 100644
index 0000000..97e0b8c
--- /dev/null
+++ b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timed button matches snapshot 1`] = `
+<div
+ class="bp3-button-group"
+>
+ <button
+ class="bp3-button"
+ type="button"
+ />
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <button
+ class="bp3-button"
+ type="button"
+ >
+ <span
+ class="bp3-icon bp3-icon-caret-down"
+ icon="caret-down"
+ >
+ <svg
+ data-icon="caret-down"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <desc>
+ caret-down
+ </desc>
+ <path
+ d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ </button>
+ </span>
+ </span>
+</div>
+`;
diff --git a/web-console/src/views/query-view/query-output/query-output.spec.tsx b/web-console/src/components/timed-button/timed-button.spec.tsx
similarity index 75%
copy from web-console/src/views/query-view/query-output/query-output.spec.tsx
copy to web-console/src/components/timed-button/timed-button.spec.tsx
index ae3d06e..2de4811 100644
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ b/web-console/src/components/timed-button/timed-button.spec.tsx
@@ -19,15 +19,19 @@
import { render } from '@testing-library/react';
import React from 'react';
-import { QueryOutput } from './query-output';
+import { TimedButton } from './timed-button';
-describe('query output', () => {
+describe('Timed button', () => {
it('matches snapshot', () => {
- const queryOutput = (
- <QueryOutput runeMode={false} onQueryChange={() => {}} loading={false} error="lol" />
+ const timedButton = (
+ <TimedButton
+ intervals={[{ label: 'timeValue', value: 1000 }]}
+ onRefresh={() => null}
+ label={'label'}
+ defaultValue={1000}
+ />
);
-
- const { container } = render(queryOutput);
+ const { container } = render(timedButton);
expect(container.firstChild).toMatchSnapshot();
});
});
diff --git a/web-console/src/utils/spec-utils.spec.ts b/web-console/src/utils/spec-utils.spec.ts
index f368417..c55a46e 100644
--- a/web-console/src/utils/spec-utils.spec.ts
+++ b/web-console/src/utils/spec-utils.spec.ts
@@ -16,6 +16,7 @@
* limitations under the License.
*/
+import { getSamplerType } from './sampler';
import { computeFlattenExprsForData } from './spec-utils';
describe('spec-utils', () => {
@@ -66,3 +67,42 @@ describe('spec-utils', () => {
});
});
});
+
+describe.skip('test-utils', () => {
+ it('spec-utils', () => {
+ expect(
+ getSamplerType({
+ type: 'index_parallel',
+ ioConfig: {
+ type: 'index_parallel',
+ firehose: {
+ type: 'http',
+ uris: ['https://static.imply.io/data/wikipedia.json.gz'],
+ },
+ },
+ tuningConfig: {
+ type: 'index_parallel',
+ },
+ dataSchema: {
+ dataSource: 'wikipedia',
+ granularitySpec: {
+ type: 'uniform',
+ segmentGranularity: 'DAY',
+ queryGranularity: 'HOUR',
+ },
+ parser: {
+ type: 'string',
+ parseSpec: {
+ format: 'json',
+ timestampSpec: {
+ column: 'timestamp',
+ format: 'iso',
+ },
+ dimensionsSpec: {},
+ },
+ },
+ },
+ }),
+ ).toMatchInlineSnapshot(`"TRIM( TRAILING 'M' undefined 'MADAM')"`);
+ });
+});
diff --git a/web-console/src/utils/utils.spec.ts b/web-console/src/utils/utils.spec.ts
new file mode 100644
index 0000000..dda3c73
--- /dev/null
+++ b/web-console/src/utils/utils.spec.ts
@@ -0,0 +1,241 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ */
+
+import { getDruidErrorMessage, parseHtmlError, parseQueryPlan } from './druid-query';
+import {
+ getColumnTypeFromHeaderAndRows,
+ getDimensionSpecs,
+ getMetricSecs,
+ guessTypeFromSample,
+ updateSchemaWithSample,
+} from './druid-type';
+import { IngestionSpec } from './ingestion-spec';
+import {
+ getSamplerType,
+ headerFromSampleResponse,
+ sampleForConnect,
+ sampleForExampleManifests,
+ sampleForFilter,
+ sampleForParser,
+ sampleForSchema,
+ sampleForTimestamp,
+ sampleForTransform,
+} from './sampler';
+
+describe('test-utils', () => {
+ const ingestionSpec = {
+ type: 'index_parallel',
+ ioConfig: {
+ type: 'index_parallel',
+ firehose: {
+ type: 'http',
+ uris: ['https://static.imply.io/data/wikipedia.json.gz'],
+ },
+ },
+ tuningConfig: {
+ type: 'index_parallel',
+ },
+ dataSchema: {
+ dataSource: 'wikipedia',
+ granularitySpec: {
+ type: 'uniform',
+ segmentGranularity: 'DAY',
+ queryGranularity: 'HOUR',
+ },
+ parser: {
+ type: 'string',
+ parseSpec: {
+ format: 'json',
+ timestampSpec: {
+ column: 'timestamp',
+ format: 'iso',
+ },
+ dimensionsSpec: {},
+ },
+ },
+ },
+ };
+ it('spec-utils getSamplerType', () => {
+ expect(getSamplerType(ingestionSpec as IngestionSpec)).toMatchInlineSnapshot(`"index"`);
+ });
+ it('spec-utils headerFromSampleResponse', () => {
+ expect(headerFromSampleResponse({ cacheKey: 'abc123', data: [] })).toMatchInlineSnapshot(
+ `Array []`,
+ );
+ });
+ it('spec-utils sampleForParser', () => {
+ expect(
+ sampleForParser(ingestionSpec as IngestionSpec, 'start', 'abc123'),
+ ).toMatchInlineSnapshot(`Promise {}`);
+ });
+ it('spec-utils SampleSpec', () => {
+ expect(sampleForConnect(ingestionSpec as IngestionSpec, 'start')).toMatchInlineSnapshot(
+ `Promise {}`,
+ );
+ });
+ it('spec-utils sampleForTimestamp', () => {
+ expect(
+ sampleForTimestamp(ingestionSpec as IngestionSpec, 'start', 'abc123'),
+ ).toMatchInlineSnapshot(`Promise {}`);
+ });
+ it('spec-utils sampleForTransform', () => {
+ expect(
+ sampleForTransform(ingestionSpec as IngestionSpec, 'start', 'abc123'),
+ ).toMatchInlineSnapshot(`Promise {}`);
+ });
+ it('spec-utils sampleForFilter', () => {
+ expect(
+ sampleForFilter(ingestionSpec as IngestionSpec, 'start', 'abc123'),
+ ).toMatchInlineSnapshot(`Promise {}`);
+ });
+ it('spec-utils sampleForSchema', () => {
+ expect(
+ sampleForSchema(ingestionSpec as IngestionSpec, 'start', 'abc123'),
+ ).toMatchInlineSnapshot(`Promise {}`);
+ });
+ it('spec-utils sampleForExampleManifests', () => {
+ expect(sampleForExampleManifests('abc123')).toMatchInlineSnapshot(`Promise {}`);
+ });
+});
+
+describe('druid-type.ts', () => {
+ const ingestionSpec = {
+ type: 'index_parallel',
+ ioConfig: {
+ type: 'index_parallel',
+ firehose: {
+ type: 'http',
+ uris: ['https://static.imply.io/data/wikipedia.json.gz'],
+ },
+ },
+ tuningConfig: {
+ type: 'index_parallel',
+ },
+ dataSchema: {
+ dataSource: 'wikipedia',
+ granularitySpec: {
+ type: 'uniform',
+ segmentGranularity: 'DAY',
+ queryGranularity: 'HOUR',
+ },
+ parser: {
+ type: 'string',
+ parseSpec: {
+ format: 'json',
+ timestampSpec: {
+ column: 'timestamp',
+ format: 'iso',
+ },
+ dimensionsSpec: {},
+ },
+ },
+ },
+ };
+ it('spec-utils getSamplerType', () => {
+ expect(guessTypeFromSample([])).toMatchInlineSnapshot(`"string"`);
+ });
+ it('spec-utils getColumnTypeFromHeaderAndRows', () => {
+ expect(
+ getColumnTypeFromHeaderAndRows({ header: ['header'], rows: [] }, 'header'),
+ ).toMatchInlineSnapshot(`"string"`);
+ });
+ it('spec-utils getDimensionSpecs', () => {
+ expect(getDimensionSpecs({ header: ['header'], rows: [] }, true)).toMatchInlineSnapshot(`
+ Array [
+ "header",
+ ]
+ `);
+ });
+ it('spec-utils getMetricSecs', () => {
+ expect(getMetricSecs({ header: ['header'], rows: [] })).toMatchInlineSnapshot(`
+ Array [
+ Object {
+ "name": "count",
+ "type": "count",
+ },
+ ]
+ `);
+ });
+ it('spec-utils updateSchemaWithSample', () => {
+ expect(
+ updateSchemaWithSample(
+ ingestionSpec as IngestionSpec,
+ { header: ['header'], rows: [] },
+ 'specific',
+ true,
+ ),
+ ).toMatchInlineSnapshot(`
+ Object {
+ "dataSchema": Object {
+ "dataSource": "wikipedia",
+ "granularitySpec": Object {
+ "queryGranularity": "HOUR",
+ "rollup": true,
+ "segmentGranularity": "DAY",
+ "type": "uniform",
+ },
+ "metricsSpec": Array [
+ Object {
+ "name": "count",
+ "type": "count",
+ },
+ ],
+ "parser": Object {
+ "parseSpec": Object {
+ "dimensionsSpec": Object {
+ "dimensions": Array [
+ "header",
+ ],
+ },
+ "format": "json",
+ "timestampSpec": Object {
+ "column": "timestamp",
+ "format": "iso",
+ },
+ },
+ "type": "string",
+ },
+ },
+ "ioConfig": Object {
+ "firehose": Object {
+ "type": "http",
+ "uris": Array [
+ "https://static.imply.io/data/wikipedia.json.gz",
+ ],
+ },
+ "type": "index_parallel",
+ },
+ "tuningConfig": Object {
+ "type": "index_parallel",
+ },
+ "type": "index_parallel",
+ }
+ `);
+ });
+});
+describe('druid-query.ts', () => {
+ it('spec-utils parseHtmlError', () => {
+ expect(parseHtmlError('<div></div>')).toMatchInlineSnapshot(`undefined`);
+ });
+ it('spec-utils parseHtmlError', () => {
+ expect(getDruidErrorMessage({})).toMatchInlineSnapshot(`undefined`);
+ });
+ it('spec-utils parseQueryPlan', () => {
+ expect(parseQueryPlan('start')).toMatchInlineSnapshot(`"start"`);
+ });
+});
diff --git a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap b/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
index 65e36a8..e5a679f 100644
--- a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
+++ b/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
@@ -13,196 +13,1711 @@ exports[`query output matches snapshot 1`] = `
>
<div
class="rt-thead -header"
- style="min-width: 0px;"
+ style="min-width: 400px;"
>
<div
class="rt-tr"
role="row"
- />
+ >
+ <div
+ class="rt-th rt-resizable-header"
+ role="columnheader"
+ style="flex: 100 0 auto; width: 100px;"
+ tabindex="-1"
+ >
+ <div
+ class="rt-resizable-header-content"
+ >
+ <span
+ class="bp3-popover-wrapper clickable-cell"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ language
+ </div>
+ </span>
+ </span>
+ </div>
+ <div
+ class="rt-resizer"
+ />
+ </div>
+ <div
+ class="rt-th -sort-desc aggregate-header rt-resizable-header"
+ role="columnheader"
+ style="flex: 100 0 auto; width: 100px;"
+ tabindex="-1"
+ >
+ <div
+ class="rt-resizable-header-content"
+ >
+ <span
+ class="bp3-popover-wrapper clickable-cell"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Count
+ </div>
+ </span>
+ </span>
+ </div>
+ <div
+ class="rt-resizer"
+ />
+ </div>
+ <div
+ class="rt-th aggregate-header rt-resizable-header"
+ role="columnheader"
+ style="flex: 100 0 auto; width: 100px;"
+ tabindex="-1"
+ >
+ <div
+ class="rt-resizable-header-content"
+ >
+ <span
+ class="bp3-popover-wrapper clickable-cell"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ dist_language
+ </div>
+ </span>
+ </span>
+ </div>
+ <div
+ class="rt-resizer"
+ />
+ </div>
+ <div
+ class="rt-th aggregate-header rt-resizable-header"
+ role="columnheader"
+ style="flex: 100 0 auto; width: 100px;"
+ tabindex="-1"
+ >
+ <div
+ class="rt-resizable-header-content"
+ >
+ <span
+ class="bp3-popover-wrapper clickable-cell"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ language_filtered_count
+ </div>
+ </span>
+ </span>
+ </div>
+ <div
+ class="rt-resizer"
+ />
+ </div>
+ </div>
</div>
<div
class="rt-tbody"
- style="min-width: 0px;"
+ style="min-width: 400px;"
>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 6881
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ JavaScript
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 166
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Python
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 62
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ HTML
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 46
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Java
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 42
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ C++
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 28
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Go
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 24
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Ruby
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 20
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ C#
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 14
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ C
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 13
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ CSS
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 13
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Shell
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 12
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Makefile
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 10
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ PHP
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 9
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Scala
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 8
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ HCL
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 6
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Jupyter Notebook
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 6
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Smarty
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 4
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -odd"
+ class="rt-tr -odd"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Elm
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 4
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
- class="rt-tr -padRow -even"
+ class="rt-tr -even"
role="row"
- />
+ >
+ <div
+ class="rt-td"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ Roff
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 3
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ <div>
+ <span
+ class="bp3-popover-wrapper"
+ >
+ <span
+ class="bp3-popover-target"
+ >
+ <div
+ class=""
+ >
+ 1
+ </div>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div
+ class="rt-td aggregate-column"
+ role="gridcell"
+ style="flex: 100 0 auto; width: 100px;"
+ >
+ 0
+ </div>
+ </div>
</div>
</div>
</div>
@@ -246,7 +1761,7 @@ exports[`query output matches snapshot 1`] = `
<span
class="-totalPages"
>
- 1
+ 2
</span>
</span>
<span
@@ -293,7 +1808,6 @@ exports[`query output matches snapshot 1`] = `
>
<button
class="-btn"
- disabled=""
type="button"
>
Next
@@ -302,11 +1816,6 @@ exports[`query output matches snapshot 1`] = `
</div>
</div>
<div
- class="rt-noData"
- >
- lol
- </div>
- <div
class="-loading"
>
<div
diff --git a/web-console/src/views/query-view/query-output/query-output.spec.tsx b/web-console/src/views/query-view/query-output/query-output.spec.tsx
index ae3d06e..d36ced1 100644
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.spec.tsx
@@ -17,14 +17,77 @@
*/
import { render } from '@testing-library/react';
+import { sqlParserFactory } from 'druid-query-toolkit';
import React from 'react';
+import { SQL_FUNCTIONS } from '../../../../lib/sql-docs';
+
import { QueryOutput } from './query-output';
describe('query output', () => {
it('matches snapshot', () => {
+ const parser = sqlParserFactory(SQL_FUNCTIONS.map(sqlFunction => sqlFunction.name));
+
+ const parsedQuery = parser(`SELECT
+ "language",
+ COUNT(*) AS "Count", COUNT(DISTINCT "language") AS "dist_language", COUNT(*) FILTER (WHERE "language"= 'xxx') AS "language_filtered_count"
+FROM "github"
+WHERE "__time" >= CURRENT_TIMESTAMP - INTERVAL '1' DAY AND "language" != 'TypeScript'
+GROUP BY 1
+HAVING "Count" != 37392
+ORDER BY "Count" DESC`);
+
const queryOutput = (
- <QueryOutput runeMode={false} onQueryChange={() => {}} loading={false} error="lol" />
+ <QueryOutput
+ runeMode={false}
+ loading={false}
+ error="lol"
+ queryResult={{
+ header: ['language', 'Count', 'dist_language', 'language_filtered_count'],
+ rows: [
+ ['', 6881, 1, 0],
+ ['JavaScript', 166, 1, 0],
+ ['Python', 62, 1, 0],
+ ['HTML', 46, 1, 0],
+ ['Java', 42, 1, 0],
+ ['C++', 28, 1, 0],
+ ['Go', 24, 1, 0],
+ ['Ruby', 20, 1, 0],
+ ['C#', 14, 1, 0],
+ ['C', 13, 1, 0],
+ ['CSS', 13, 1, 0],
+ ['Shell', 12, 1, 0],
+ ['Makefile', 10, 1, 0],
+ ['PHP', 9, 1, 0],
+ ['Scala', 8, 1, 0],
+ ['HCL', 6, 1, 0],
+ ['Jupyter Notebook', 6, 1, 0],
+ ['Smarty', 4, 1, 0],
+ ['Elm', 4, 1, 0],
+ ['Roff', 3, 1, 0],
+ ['Dockerfile', 3, 1, 0],
+ ['Rust', 3, 1, 0],
+ ['Dart', 2, 1, 0],
+ ['LLVM', 2, 1, 0],
+ ['Objective-C', 2, 1, 0],
+ ['Julia', 2, 1, 0],
+ ['PowerShell', 2, 1, 0],
+ ['Swift', 2, 1, 0],
+ ['Nim', 2, 1, 0],
+ ['XSLT', 1, 1, 0],
+ ['Lua', 1, 1, 0],
+ ['Vim script', 1, 1, 0],
+ ['Vue', 1, 1, 0],
+ ['Lasso', 1, 1, 0],
+ ['Clojure', 1, 1, 0],
+ ['OCaml', 1, 1, 0],
+ ['Chapel', 1, 1, 0],
+ ['Kotlin', 1, 1, 0],
+ ],
+ }}
+ parsedQuery={parsedQuery}
+ onQueryChange={() => null}
+ />
);
const { container } = render(queryOutput);
diff --git a/web-console/src/views/query-view/query-output/query-output.tsx b/web-console/src/views/query-view/query-output/query-output.tsx
index 17878d5..a1da2c0 100644
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.tsx
@@ -93,6 +93,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
</div>
);
}
+
getHeaderActions(h: string) {
const { parsedQuery, onQueryChange, runeMode } = this.props;
diff --git a/web-console/src/visualization/__snapshots__/visualization.spec.tsx.snap b/web-console/src/visualization/__snapshots__/visualization.spec.tsx.snap
new file mode 100644
index 0000000..18e5c97
--- /dev/null
+++ b/web-console/src/visualization/__snapshots__/visualization.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Visualization BarUnit 1`] = `
+<rect
+ class="bar-chart-unit"
+ height="10"
+ width="10"
+ x="10"
+ y="10"
+/>
+`;
+
+exports[`Visualization action barGroup 1`] = `
+<g
+ class="chart-axis undefined"
+ transform="value"
+/>
+`;
diff --git a/web-console/src/views/query-view/query-output/query-output.spec.tsx b/web-console/src/visualization/visualization.spec.tsx
similarity index 67%
copy from web-console/src/views/query-view/query-output/query-output.spec.tsx
copy to web-console/src/visualization/visualization.spec.tsx
index ae3d06e..b65b51c 100644
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ b/web-console/src/visualization/visualization.spec.tsx
@@ -19,15 +19,18 @@
import { render } from '@testing-library/react';
import React from 'react';
-import { QueryOutput } from './query-output';
+import { BarUnit } from './bar-unit';
+import { ChartAxis } from './chart-axis';
-describe('query output', () => {
- it('matches snapshot', () => {
- const queryOutput = (
- <QueryOutput runeMode={false} onQueryChange={() => {}} loading={false} error="lol" />
- );
-
- const { container } = render(queryOutput);
+describe('Visualization', () => {
+ it('BarUnit', () => {
+ const barGroup = <BarUnit x={10} y={10} width={10} height={10} />;
+ const { container } = render(barGroup);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+ it('action barGroup', () => {
+ const barGroup = <ChartAxis transform={'value'} scale={() => null} />;
+ const { container } = render(barGroup);
expect(container.firstChild).toMatchSnapshot();
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org