Skip to content

Commit

Permalink
Merge pull request #17792 from [BEAM-13756] [Playground] Merge Log an…
Browse files Browse the repository at this point in the history
…d Output tabs into one and add there filtering

* [BEAM-13756] Merged Log and Output tabs into Result tab

* [BEAM-13756] Merged Log and Output tabs into Result tab

* [BEAM-13756] Merged Log and Output tabs into Result tab

* [BEAM-13756] Merged Log and Output tabs into Result tab

* [BEAM-13756] Merged Log and Output tabs into Result tab
  • Loading branch information
miamihotline committed Jun 3, 2022
1 parent b366d52 commit 1f8ae65
Show file tree
Hide file tree
Showing 10 changed files with 250 additions and 21 deletions.
8 changes: 8 additions & 0 deletions playground/frontend/lib/l10n/app_en.arb
Original file line number Diff line number Diff line change
Expand Up @@ -218,5 +218,13 @@
"multifileWarning": "Multifile not supported yet for running in playground. Open it on github.",
"@multifileWarning": {
"description": "Multifile not supported text"
},
"displayAtThisTab": "Display at this tab",
"@displayAtThisTab": {
"description": "Description for the output filter popover"
},
"result": "Result",
"@result": {
"description": "Name for the output tab"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@
* limitations under the License.
*/

enum OutputType {
all,
log,
output,
graph,
}

class OutputsModel {
final String output;
final String graph;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import 'package:flutter/material.dart';
import 'package:playground/modules/output/components/output_area.dart';
import 'package:playground/modules/output/components/output_header/output_header.dart';

const kTabsCount = 3;
const kTabsCount = 2;

class Output extends StatefulWidget {
final bool isEmbedded;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,9 @@ class OutputArea extends StatelessWidget {
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
OutputResult(
text: playgroundState.result?.output ?? '',
text: playgroundState.outputResult ?? '',
isSelected: tabController.index == 0,
),
OutputResult(
text: playgroundState.result?.log ?? '',
isSelected: tabController.index == 1,
),
if (showGraph)
GraphTab(
graph: playgroundState.result?.graph ?? '',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,24 @@
* limitations under the License.
*/

import 'package:aligned_dialog/aligned_dialog.dart';
import 'package:flutter/material.dart';
import 'package:playground/config/theme.dart';
import 'package:playground/constants/sizes.dart';
import 'package:playground/modules/output/components/output_header/result_filter_popover.dart';

class OutputTab extends StatefulWidget {
final String name;
final bool isSelected;
final String value;
final bool hasFilter;

const OutputTab({
Key? key,
required this.name,
required this.isSelected,
required this.value,
this.hasFilter = false,
}) : super(key: key);

@override
Expand Down Expand Up @@ -61,9 +65,27 @@ class _OutputTabState extends State<OutputTab> {
child: Wrap(
direction: Axis.horizontal,
alignment: WrapAlignment.center,
spacing: 8.0,
spacing: kMdSpacing,
children: [
Text(widget.name),
widget.hasFilter
? GestureDetector(
onTap: () {
showAlignedDialog(
context: context,
builder: (dialogContext) => const ResultFilterPopover(),
followerAnchor: Alignment.topLeft,
targetAnchor: Alignment.topLeft,
barrierColor: Colors.transparent,
);
},
child: Icon(
Icons.filter_alt_outlined,
size: kIconSizeSm,
color: ThemeColors.of(context).primary,
),
)
: const SizedBox(),
if (hasNewContent)
Container(
width: kIconSizeXs,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,10 @@ class OutputTabs extends StatelessWidget {
controller: tabController,
tabs: <Widget>[
OutputTab(
name: appLocale.output,
name: appLocale.result,
isSelected: tabController.index == 0,
value: state.result?.output ?? '',
),
OutputTab(
name: appLocale.log,
isSelected: tabController.index == 1,
value: state.result?.log ?? '',
value: state.outputResult ?? '',
hasFilter: true,
),
if (showGraph)
OutputTab(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
* 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/config/theme.dart';
import 'package:playground/constants/sizes.dart';
import 'package:playground/modules/examples/models/outputs_model.dart';
import 'package:playground/pages/playground/states/playground_state.dart';
import 'package:provider/provider.dart';

class ResultFilterBubble extends StatelessWidget {
final OutputType type;
final String name;

const ResultFilterBubble({
Key? key,
required this.type,
required this.name,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return MouseRegion(
cursor: SystemMouseCursors.click,
child: Padding(
padding: const EdgeInsets.only(right: kMdSpacing),
child: Consumer<PlaygroundState>(
builder: (context, state, child) {
final isSelected = type == state.selectedOutputFilterType;

return GestureDetector(
onTap: () {
if (!isSelected) {
state.setSelectedOutputFilterType(type);
state.filterOutput(type);
}
},
child: Container(
height: kContainerHeight,
padding: const EdgeInsets.symmetric(horizontal: kXlSpacing),
decoration: BoxDecoration(
color: isSelected
? ThemeColors.of(context).primary
: ThemeColors.of(context).lightGreyColor,
borderRadius: BorderRadius.circular(kXlBorderRadius),
),
child: Center(
child: Text(
name,
style: TextStyle(
color: isSelected
? ThemeColors.of(context).primaryBackgroundTextColor
: ThemeColors.of(context)
.lightGreyBackgroundTextColor,
),
),
),
),
);
},
),
),
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/*
* 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_gen/gen_l10n/app_localizations.dart';
import 'package:playground/constants/sizes.dart';
import 'package:playground/modules/examples/models/outputs_model.dart';
import 'package:playground/modules/output/components/output_header/result_filter_bubble.dart';

const kPopoverWidth = 240.0;
const kPopoverPadding = 50.0;

class ResultFilterPopover extends StatelessWidget {
const ResultFilterPopover({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
AppLocalizations appLocale = AppLocalizations.of(context)!;

return Padding(
padding: const EdgeInsets.only(top: kPopoverPadding),
child: SizedBox(
width: kPopoverWidth,
child: Card(
child: Padding(
padding: const EdgeInsets.all(kMdSpacing),
child: Wrap(
runSpacing: kMdSpacing,
children: [
Text(appLocale.displayAtThisTab),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: kSmSpacing,
vertical: kSmSpacing,
),
child: Row(
children: [
ResultFilterBubble(
type: OutputType.all,
name: appLocale.all,
),
ResultFilterBubble(
type: OutputType.log,
name: appLocale.log,
),
ResultFilterBubble(
type: OutputType.output,
name: appLocale.output,
),
],
),
),
],
),
),
),
),
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import 'package:playground/modules/editor/repository/code_repository/code_reposi
import 'package:playground/modules/editor/repository/code_repository/run_code_request.dart';
import 'package:playground/modules/editor/repository/code_repository/run_code_result.dart';
import 'package:playground/modules/examples/models/example_model.dart';
import 'package:playground/modules/examples/models/outputs_model.dart';
import 'package:playground/modules/sdk/models/sdk.dart';

const kTitleLength = 15;
Expand All @@ -47,6 +48,8 @@ class PlaygroundState with ChangeNotifier {
String _pipelineOptions = '';
DateTime? resetKey;
StreamController<int>? _executionTime;
OutputType? selectedOutputFilterType;
String? outputResult;

PlaygroundState({
SDK sdk = SDK.java,
Expand All @@ -58,6 +61,8 @@ class PlaygroundState with ChangeNotifier {
_sdk = sdk;
_source = _selectedExample?.source ?? '';
_codeRepository = codeRepository;
selectedOutputFilterType = OutputType.all;
outputResult = '';
}

String get examplesTitle {
Expand Down Expand Up @@ -97,6 +102,7 @@ class PlaygroundState with ChangeNotifier {
_source = example.source ?? '';
_result = null;
_executionTime = null;
setOutputResult('');
notifyListeners();
}

Expand All @@ -109,6 +115,16 @@ class PlaygroundState with ChangeNotifier {
_source = source;
}

setSelectedOutputFilterType(OutputType type) {
selectedOutputFilterType = type;
notifyListeners();
}

setOutputResult(String outputs) {
outputResult = outputs;
notifyListeners();
}

clearOutput() {
_result = null;
notifyListeners();
Expand All @@ -119,6 +135,7 @@ class PlaygroundState with ChangeNotifier {
_pipelineOptions = selectedExample?.pipelineOptions ?? '';
resetKey = DateTime.now();
_executionTime = null;
setOutputResult('');
notifyListeners();
}

Expand Down Expand Up @@ -157,6 +174,10 @@ class PlaygroundState with ChangeNotifier {
);
_runSubscription = _codeRepository?.runCode(request).listen((event) {
_result = event;
String log = event.log ?? '';
String output = event.output ?? '';
setOutputResult(log + output);

if (event.isFinished && onFinish != null) {
onFinish();
_executionTime?.close();
Expand All @@ -179,6 +200,9 @@ class PlaygroundState with ChangeNotifier {
log: (_result?.log ?? '') + kExecutionCancelledText,
graph: _result?.graph,
);
String log = _result?.log ?? '';
String output = _result?.output ?? '';
setOutputResult(log + output);
_executionTime?.close();
notifyListeners();
}
Expand All @@ -197,6 +221,7 @@ class PlaygroundState with ChangeNotifier {
log: kCachedResultsLog + logs,
graph: _selectedExample!.graph,
);
setOutputResult(_result!.log! + _result!.output!);
_executionTime?.close();
notifyListeners();
}
Expand Down Expand Up @@ -228,4 +253,24 @@ class PlaygroundState with ChangeNotifier {

return streamController;
}

filterOutput(OutputType type) {
var output = result?.output ?? '';
var log = result?.log ?? '';

switch (type) {
case OutputType.all:
setOutputResult(log + output);
break;
case OutputType.log:
setOutputResult(log);
break;
case OutputType.output:
setOutputResult(output);
break;
default:
setOutputResult(log + output);
break;
}
}
}
Loading

0 comments on commit 1f8ae65

Please sign in to comment.