Skip to content

Commit

Permalink
Extract playground components to a separate package (apache#22600)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexeyinkin committed Sep 15, 2022
1 parent ad2d51d commit 0ac6513
Show file tree
Hide file tree
Showing 232 changed files with 4,459 additions and 4,768 deletions.
5 changes: 3 additions & 2 deletions learning/tour-of-beam/frontend/assets/translations/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,13 @@ ui:
continueGitHub: Continue with GitHub
continueGoogle: Continue with Google
copyright: © The Apache Software Foundation
darkMode: Dark Mode
lightMode: Light Mode
privacyPolicy: Privacy Policy
reportIssue: Report Issue in GitHub
signIn: Sign in
signOut: Sign out
toWebsite: To Apache Beam website
deleteAccount: Delete my account

pages:
welcome:
title: Welcome to the Tour of Beam!
Expand All @@ -39,8 +38,10 @@ pages:
tour:
summaryTitle: Table of Contents
completeUnit: Complete Unit

dialogs:
signInIf: If you would like to save your progress and track completed modules

complexity:
basic: Basic level
medium: Medium level
Expand Down
9 changes: 6 additions & 3 deletions learning/tour-of-beam/frontend/lib/components/footer.dart
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class Footer extends StatelessWidget {
const Text('ui.copyright').tr(),
],
),
// TODO(nausharipov): get version
// TODO(nausharipov): get version, https://github.com/apache/beam/issues/23038
Text(
'${'ui.builtWith'.tr()} (TODO: Version)',
style: const TextStyle(
Expand All @@ -61,6 +61,9 @@ class _Body extends StatelessWidget {

@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
final ext = themeData.extension<BeamThemeExtension>()!;

return Container(
width: double.infinity,
height: TobSizes.footerHeight,
Expand All @@ -69,9 +72,9 @@ class _Body extends StatelessWidget {
horizontal: BeamSizes.size16,
),
decoration: BoxDecoration(
color: ThemeColors.of(context).secondaryBackground,
color: ext.secondaryBackgroundColor,
border: Border(
top: BorderSide(color: ThemeColors.of(context).divider),
top: BorderSide(color: themeData.dividerColor),
),
),
child: child,
Expand Down

This file was deleted.

6 changes: 5 additions & 1 deletion learning/tour-of-beam/frontend/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
*/

import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_ext/easy_localization_ext.dart';
import 'package:easy_localization_loader/easy_localization_loader.dart';
import 'package:flutter/material.dart';
import 'package:playground_components/playground_components.dart';
Expand All @@ -38,7 +39,10 @@ void main() async {
startLocale: englishLocale,
fallbackLocale: englishLocale,
path: 'assets/translations',
assetLoader: YamlAssetLoader(),
assetLoader: MultiAssetLoader([
PlaygroundComponents.translationLoader,
YamlAssetLoader(),
]),
child: const TourOfBeamApp(),
),
);
Expand Down
125 changes: 125 additions & 0 deletions learning/tour-of-beam/frontend/lib/pages/tour/playground_demo.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
/*
* 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/widgets.dart';
import 'package:playground_components/playground_components.dart';

const String kApiClientURL =
'https://backend-router-beta-dot-apache-beam-testing.appspot.com';
const String kApiJavaClientURL =
'https://backend-java-beta-dot-apache-beam-testing.appspot.com';
const String kApiGoClientURL =
'https://backend-go-beta-dot-apache-beam-testing.appspot.com';
const String kApiPythonClientURL =
'https://backend-python-beta-dot-apache-beam-testing.appspot.com';
const String kApiScioClientURL =
'https://backend-scio-beta-dot-apache-beam-testing.appspot.com';

class PlaygroundDemoWidget extends StatefulWidget {
const PlaygroundDemoWidget({Key? key}) : super(key: key);

@override
State<PlaygroundDemoWidget> createState() => _PlaygroundDemoWidgetState();
}

class _PlaygroundDemoWidgetState extends State<PlaygroundDemoWidget> {
late final PlaygroundController playgroundController;

@override
void initState() {
super.initState();

final exampleRepository = ExampleRepository(
client: GrpcExampleClient(url: kApiClientURL),
);

final codeRepository = CodeRepository(
client: GrpcCodeClient(
url: kApiClientURL,
runnerUrlsById: {
Sdk.java.id: kApiJavaClientURL,
Sdk.go.id: kApiGoClientURL,
Sdk.python.id: kApiPythonClientURL,
Sdk.scio.id: kApiScioClientURL,
},
),
);

final exampleCache = ExampleCache(
exampleRepository: exampleRepository,
hasCatalog: true,
);

playgroundController = PlaygroundController(
codeRepository: codeRepository,
exampleCache: exampleCache,
examplesLoader: ExamplesLoader(),
);

playgroundController.examplesLoader.load(
ExamplesLoadingDescriptor(
descriptors: [
CatalogDefaultExampleLoadingDescriptor(sdk: Sdk.java),
],
//initialSdk: Sdk.java,
),
);
}

@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: playgroundController,
builder: _buildOnChange,
);
}

Widget _buildOnChange(BuildContext context, Widget? child) {
final snippetController = playgroundController.snippetEditingController;
if (snippetController == null) {
return const LoadingIndicator();
}

return Stack(
children: [
SplitView(
direction: Axis.vertical,
first: SnippetEditor(
controller: snippetController,
isEditable: true,
goToContextLine: false,
),
second: OutputWidget(
playgroundController: playgroundController,
graphDirection: Axis.horizontal,
),
),
Positioned(
top: 30,
right: 30,
child: Row(
children: [
RunOrCancelButton(playgroundController: playgroundController),
],
),
),
],
);
}
}
38 changes: 17 additions & 21 deletions learning/tour-of-beam/frontend/lib/pages/tour/screen.dart
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,9 @@ import 'package:playground_components/playground_components.dart';
import '../../components/expansion_tile_wrapper.dart';
import '../../components/filler_text.dart';
import '../../components/scaffold.dart';
import '../../components/split_view/pan.dart';
import '../../components/split_view/widget.dart';
import '../../constants/sizes.dart';
import '../../generated/assets.gen.dart';
import 'playground_demo.dart';

class TourScreen extends StatelessWidget {
const TourScreen();
Expand All @@ -52,18 +51,10 @@ class _WideTour extends StatelessWidget {
children: const [
_ContentTree(),
Expanded(
child: TobSplitView(
child: SplitView(
direction: Axis.horizontal,
pans: [
Pan(
child: _Content(),
minWeight: 0.3,
),
Pan(
child: _Playground(),
minWeight: 0.3,
),
],
first: _Content(),
second: PlaygroundDemoWidget(),
),
),
],
Expand All @@ -89,7 +80,7 @@ class _NarrowTour extends StatelessWidget {
DecoratedBox(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: ThemeColors.of(context).divider),
top: BorderSide(color: Theme.of(context).dividerColor),
),
),
child: const _Playground(),
Expand Down Expand Up @@ -283,14 +274,16 @@ class _Content extends StatelessWidget {

@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);

return Container(
height: MediaQuery.of(context).size.height -
BeamSizes.appBarHeight -
TobSizes.footerHeight,
decoration: BoxDecoration(
color: ThemeColors.of(context).background,
color: themeData.backgroundColor,
border: Border(
left: BorderSide(color: ThemeColors.of(context).divider),
left: BorderSide(color: themeData.dividerColor),
),
),
child: Column(
Expand All @@ -314,12 +307,14 @@ class _ContentFooter extends StatelessWidget {

@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);

return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: ThemeColors.of(context).divider),
top: BorderSide(color: themeData.dividerColor),
),
color: ThemeColors.of(context).secondaryBackground,
color: themeData.extension<BeamThemeExtension>()?.secondaryBackgroundColor,
),
width: double.infinity,
padding: const EdgeInsets.all(BeamSizes.size20),
Expand All @@ -329,8 +324,8 @@ class _ContentFooter extends StatelessWidget {
Flexible(
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: ThemeColors.of(context).primary,
side: BorderSide(color: ThemeColors.of(context).primary),
foregroundColor: themeData.primaryColor,
side: BorderSide(color: themeData.primaryColor),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(BeamSizes.size4),
Expand All @@ -357,6 +352,7 @@ class _Playground extends StatelessWidget {

@override
Widget build(BuildContext context) {
return const Center(child: Text('Playground'));
// TODO(alexeyinkin): Even this way the narrow layout breaks, https://github.com/apache/beam/issues/23244
return const Center(child: Text('TODO: Playground for narrow screen'));
}
}
Loading

0 comments on commit 0ac6513

Please sign in to comment.