You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by pa...@apache.org on 2023/05/20 15:49:08 UTC
[beam] branch master updated: Replace Playground embedding (#25274) (#25275)
This is an automated email from the ASF dual-hosted git repository.
pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/master by this push:
new 1b3931df482 Replace Playground embedding (#25274) (#25275)
1b3931df482 is described below
commit 1b3931df4821d9aef5c7768da80ea426e6ce8711
Author: alexeyinkin <al...@akvelon.com>
AuthorDate: Sat May 20 19:48:58 2023 +0400
Replace Playground embedding (#25274) (#25275)
* Replace Playground embedding (#25274)
* Fix Playground URL (#25274)
* Update the default example paths for website embeddings (#25274)
* Fix a test (#25274)
* Fix a test (#25274)
* Change the Python example to WordCount in the embeddings (#25274)
* Revert "Change the Python example to WordCount in the embeddings (#25274)"
This reverts commit a5a826f9dfed4d85fc405ee542ea6d34803a1fbf.
* Hide embedded Playground when switching to a language it does not have (#25274)
* Relax the test on the output of MinimalWorkCount in Go (#25274)
* Change play to play-dev
* Replace to play-dev everywhere
---------
Co-authored-by: rshamunov <ru...@akvelon.com>
---
.../standalone_default_examples_test.dart | 2 +-
.../lib/src/examples/go/minimal_word_count.dart | 30 ++----------------
.../lib/src/examples/java/minimal_word_count.dart | 2 +-
.../examples/python/word_count_with_metrics.dart | 2 +-
.../playground_components_dev/lib/src/expect.dart | 7 +++-
website/www/site/assets/js/language-switch-v2.js | 21 ++++++++++--
website/www/site/assets/scss/_playground.sass | 1 -
.../www/site/content/en/blog/ApachePlayground.md | 4 +--
.../en/get-started/resources/learning-resources.md | 4 +--
.../content/en/get-started/try-beam-playground.md | 13 +++++---
website/www/site/layouts/index.html | 37 +++++++++++++++-------
.../www/site/layouts/shortcodes/playground.html | 2 +-
.../site/layouts/shortcodes/playground_iframe.html | 2 +-
13 files changed, 71 insertions(+), 56 deletions(-)
diff --git a/playground/frontend/integration_test/standalone_default_examples_test.dart b/playground/frontend/integration_test/standalone_default_examples_test.dart
index 197e27868da..7f73af54cd9 100644
--- a/playground/frontend/integration_test/standalone_default_examples_test.dart
+++ b/playground/frontend/integration_test/standalone_default_examples_test.dart
@@ -56,7 +56,7 @@ Future<void> _expectExample(ExampleDescriptor example, WidgetTester wt) async {
expectVisibleText(visibleText, wt);
if (example.contextLine1Based != null) {
- expectContextLine(example.contextLine1Based!, wt);
+ expectContextLine(example.contextLine1Based!, wt, reason: example.path);
}
if (example.hasGraphTab) {
diff --git a/playground/frontend/playground_components_dev/lib/src/examples/go/minimal_word_count.dart b/playground/frontend/playground_components_dev/lib/src/examples/go/minimal_word_count.dart
index dc28a5976ab..61d39c200fc 100644
--- a/playground/frontend/playground_components_dev/lib/src/examples/go/minimal_word_count.dart
+++ b/playground/frontend/playground_components_dev/lib/src/examples/go/minimal_word_count.dart
@@ -23,7 +23,7 @@ import '../example_descriptor.dart';
const goMinimalWordCount = ExampleDescriptor(
//
'MinimalWordCount',
- contextLine1Based: 69,
+ contextLine1Based: 38,
dbPath: 'SDK_GO_MinimalWordCount',
path: '/sdks/go/examples/minimal_wordcount/minimal_wordcount.go',
sdk: Sdk.go,
@@ -31,31 +31,5 @@ const goMinimalWordCount = ExampleDescriptor(
outputContains: [
'Reading from gs://apache-beam-samples/shakespeare/kinglear.txt',
'Writing to wordcounts.txt',
- '''
-Nodes: {1: []uint8/bytes GLO}
-{2: string/string GLO}
-{3: string/string GLO}
-{4: KV<string,int64>/KV<string,varint> GLO}
-{5: string/string GLO}
-{6: string/string GLO}
-{7: KV<string,int>/KV<string,int[varintz]> GLO}
-{8: CoGBK<string,int>/CoGBK<string,int[varintz]> GLO}
-{9: KV<string,int>/KV<string,int[varintz]> GLO}
-{10: string/string GLO}
-{11: KV<int,string>/KV<int[varintz],string> GLO}
-{12: CoGBK<int,string>/CoGBK<int[varintz],string> GLO}
-Edges: 1: Impulse [] -> [Out: []uint8 -> {1: []uint8/bytes GLO}]
-2: ParDo [In(Main): []uint8 <- {1: []uint8/bytes GLO}] -> [Out: T -> {2: string/string GLO}]
-3: ParDo [In(Main): string <- {2: string/string GLO}] -> [Out: string -> {3: string/string GLO}]
-4: ParDo [In(Main): string <- {3: string/string GLO}] -> [Out: KV<string,int64> -> {4: KV<string,int64>/KV<string,varint> GLO}]
-5: ParDo [In(Main): KV<string,int64> <- {4: KV<string,int64>/KV<string,varint> GLO}] -> [Out: string -> {5: string/string GLO}]
-6: ParDo [In(Main): string <- {5: string/string GLO}] -> [Out: string -> {6: string/string GLO}]
-7: ParDo [In(Main): T <- {6: string/string GLO}] -> [Out: KV<T,int> -> {7: KV<string,int>/KV<string,int[varintz]> GLO}]
-8: CoGBK [In(Main): KV<string,int> <- {7: KV<string,int>/KV<string,int[varintz]> GLO}] -> [Out: CoGBK<string,int> -> {8: CoGBK<string,int>/CoGBK<string,int[varintz]> GLO}]
-9: Combine [In(Main): int <- {8: CoGBK<string,int>/CoGBK<string,int[varintz]> GLO}] -> [Out: KV<string,int> -> {9: KV<string,int>/KV<string,int[varintz]> GLO}]
-10: ParDo [In(Main): KV<string,int> <- {9: KV<string,int>/KV<string,int[varintz]> GLO}] -> [Out: string -> {10: string/string GLO}]
-11: ParDo [In(Main): T <- {10: string/string GLO}] -> [Out: KV<int,T> -> {11: KV<int,string>/KV<int[varintz],string> GLO}]
-12: CoGBK [In(Main): KV<int,string> <- {11: KV<int,string>/KV<int[varintz],string> GLO}] -> [Out: CoGBK<int,string> -> {12: CoGBK<int,string>/CoGBK<int[varintz],string> GLO}]
-13: ParDo [In(Main): CoGBK<int,string> <- {12: CoGBK<int,string>/CoGBK<int[varintz],string> GLO}] -> []
-'''],
+ ],
);
diff --git a/playground/frontend/playground_components_dev/lib/src/examples/java/minimal_word_count.dart b/playground/frontend/playground_components_dev/lib/src/examples/java/minimal_word_count.dart
index 73be7a14004..9a30a2b32e3 100644
--- a/playground/frontend/playground_components_dev/lib/src/examples/java/minimal_word_count.dart
+++ b/playground/frontend/playground_components_dev/lib/src/examples/java/minimal_word_count.dart
@@ -23,7 +23,7 @@ import '../example_descriptor.dart';
const javaMinimalWordCount = ExampleDescriptor(
//
'MinimalWordCount',
- contextLine1Based: 71,
+ contextLine1Based: 54,
dbPath: 'SDK_JAVA_MinimalWordCount',
path:
'/examples/java/src/main/java/org/apache/beam/examples/MinimalWordCount.java',
diff --git a/playground/frontend/playground_components_dev/lib/src/examples/python/word_count_with_metrics.dart b/playground/frontend/playground_components_dev/lib/src/examples/python/word_count_with_metrics.dart
index 53e09a96999..5619abc24c2 100644
--- a/playground/frontend/playground_components_dev/lib/src/examples/python/word_count_with_metrics.dart
+++ b/playground/frontend/playground_components_dev/lib/src/examples/python/word_count_with_metrics.dart
@@ -23,7 +23,7 @@ import '../example_descriptor.dart';
const pythonWordCountWithMetrics = ExampleDescriptor(
//
'WordCountWithMetrics',
- contextLine1Based: 48,
+ contextLine1Based: 23,
dbPath: 'SDK_PYTHON_WordCountWithMetrics',
path: '/sdks/python/apache_beam/examples/wordcount_with_metrics.py',
sdk: Sdk.python,
diff --git a/playground/frontend/playground_components_dev/lib/src/expect.dart b/playground/frontend/playground_components_dev/lib/src/expect.dart
index 71fe748d02d..4df3a7bab92 100644
--- a/playground/frontend/playground_components_dev/lib/src/expect.dart
+++ b/playground/frontend/playground_components_dev/lib/src/expect.dart
@@ -24,7 +24,11 @@ import 'package:playground_components/playground_components.dart';
import 'examples/example_descriptor.dart';
import 'widget_tester.dart';
-void expectContextLine(int contextLine1Based, WidgetTester wt) {
+void expectContextLine(
+ int contextLine1Based,
+ WidgetTester wt, {
+ String? reason,
+}) {
final controller = wt.findOneCodeController();
final selection = controller.selection;
final position = controller.code.hiddenRanges.recoverPosition(
@@ -36,6 +40,7 @@ void expectContextLine(int contextLine1Based, WidgetTester wt) {
expect(
controller.code.lines.characterIndexToLineIndex(position),
contextLine1Based - 1,
+ reason: reason,
);
}
diff --git a/website/www/site/assets/js/language-switch-v2.js b/website/www/site/assets/js/language-switch-v2.js
index 2a559fb57ec..fad7788b07d 100644
--- a/website/www/site/assets/js/language-switch-v2.js
+++ b/website/www/site/assets/js/language-switch-v2.js
@@ -61,6 +61,7 @@ $(document).ready(function() {
"valueToTabTitle": function (value) {
switch (value) {
case 'py': return 'Python';
+ case 'scio': return 'SCIO';
case 'typescript': return 'TypeScript';
}
@@ -87,6 +88,15 @@ $(document).ready(function() {
const tabsHtml = _self.navHtml(values);
$(this).before(tabsHtml);
+
+ // Add 'language-XXX' classes to the Playground iframe so it can be hidden
+ // when selecting a language it does not have.
+ let iframeWrapper = $(this).parent().parent().children('.code-snippet-playground');
+ if (iframeWrapper.length > 0) {
+ for (const value of values) {
+ iframeWrapper.addClass(`${name}-${value}`)
+ }
+ }
});
},
@@ -149,12 +159,19 @@ $(document).ready(function() {
$(`.${this.wrapper} li[data-value="${value}"]`).addClass("active");
$(`.${this.wrapper} li[data-value!="${value}"]`).removeClass("active");
- // Swapping visibility of code blocks.
+ // Hiding all sets of tabs and all playground iframes.
+ // Then showing those having a tab for the new language.
$(this.selector).hide(); // Ex: [class^=language-]:not(.no-toggle)
+ if (name === 'language') {
+ $('.code-snippet-playground').hide();
+ }
+ $(`.${name}-${value}`).show();
+
+ // Showing the main switch at the top of the page.
$("nav" + this.selector).show();
+
// make sure that runner and shell snippets are still visible after changing language
$("code" + this.selector).show();
- $(`.${name}-${value}`).show();
//add refresh method because html elements are added/deleted after changing language
$('[data-spy="scroll"]').each(function () {
diff --git a/website/www/site/assets/scss/_playground.sass b/website/www/site/assets/scss/_playground.sass
index ffae193db22..7c3b4b99c34 100644
--- a/website/www/site/assets/scss/_playground.sass
+++ b/website/www/site/assets/scss/_playground.sass
@@ -37,7 +37,6 @@
.playground
width: 100%
- height: 700px
@media (max-width: $mobile)
.playground
diff --git a/website/www/site/content/en/blog/ApachePlayground.md b/website/www/site/content/en/blog/ApachePlayground.md
index bc12aed5def..87be183e2d1 100644
--- a/website/www/site/content/en/blog/ApachePlayground.md
+++ b/website/www/site/content/en/blog/ApachePlayground.md
@@ -21,7 +21,7 @@ limitations under the License.
-->
### **What is Apache Beam Playground?**
-[Apache Beam Playground](https://play.beam.apache.org/) is an interactive environment to try Apache Beam transforms and examples without requiring to install or set up a Beam environment.
+[Apache Beam Playground](https://play-dev.beam.apache.org/) is an interactive environment to try Apache Beam transforms and examples without requiring to install or set up a Beam environment.
### **Apache Beam Playground Features**
@@ -39,7 +39,7 @@ limitations under the License.
### **What’s Next**
-* Try examples in [Apache Beam Playground](https://play.beam.apache.org/)
+* Try examples in [Apache Beam Playground](https://play-dev.beam.apache.org/)
* Submit your feedback using “Enjoying Playground?” in Apache Beam Playground or via [this form](https://docs.google.com/forms/d/e/1FAIpQLSd5_5XeOwwW2yjEVHUXmiBad8Lxk-4OtNcgG45pbyAZzd4EbA/viewform?usp=pp_url)
* Join the Beam [users@](/community/contact-us) mailing list
* Contribute to the Apache Beam Playground codebase by following a few steps in this [Contribution Guide](/contribute)
diff --git a/website/www/site/content/en/get-started/resources/learning-resources.md b/website/www/site/content/en/get-started/resources/learning-resources.md
index e435a07b287..200c47c5d5b 100644
--- a/website/www/site/content/en/get-started/resources/learning-resources.md
+++ b/website/www/site/content/en/get-started/resources/learning-resources.md
@@ -146,8 +146,8 @@ complexity. Beam Katas are available for both Java and Python SDKs.
### Beam Playground
-* [Beam Playground](https://play.beam.apache.org) is an interactive environment to try out Beam transforms and examples without having to install Apache Beam in your environment.
- You can try the available Apache Beam examples at [Beam Playground](https://play.beam.apache.org).
+* [Beam Playground](https://play-dev.beam.apache.org) is an interactive environment to try out Beam transforms and examples without having to install Apache Beam in your environment.
+ You can try the available Apache Beam examples at [Beam Playground](https://play-dev.beam.apache.org).
* Learn more about how to add an Apache Beam example/test/kata into Beam Playground catalog [here](/get-started/try-beam-playground/#how-to-add-new-examples).
## API Reference {#api-reference}
diff --git a/website/www/site/content/en/get-started/try-beam-playground.md b/website/www/site/content/en/get-started/try-beam-playground.md
index b183a9d264a..4a4f90bae6d 100644
--- a/website/www/site/content/en/get-started/try-beam-playground.md
+++ b/website/www/site/content/en/get-started/try-beam-playground.md
@@ -21,11 +21,16 @@ Beam Playground is an interactive environment to try out Beam transforms and exa
without having to install Apache Beam in your environment.
You can try the available Apache Beam examples at
-[Beam Playground](https://play.beam.apache.org/).
+[Beam Playground](https://play-dev.beam.apache.org/).
## Beam Playground WordCount Example
-{{< playground_iframe editable="1" example="SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" code="" height="700">}}
+{{< playground height="700px" >}}
+{{< playground_snippet language="java" path="SDK_JAVA_MinimalWordCount" >}}
+{{< playground_snippet language="py" path="SDK_PYTHON_WordCountWithMetrics" >}}
+{{< playground_snippet language="go" path="SDK_GO_MinimalWordCount" >}}
+{{< playground_snippet language="scio" path="SDK_SCIO_MinimalWordCount" >}}
+{{< /playground >}}
## How To Add New Examples
@@ -102,9 +107,9 @@ More details on examples in Apache Beam Playground can be found
## Next Steps
-* Try examples in [Apache Beam Playground](https://play.beam.apache.org/).
+* Try examples in [Apache Beam Playground](https://play-dev.beam.apache.org/).
* Submit feedback using "Enjoying Playground?" in
-[Apache Beam Playground](https://play.beam.apache.org/) or via
+[Apache Beam Playground](https://play-dev.beam.apache.org/) or via
[this form](https://docs.google.com/forms/d/e/1FAIpQLSd5_5XeOwwW2yjEVHUXmiBad8Lxk-4OtNcgG45pbyAZzd4EbA/viewform?usp=pp_url).
* Join the Beam [users@](/community/contact-us) mailing list.
* If you're interested in contributing to the Apache Beam Playground codebase, see the [Contribution Guide](/contribute).
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
index 6ada1652bdf..9e9d1222a82 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -53,21 +53,36 @@ limitations under the License. See accompanying LICENSE file.
<div class="body__contained body__section-nav playground-section" tabindex="-1">
<h1>Try Beam Playground</h1>
<p>Beam Playground is an interactive environment to try out Beam transforms and examples without having to install Apache Beam in your environment.
- You can try the Apache Beam examples at <a href="https://play.beam.apache.org/">Beam Playground (Beta)</a>.
+ You can try the Apache Beam examples at <a href="https://play-dev.beam.apache.org/">Beam Playground (Beta)</a>.
</p>
<br>
<br>
- <a class="playground__mobile" href="https://play.beam.apache.org/">
+ <a class="playground__mobile" href="https://play-dev.beam.apache.org/">
<img src="images/playground.png" alt="beam playground">
</a>
- <div class="playground-iframe-wrapper-no-scroll">
- <iframe
- src="https://play.beam.apache.org/embedded?editable=1&example=SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount"
- width="100%"
- height="700px"
- class="code-snippet playground"
- allow="clipboard-write">
- </iframe>
+
+ <div class="playground-wrapper">
+ <div class="playground-snippets">
+ <div class="language-java playground-snippet" data-sdk="java"></div>
+ <div class="language-py playground-snippet" data-sdk="python"></div>
+ <div class="language-go playground-snippet" data-sdk="go"></div>
+ <div class="language-scio playground-snippet" data-sdk="scio"></div>
+ </div>
+
+ {{ $javaDict := dict "sdk" "java" "path" "SDK_JAVA_MinimalWordCount" }}
+ {{ $pythonDict := dict "sdk" "python" "path" "SDK_PYTHON_WordCountWithMetrics" }}
+ {{ $goDict := dict "sdk" "go" "path" "SDK_GO_MinimalWordCount" }}
+ {{ $scioDict := dict "sdk" "scio" "path" "SDK_SCIO_MinimalWordCount" }}
+ {{ $examples := slice $javaDict $pythonDict $goDict $scioDict }}
+
+ <div class="code-snippet code-snippet-playground">
+ <iframe
+ src="https://play-dev.beam.apache.org/embedded?sdk=java&examples={{ jsonify $examples }}"
+ width="100%"
+ height="700px"
+ allow="clipboard-write"
+ />
+ </div>
<div class="playground-iframe-overlay"></div>
</div>
</div>
@@ -218,7 +233,7 @@ limitations under the License. See accompanying LICENSE file.
<a class="ctas_button" href={{ "/get-started/quickstart-go/" | relLangURL }}>{{ T "home-go-quickstart" }}</a>
</div>
<div class='ctas_row'>
- <a class="ctas_button" href={{ "https://play.beam.apache.org/" | relLangURL }}>{{ T "home-playground" }}</a>
+ <a class="ctas_button" href={{ "https://play-dev.beam.apache.org/" | relLangURL }}>{{ T "home-playground" }}</a>
</div>
</div>
{{ end }}
diff --git a/website/www/site/layouts/shortcodes/playground.html b/website/www/site/layouts/shortcodes/playground.html
index c23f8d571db..d0e75e366d0 100644
--- a/website/www/site/layouts/shortcodes/playground.html
+++ b/website/www/site/layouts/shortcodes/playground.html
@@ -79,7 +79,7 @@ See playground_snippet for all supported options.
{{ $editable := 1 }}{{ if isset .Params "editable" }}{{ $editable = index .Params "editable" }}{{ end }}
<div class="code-snippet code-snippet-playground">
<iframe
- src="https://play.beam.apache.org/embedded?editable={{ $editable }}&examples={{ $snippets }}"
+ src="https://play-dev.beam.apache.org/embedded?editable={{ $editable }}&examples={{ $snippets }}"
width="100%"
height="{{ .Get "height" }}"
class="playground"
diff --git a/website/www/site/layouts/shortcodes/playground_iframe.html b/website/www/site/layouts/shortcodes/playground_iframe.html
index bd0a447b3e5..e920012c20e 100644
--- a/website/www/site/layouts/shortcodes/playground_iframe.html
+++ b/website/www/site/layouts/shortcodes/playground_iframe.html
@@ -12,7 +12,7 @@ limitations under the License. See accompanying LICENSE file.
<div class="playground-iframe-wrapper-no-scroll">
<iframe
- src="https://play.beam.apache.org/embedded?editable={{ .Get `editable` }}&example={{ .Get `example` }}&code={{ .Get `code` }}"
+ src="https://play-dev.beam.apache.org/embedded?editable={{ .Get `editable` }}&example={{ .Get `example` }}&code={{ .Get `code` }}"
width="100%"
height="{{ .Get `height` }}"
class="code-snippet playground"