You are viewing a plain text version of this content. The canonical link for it is here.
Posted to github@beam.apache.org by GitBox <gi...@apache.org> on 2021/10/11 07:54:48 UTC

[GitHub] [beam] ElessarST opened a new pull request #15700: [BEAM-12987] [Playground] Add page UI elements

ElessarST opened a new pull request #15700:
URL: https://github.com/apache/beam/pull/15700


   I added the rest of the UI elements:
   - Output panel
   - Add a new example button
   - Reset button
   - Footer
   - More Actions in the app bar with links
   
   https://issues.apache.org/jira/browse/BEAM-12987
   New dependency - https://pub.dev/packages/flutter_svg (MIT)
   
   <img width="1199" alt="Screen Shot 2021-10-11 at 10 50 41" src="https://user-images.githubusercontent.com/6143095/136752954-a34669ed-9f49-4e12-a569-4a87d614df09.png">
   <img width="1203" alt="Screen Shot 2021-10-11 at 10 50 46" src="https://user-images.githubusercontent.com/6143095/136752962-8ab5581d-f547-4bab-9b2a-4f1a0e99f942.png">
   
    
   ------------------------
   
   Thank you for your contribution! Follow this checklist to help us incorporate your contribution quickly and easily:
   
    - [x] [**Choose reviewer(s)**](https://beam.apache.org/contribute/#make-your-change) and mention them in a comment (`R: @username`).
    - [x] Format the pull request title like `[BEAM-XXX] Fixes bug in ApproximateQuantiles`, where you replace `BEAM-XXX` with the appropriate JIRA issue, if applicable. This will automatically link the pull request to the issue.
    - [ ] Update `CHANGES.md` with noteworthy changes.
    - [ ] If this contribution is large, please file an Apache [Individual Contributor License Agreement](https://www.apache.org/licenses/icla.pdf).
   
   See the [Contributor Guide](https://beam.apache.org/contribute) for more tips on [how to make review process smoother](https://beam.apache.org/contribute/#make-reviewers-job-easier).
   
   `ValidatesRunner` compliance status (on master branch)
   --------------------------------------------------------
   
   <table>
     <thead>
       <tr>
         <th>Lang</th>
         <th>ULR</th>
         <th>Dataflow</th>
         <th>Flink</th>
         <th>Samza</th>
         <th>Spark</th>
         <th>Twister2</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Go</td>
         <td>---</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Go/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Go/lastCompletedBuild/badge/icon">
           </a>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Flink/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Flink/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Samza/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Samza/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Spark/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Spark/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>---</td>
       </tr>
       <tr>
         <td>Java</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_ULR/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_ULR/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow/lastCompletedBuild/badge/icon?subject=V1">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow_Streaming/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow_Streaming/lastCompletedBuild/badge/icon?subject=V1+Streaming">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow_Java11/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow_Java11/lastCompletedBuild/badge/icon?subject=V1+Java+11">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_VR_Dataflow_V2/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_VR_Dataflow_V2/lastCompletedBuild/badge/icon?subject=V2">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_VR_Dataflow_V2_Streaming/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_VR_Dataflow_V2_Streaming/lastCompletedBuild/badge/icon?subject=V2+Streaming">
           </a><br>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink/lastCompletedBuild/badge/icon?subject=Java+8">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink_Java11/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink_Java11/lastCompletedBuild/badge/icon?subject=Java+11">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Batch/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Batch/lastCompletedBuild/badge/icon?subject=Portable">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Streaming/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Streaming/lastCompletedBuild/badge/icon?subject=Portable+Streaming">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Samza/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Samza/lastCompletedBuild/badge/icon">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Samza/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Samza/lastCompletedBuild/badge/icon?subject=Portable">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Spark/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Spark/lastCompletedBuild/badge/icon">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Spark_Batch/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Spark_Batch/lastCompletedBuild/badge/icon?subject=Portable">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_SparkStructuredStreaming/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_SparkStructuredStreaming/lastCompletedBuild/badge/icon?subject=Structured+Streaming">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Twister2/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Twister2/lastCompletedBuild/badge/icon">
           </a>
         </td>
       </tr>
       <tr>
         <td>Python</td>
         <td>---</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow/lastCompletedBuild/badge/icon?subject=V1">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow_V2/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow_V2/lastCompletedBuild/badge/icon?subject=V2">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Py_ValCont/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Py_ValCont/lastCompletedBuild/badge/icon?subject=ValCont">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Python_PVR_Flink_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Python_PVR_Flink_Cron/lastCompletedBuild/badge/icon?subject=Portable">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Flink/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Flink/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Samza/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Samza/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Spark/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Spark/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>---</td>
       </tr>
       <tr>
         <td>XLang</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Direct/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Direct/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Dataflow/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Dataflow/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Flink/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Flink/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Samza/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Samza/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Spark/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_XVR_Spark/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>---</td>
       </tr>
     </tbody>
   </table>
   
   Examples testing status on various runners
   --------------------------------------------------------
   
   <table>
     <thead>
       <tr>
         <th>Lang</th>
         <th>ULR</th>
         <th>Dataflow</th>
         <th>Flink</th>
         <th>Samza</th>
         <th>Spark</th>
         <th>Twister2</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Go</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
       </tr>
       <tr>
         <td>Java</td>
         <td>---</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Java_Examples_Dataflow_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Java_Examples_Dataflow_Cron/lastCompletedBuild/badge/icon?subject=V1">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Java_Examples_Dataflow_Java11_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Java_Examples_Dataflow_Java11_Cron/lastCompletedBuild/badge/icon?subject=V1+Java11">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java_Examples_Dataflow_V2/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java_Examples_Dataflow_V2/lastCompletedBuild/badge/icon?subject=V2">
           </a><br>
         </td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
       </tr>
       <tr>
         <td>Python</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
       </tr>
       <tr>
         <td>XLang</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
       </tr>
     </tbody>
   </table>
   
   Post-Commit SDK/Transform Integration Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   
   <table>
     <thead>
       <tr>
         <th>Go</th>
         <th>Java</th>
         <th>Python</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Go/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Go/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Java/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Java/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Python36/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Python36/lastCompletedBuild/badge/icon?subject=3.6">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Python37/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Python37/lastCompletedBuild/badge/icon?subject=3.7">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PostCommit_Python38/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PostCommit_Python38/lastCompletedBuild/badge/icon?subject=3.8">
           </a>
         </td>
       </tr>
     </tbody>
   </table>
   
   Pre-Commit Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   
   <table>
     <thead>
       <tr>
         <th>---</th>
         <th>Java</th>
         <th>Python</th>
         <th>Go</th>
         <th>Website</th>
         <th>Whitespace</th>
         <th>Typescript</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Non-portable</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Java_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Java_Cron/lastCompletedBuild/badge/icon">
           </a><br>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Python_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Python_Cron/lastCompletedBuild/badge/icon?subject=Tests">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_PythonLint_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_PythonLint_Cron/lastCompletedBuild/badge/icon?subject=Lint">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_PythonDocker_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_PythonDocker_Cron/badge/icon?subject=Docker">
           </a><br>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_PythonDocs_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_PythonDocs_Cron/badge/icon?subject=Docs">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Go_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Go_Cron/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Website_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Website_Cron/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Whitespace_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Whitespace_Cron/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Typescript_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Typescript_Cron/lastCompletedBuild/badge/icon">
           </a>
         </td>
       </tr>
       <tr>
         <td>Portable</td>
         <td>---</td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_Portable_Python_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_Portable_Python_Cron/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>
           <a href="https://ci-beam.apache.org/job/beam_PreCommit_GoPortable_Cron/lastCompletedBuild/">
             <img alt="Build Status" src="https://ci-beam.apache.org/job/beam_PreCommit_GoPortable_Cron/lastCompletedBuild/badge/icon">
           </a>
         </td>
         <td>---</td>
         <td>---</td>
         <td>---</td>
       </tr>
     </tbody>
   </table>
   
   See [.test-infra/jenkins/README](https://github.com/apache/beam/blob/master/.test-infra/jenkins/README.md) for trigger phrase, status and link of all Jenkins jobs.
   
   
   GitHub Actions Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   [![Build python source distribution and wheels](https://github.com/apache/beam/workflows/Build%20python%20source%20distribution%20and%20wheels/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Build+python+source+distribution+and+wheels%22+branch%3Amaster+event%3Aschedule)
   [![Python tests](https://github.com/apache/beam/workflows/Python%20tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Python+Tests%22+branch%3Amaster+event%3Aschedule)
   [![Java tests](https://github.com/apache/beam/workflows/Java%20Tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Java+Tests%22+branch%3Amaster+event%3Aschedule)
   
   See [CI.md](https://github.com/apache/beam/blob/master/CI.md) for more information about GitHub Actions CI.
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] pabloem merged pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
pabloem merged pull request #15700:
URL: https://github.com/apache/beam/pull/15700


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] ElessarST commented on a change in pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
ElessarST commented on a change in pull request #15700:
URL: https://github.com/apache/beam/pull/15700#discussion_r726821774



##########
File path: playground/frontend/lib/pages/playground/components/more_actions.dart
##########
@@ -0,0 +1,134 @@
+/*
+ * 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 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'dart:html' as html;
+
+import 'package:playground/config/theme.dart';
+
+enum HeaderAction {
+  shortcuts,
+  beamPlaygroundGithub,
+  apacheBeamGithub,
+  scioGithub,
+  beamWebsite,
+  aboutBeam,
+}
+
+const kShortcutsText = "Shortcuts";
+
+const kBeamPlaygroundGithubText = "Beam Playground on GitHub";
+const kBeamPlaygroundGithubLink =
+    "https://github.com/apache/beam/tree/master/playground/frontend";
+
+const kApacheBeamGithubText = "Apache Beam on GitHub";
+const kApacheBeamGithubLink =
+    "https://github.com/apache/beam/tree/master/playground/frontend";
+
+const kScioGithubText = "SCIO on GitHub";
+const kScioGithubLink = "https://github.com/spotify/scio";
+
+const kBeamWebsiteText = "To Apache Beam website";
+const kBeamWebsiteLink = "https://beam.apache.org/";
+
+const kAboutBeamText = "About Apache Beam";
+
+class MoreActions extends StatelessWidget {
+  const MoreActions({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      child: PopupMenuButton<HeaderAction>(
+        icon: Icon(
+          Icons.more_horiz_outlined,
+          color: ThemeColors.of(context).grey1Color,
+        ),
+        itemBuilder: (BuildContext context) => <PopupMenuEntry<HeaderAction>>[
+          PopupMenuItem<HeaderAction>(
+            padding: EdgeInsets.zero,
+            value: HeaderAction.shortcuts,
+            child: ListTile(
+              leading: SvgPicture.asset("shortcuts.svg"),
+              title: const Text(kShortcutsText),
+            ),
+          ),
+          PopupMenuItem<HeaderAction>(
+            padding: EdgeInsets.zero,
+            value: HeaderAction.beamPlaygroundGithub,
+            child: ListTile(
+              leading: SvgPicture.asset("github.svg"),
+              title: const Text(kBeamPlaygroundGithubText),
+              onTap: () => html.window.open(

Review comment:
       Thank you, it's working with `url_launcher`. 
   I tried `flutter test`
   ```flutter test
   00:01 +4: All tests passed!```

##########
File path: playground/frontend/lib/pages/playground/components/more_actions.dart
##########
@@ -0,0 +1,134 @@
+/*
+ * 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 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'dart:html' as html;
+
+import 'package:playground/config/theme.dart';
+
+enum HeaderAction {
+  shortcuts,
+  beamPlaygroundGithub,
+  apacheBeamGithub,
+  scioGithub,
+  beamWebsite,
+  aboutBeam,
+}
+
+const kShortcutsText = "Shortcuts";
+
+const kBeamPlaygroundGithubText = "Beam Playground on GitHub";
+const kBeamPlaygroundGithubLink =
+    "https://github.com/apache/beam/tree/master/playground/frontend";
+
+const kApacheBeamGithubText = "Apache Beam on GitHub";
+const kApacheBeamGithubLink =
+    "https://github.com/apache/beam/tree/master/playground/frontend";
+
+const kScioGithubText = "SCIO on GitHub";
+const kScioGithubLink = "https://github.com/spotify/scio";
+
+const kBeamWebsiteText = "To Apache Beam website";
+const kBeamWebsiteLink = "https://beam.apache.org/";
+
+const kAboutBeamText = "About Apache Beam";
+
+class MoreActions extends StatelessWidget {
+  const MoreActions({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      child: PopupMenuButton<HeaderAction>(
+        icon: Icon(
+          Icons.more_horiz_outlined,
+          color: ThemeColors.of(context).grey1Color,
+        ),
+        itemBuilder: (BuildContext context) => <PopupMenuEntry<HeaderAction>>[
+          PopupMenuItem<HeaderAction>(
+            padding: EdgeInsets.zero,
+            value: HeaderAction.shortcuts,
+            child: ListTile(
+              leading: SvgPicture.asset("shortcuts.svg"),
+              title: const Text(kShortcutsText),
+            ),
+          ),
+          PopupMenuItem<HeaderAction>(
+            padding: EdgeInsets.zero,
+            value: HeaderAction.beamPlaygroundGithub,
+            child: ListTile(
+              leading: SvgPicture.asset("github.svg"),
+              title: const Text(kBeamPlaygroundGithubText),
+              onTap: () => html.window.open(

Review comment:
       Thank you, it's working with `url_launcher`. 
   I tried `flutter test`
   ```flutter test
   00:01 +4: All tests passed!




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] ElessarST commented on a change in pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
ElessarST commented on a change in pull request #15700:
URL: https://github.com/apache/beam/pull/15700#discussion_r726821230



##########
File path: playground/frontend/lib/components/toggle_theme_button/toggle_theme_button.dart
##########
@@ -31,16 +32,13 @@ class ToggleThemeButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return Consumer<ThemeProvider>(builder: (context, theme, child) {
       final text = theme.isDarkMode ? kLightMode : kDartMode;
-      final icon = theme.isDarkMode
-          ? Icons.light_mode_outlined
-          : Icons.mode_night_outlined;
       return Padding(
         padding: const EdgeInsets.symmetric(
           vertical: kSmSpacing,
           horizontal: kMdSpacing,
         ),
         child: TextButton.icon(
-          icon: Icon(icon),
+          icon: SvgPicture.asset("theme.svg"),

Review comment:
       Thanks, I moved all assets names to a const file




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] damondouglas commented on a change in pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
damondouglas commented on a change in pull request #15700:
URL: https://github.com/apache/beam/pull/15700#discussion_r727224974



##########
File path: playground/frontend/lib/modules/output/components/output_header/output_header.dart
##########
@@ -0,0 +1,47 @@
+/*
+ * 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 'package:flutter/material.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/output/components/output_header/output_placements.dart';
+
+import 'output_tabs.dart';
+
+class OutputHeader extends StatelessWidget {
+  const OutputHeader({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 50,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: kLgSpacing,
+          vertical: kZeroSpacing,
+        ),
+        child: Row(

Review comment:
       For a future PR and **not** blocking for this PR:
   
   When I clicked on either the OutputPlacement left or right buttons, I saw a RenderFlex overflowed error:
   
   ```
   ======== Exception caught by rendering library =====================================================
   The following assertion was thrown during layout:
   A RenderFlex overflowed by 16 pixels on the right.
   
   The relevant error-causing widget was: 
     Row Row:.../beam/playground/frontend/lib/modules/output/components/output_header/output_header.dart:37:16
   The overflowing RenderFlex has an orientation of Axis.horizontal.
   The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
   ```
   
   My browser size was roughly 700 x 700.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] pabloem merged pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
pabloem merged pull request #15700:
URL: https://github.com/apache/beam/pull/15700


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] damondouglas commented on a change in pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
damondouglas commented on a change in pull request #15700:
URL: https://github.com/apache/beam/pull/15700#discussion_r727224542



##########
File path: playground/frontend/lib/modules/output/components/output_header/output_header.dart
##########
@@ -0,0 +1,47 @@
+/*
+ * 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 'package:flutter/material.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/output/components/output_header/output_placements.dart';
+
+import 'output_tabs.dart';
+
+class OutputHeader extends StatelessWidget {
+  const OutputHeader({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 50,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: kLgSpacing,
+          vertical: kZeroSpacing,
+        ),
+        child: Row(

Review comment:
       For a future PR and **not** blocking for this PR:
   
   When I clicked on either the OutputPlacement left or right buttons, I saw a RenderFlex overflowed error:
   
   ```
   ======== Exception caught by rendering library =====================================================
   The following assertion was thrown during layout:
   A RenderFlex overflowed by 16 pixels on the right.
   
   The relevant error-causing widget was: 
     Row Row:.../beam/playground/frontend/lib/modules/output/components/output_header/output_header.dart:37:16
   The overflowing RenderFlex has an orientation of Axis.horizontal.
   The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
   ```
   
   My browser size was roughly 700 x 700.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] ElessarST commented on pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
ElessarST commented on pull request #15700:
URL: https://github.com/apache/beam/pull/15700#issuecomment-939823140


   R: @damondouglas
   
   cc: @pabloem


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] damondouglas commented on a change in pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
damondouglas commented on a change in pull request #15700:
URL: https://github.com/apache/beam/pull/15700#discussion_r726283323



##########
File path: playground/frontend/lib/modules/output/components/output_area.dart
##########
@@ -23,8 +23,15 @@ class OutputArea extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Center(
-      child: Text('Output'),
+    return Container(
+      color: Theme.of(context).backgroundColor,
+      child: const TabBarView(
+        children: <Widget>[
+          Center(child: Text("Output")),

Review comment:
       May we consider putting these header labels as constants?

##########
File path: playground/frontend/lib/components/toggle_theme_button/toggle_theme_button.dart
##########
@@ -31,16 +32,13 @@ class ToggleThemeButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return Consumer<ThemeProvider>(builder: (context, theme, child) {
       final text = theme.isDarkMode ? kLightMode : kDartMode;
-      final icon = theme.isDarkMode
-          ? Icons.light_mode_outlined
-          : Icons.mode_night_outlined;
       return Padding(
         padding: const EdgeInsets.symmetric(
           vertical: kSmSpacing,
           horizontal: kMdSpacing,
         ),
         child: TextButton.icon(
-          icon: Icon(icon),
+          icon: SvgPicture.asset("theme.svg"),

Review comment:
       May we hoist `"theme.svg"` as a `const` to the top of the file or in a constants file?

##########
File path: playground/frontend/lib/modules/actions/components/reset_action.dart
##########
@@ -0,0 +1,42 @@
+/*
+ * 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 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:playground/config/theme.dart';
+import 'package:playground/modules/actions/components/header_icon_button.dart';
+
+const kResetButtonText = "Reset";
+
+class ResetAction extends StatelessWidget {
+  final VoidCallback reset;
+
+  const ResetAction({Key? key, required this.reset}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return HeaderIconButton(
+      icon: SvgPicture.asset(
+        "reset.svg",

Review comment:
       May we consider hoisting this constant at the top of this file or a constants library.

##########
File path: playground/frontend/lib/modules/actions/components/new_example_action.dart
##########
@@ -0,0 +1,40 @@
+/*
+ * 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 'dart:html' as html;

Review comment:
       When running `flutter test`, I received the following error:
   
   ```
   Error: Not found: 'dart:html'
   ```
   
   I didn't receive any error when running the application in Chrome.

##########
File path: playground/frontend/lib/pages/playground/components/more_actions.dart
##########
@@ -0,0 +1,134 @@
+/*
+ * 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 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'dart:html' as html;
+
+import 'package:playground/config/theme.dart';
+
+enum HeaderAction {
+  shortcuts,
+  beamPlaygroundGithub,
+  apacheBeamGithub,
+  scioGithub,
+  beamWebsite,
+  aboutBeam,
+}
+
+const kShortcutsText = "Shortcuts";
+
+const kBeamPlaygroundGithubText = "Beam Playground on GitHub";
+const kBeamPlaygroundGithubLink =
+    "https://github.com/apache/beam/tree/master/playground/frontend";
+
+const kApacheBeamGithubText = "Apache Beam on GitHub";
+const kApacheBeamGithubLink =
+    "https://github.com/apache/beam/tree/master/playground/frontend";
+
+const kScioGithubText = "SCIO on GitHub";
+const kScioGithubLink = "https://github.com/spotify/scio";
+
+const kBeamWebsiteText = "To Apache Beam website";
+const kBeamWebsiteLink = "https://beam.apache.org/";
+
+const kAboutBeamText = "About Apache Beam";
+
+class MoreActions extends StatelessWidget {
+  const MoreActions({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      child: PopupMenuButton<HeaderAction>(
+        icon: Icon(
+          Icons.more_horiz_outlined,
+          color: ThemeColors.of(context).grey1Color,
+        ),
+        itemBuilder: (BuildContext context) => <PopupMenuEntry<HeaderAction>>[
+          PopupMenuItem<HeaderAction>(
+            padding: EdgeInsets.zero,
+            value: HeaderAction.shortcuts,
+            child: ListTile(
+              leading: SvgPicture.asset("shortcuts.svg"),
+              title: const Text(kShortcutsText),
+            ),
+          ),
+          PopupMenuItem<HeaderAction>(
+            padding: EdgeInsets.zero,
+            value: HeaderAction.beamPlaygroundGithub,
+            child: ListTile(
+              leading: SvgPicture.asset("github.svg"),
+              title: const Text(kBeamPlaygroundGithubText),
+              onTap: () => html.window.open(

Review comment:
       May we consider using the `url_launcher` (https://pub.dev/packages/url_launcher) package instead?  Tests raised errors in finding the `dart:html`.  I tried to investigate running `flutter test` with a specific device/platform or use of `TestOn` annotation but this didn't seem to work.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] ElessarST commented on pull request #15700: [BEAM-12987] [Playground] Add page UI elements

Posted by GitBox <gi...@apache.org>.
ElessarST commented on pull request #15700:
URL: https://github.com/apache/beam/pull/15700#issuecomment-940728240


   > May we add the following to the .gitignore:
   > 
   > ```
   > .dart_tool/
   > .packages
   > ```
   
   @damondouglas Thank you for the review!
   ```
   .dart_tool/
   .package
   ```
   
   They are already part of /playground/frontend/.gitignore.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org