feat(operators): Add signature based on parameters collection

Resolve signature from name, parameters and return type values as per ReactiveX#168. This change includes an
update to the OperatorDoc type, because the return type of every operator needed to be included. All
existing operators have been updated as well to include the correct return type. Some updates to the
css were required to add colors to the signature. Added a new pipe (ArgumentPipe) to create a nice
tooltip when hovering over the arguments.

src/app/operators/_operator-theme.scss

@@ -9,6 +9,12 @@ $link-color: #0a6fc2;
   $accent: mat-color(map-get($theme, accent));
   $operator-active-background: rgba($operator-active, 0.7);
 
+  .parameter-description{
+    font-size: .9em;
+    background-color: darken($operator-active, 20%);
+    white-space: pre-line;
+  }
+
   rx-marbles > div {
     text-align: center;
     min-width: 840px;

src/app/operators/components/operator-header/operator-header.component.html

@@ -2,5 +2,13 @@
   {{ operatorName }}
 </mat-toolbar>
 <mat-toolbar class="signature">
-  {{ operatorSignature }}
+  <span class="operator">{{ operatorName }}</span>(
+    <span *ngFor="let parameter of operatorParameters; let f=first">
+      <span *ngIf="!f">, </span>
+      <span class="argument" [matTooltip]="parameter | argument" [matTooltipClass]="'parameter-description'">{{parameter.name}}</span>:
+      <span class="type">{{parameter.type}}</span>
+    </span>
+  )
+  <span *ngIf="returnValue">:&nbsp;</span>
+  <span class="type" *ngIf="returnValue"> {{returnValue}}</span>
 </mat-toolbar>

src/app/operators/components/operator-header/operator-header.component.scss

@@ -6,10 +6,26 @@
 
 .signature {
   margin-bottom: 24px;
+  .operator{
+    color: #F77669;
+  }
+  .argument{
+    color: #FFFFFF;
+  }
+  .type{
+    color: #80cbc4;
+  }
 }
 
+.parameter-description{
+  color: red;
+}
+
+
 mat-toolbar {
   background: $operator-active !important;
   color: rgb(255, 255, 255);
   font-weight: normal;
 }
+
+

src/app/operators/components/operator-header/operator-header.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { OperatorParameters } from '../../../../operator-docs';
 
 @Component({
   selector: 'app-operator-header',
@@ -8,4 +9,6 @@ import { Component, Input } from '@angular/core';
 export class OperatorHeaderComponent {
   @Input() operatorName: string;
   @Input() operatorSignature: string;
+  @Input() operatorParameters: OperatorParameters[];
+  @Input() returnValue: string;
 }

src/app/operators/components/operator/operator.component.html

@@ -1,5 +1,7 @@
 <app-operator-header [operatorName]="operatorName"
                      [operatorSignature]="signature"
+                     [operatorParameters]="parameters"
+                     [returnValue]="returnValue"
                      [id]="operatorName"
                      class="operator-header">
 </app-operator-header>

src/app/operators/components/operator/operator.component.ts

@@ -80,6 +80,10 @@ export class OperatorComponent implements OnInit {
     return this.operator.name;
   }
 
+  get returnValue() {
+    return this.operator.returnValue;
+  }
+
   get signature() {
     return this.operator.signature || 'Signature Placeholder';
   }

src/app/operators/operators.module.ts

@@ -24,6 +24,7 @@ import { WalkthroughComponent } from './components/walkthrough/walkthrough.compo
 import { HighlightJsDirective } from './directives/highlight-js.directive';
 import { SafeUrlPipe } from './pipes/safe-url.pipe';
 import { MaterialModule } from '../material/material.module';
+import { ArgumentPipe } from './pipes/argument.pipe';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { MaterialModule } from '../material/material.module';
     WalkthroughComponent,
     MarbleDiagramComponent,
     HighlightJsDirective,
-    SafeUrlPipe
+    SafeUrlPipe,
+    ArgumentPipe
   ],
   imports: [CommonModule, MaterialModule, OperatorsRoutingModule, LayoutModule],
   providers: [

src/app/operators/pipes/argument.pipe.ts

@@ -0,0 +1,15 @@
+import { OperatorParameters } from './../../../operator-docs/operator.model';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'argument' })
+export class ArgumentPipe implements PipeTransform {
+  transform(argument: OperatorParameters) {
+    if (argument.attribute) {
+      return `[${argument.attribute}]
+      ${argument.description}
+      `;
+    }
+
+    return argument.description;
+  }
+}

src/operator-docs/combination/combineAll.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const combineAll: OperatorDoc = {
   name: 'combineAll',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature: 'public combineAll(project: function): Observable',
   parameters: [
     {

src/operator-docs/combination/combineLatest.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const combineLatest: OperatorDoc = {
   name: 'combineLatest',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature:
     'public combineLatest(observables: ...Observable, project: function): Observable',
   useInteractiveMarbles: true,

src/operator-docs/combination/concat.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const concat: OperatorDoc = {
   name: 'concat',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature:
     'public static concat(input1: ObservableInput, input2: ObservableInput, scheduler: Scheduler): Observable',
   parameters: [

src/operator-docs/combination/concatAll.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const concatAll: OperatorDoc = {
   name: 'concatAll',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature: 'public concatAll(): Observable',
   parameters: [],
   marbleUrl: 'http://reactivex.io/rxjs/img/concatAll.png',

src/operator-docs/combination/forkJoin.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const forkJoin: OperatorDoc = {
   name: 'forkJoin',
   operatorType: 'combination',
+  returnValue: 'any',
   signature: 'public static forkJoin(sources: *): any',
   parameters: [
     {

src/operator-docs/combination/merge.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const merge: OperatorDoc = {
   name: 'merge',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature:
     'public merge(other: ObservableInput, concurrent: number, scheduler: Scheduler): Observable',
   parameters: [

src/operator-docs/combination/mergeAll.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const mergeAll: OperatorDoc = {
   name: 'mergeAll',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature: 'public mergeAll(concurrent: number): Observable',
   parameters: [
     {

src/operator-docs/combination/pairwise.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const pairwise: OperatorDoc = {
   name: 'pairwise',
   operatorType: 'combination',
+  returnValue: 'Observable<Array<T>>',
   marbleUrl: 'http://reactivex.io/rxjs/img/pairwise.png',
   signature: 'public pairwise(): Observable<Array<T>>',
   shortDescription: {

src/operator-docs/combination/startWith.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const startWith: OperatorDoc = {
   name: 'startWith',
   operatorType: 'combination',
+  returnValue: 'Observable',
   marbleUrl: 'http://reactivex.io/rxjs/img/startWith.png',
   signature: 'public startWith(values: ...T, scheduler: Scheduler): Observable',
   shortDescription: {

src/operator-docs/combination/withLatestFrom.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const withLatestFrom: OperatorDoc = {
   name: 'withLatestFrom',
   operatorType: 'combination',
+  returnValue: 'Observable',
   signature:
     'public withLatestFrom(other: ObservableInput, project: Function): Observable',
   marbleUrl: 'http://reactivex.io/rxjs/img/withLatestFrom.png',

src/operator-docs/creation/empty.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const empty: OperatorDoc = {
   name: 'empty',
   operatorType: 'creation',
+  returnValue: 'Observable',
   signature: 'public empty(scheduler?: IScheduler): Observable',
   parameters: [
     {

src/operator-docs/creation/from.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const from: OperatorDoc = {
   name: 'from',
   operatorType: 'creation',
+  returnValue: 'Observable',
   signature: `from(ish: ArrayLike | ObservableInput, scheduler: Scheduler): Observable`,
   parameters: [
     {

src/operator-docs/filtering/debounce.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const debounce: OperatorDoc = {
   name: 'debounce',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature:
     'public debounce(durationSelector: function(value: T): SubscribableOrPromise): Observable',
   marbleUrl: 'http://reactivex.io/rxjs/img/debounce.png',

src/operator-docs/filtering/debounceTime.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const debounceTime: OperatorDoc = {
   name: 'debounceTime',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature:
     'public debounceTime(dueTime: number, scheduler: IScheduler = async): Observable',
   parameters: [

src/operator-docs/filtering/distinctUntilChanged.ts

@@ -6,6 +6,7 @@ import { OperatorDoc } from '../operator.model';
 export const distinctUntilChanged: OperatorDoc = {
   name: 'distinctUntilChanged',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature: 'public distinctUntilChanged(compare: function): Observable',
   useInteractiveMarbles: true,
   parameters: [

src/operator-docs/filtering/filter.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const filter: OperatorDoc = {
   name: 'filter',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature:
     'public filter(predicate: function(value: T, index: number): boolean, thisArg: any): Observable',
   parameters: [

src/operator-docs/filtering/first.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const first: OperatorDoc = {
   name: 'first',
   operatorType: 'filtering',
+  returnValue: 'Observable<T | R>',
   signature: `public first(predicate: function(value: T, index: number, source: Observable<T>):
    boolean, resultSelector: function(value: T, index: number): R, defaultValue: R): Observable<T | R>`,
   parameters: [

src/operator-docs/filtering/last.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const last: OperatorDoc = {
   name: 'last',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature: 'public last(predicate: function): Observable',
   useInteractiveMarbles: true,
   parameters: [

src/operator-docs/filtering/sample.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const sample: OperatorDoc = {
   name: 'sample',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature: `public sample(notifier: Observable<any>): Observable<T>`,
   parameters: [
     {

src/operator-docs/filtering/single.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const single: OperatorDoc = {
   name: 'single',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature: 'public single(predicate: Function): Observable<T>',
   parameters: [
     {

src/operator-docs/filtering/skip.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const skip: OperatorDoc = {
   name: 'skip',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature: 'public skip(count: Number): Observable',
   parameters: [
     {

src/operator-docs/filtering/skipUntil.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const skipUntil: OperatorDoc = {
   name: 'skipUntil',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature: 'public skipUntil(notifier: Observable): Observable<T>',
   parameters: [
     {

src/operator-docs/filtering/skipWhile.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const skipWhile: OperatorDoc = {
   name: 'skipWhile',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature: `
     public skipWhile(predicate: Function): Observable
   `,

src/operator-docs/filtering/take.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const take: OperatorDoc = {
   name: 'take',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature: 'public take(count: number): Observable<T>',
   useInteractiveMarbles: true,
   parameters: [

src/operator-docs/filtering/takeUntil.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const takeUntil: OperatorDoc = {
   name: 'takeUntil',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature: 'public takeUntil(notifier: Observable): Observable<T>',
   useInteractiveMarbles: true,
   parameters: [

src/operator-docs/filtering/takeWhile.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const takeWhile: OperatorDoc = {
   name: 'takeWhile',
   operatorType: 'filtering',
+  returnValue: 'Observable',
   signature:
     'public takeWhile(predicate: function(value: T, index: number): boolean): Observable',
   parameters: [

src/operator-docs/filtering/throttle.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const throttle: OperatorDoc = {
   name: 'throttle',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature:
     'public throttle(durationSelector: function(value: T): SubscribableOrPromise): Observable<T>',
   parameters: [

src/operator-docs/filtering/throttleTime.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const throttleTime: OperatorDoc = {
   name: 'throttleTime',
   operatorType: 'filtering',
+  returnValue: 'Observable<T>',
   signature:
     'public throttleTime(duration: number, scheduler: Scheduler): Observable<T>',
   parameters: [

src/operator-docs/operator.model.ts

@@ -1,4 +1,5 @@
-export type OperatorType = 'combination'
+export type OperatorType =
+  | 'combination'
   | 'conditional'
   | 'creation'
   | 'error handling'
@@ -38,18 +39,19 @@ export interface OperatorExtra {
 
 export interface OperatorDoc {
   readonly name?: string;
+  readonly returnValue?: string;
   readonly operatorType?: OperatorType;
   readonly signature?: string;
   readonly useInteractiveMarbles?: boolean;
   readonly marbleUrl?: string;
   readonly parameters?: OperatorParameters[];
   readonly shortDescription?: {
     description: string;
-    extras?: OperatorExtra[]
+    extras?: OperatorExtra[];
   };
   readonly walkthrough?: {
     description: string;
-    extras?: OperatorExtra[]
+    extras?: OperatorExtra[];
   };
   readonly examples?: OperatorExample[];
   readonly additionalResources?: OperatorReference[];

src/operator-docs/transformation/buffer.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const buffer: OperatorDoc = {
   name: 'buffer',
   operatorType: 'transformation',
+  returnValue: 'Observable',
   signature: 'public buffer(closingNotifier: Observable): Observable',
   useInteractiveMarbles: true,
   parameters: [

src/operator-docs/transformation/bufferCount.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const bufferCount: OperatorDoc = {
   name: 'bufferCount',
   operatorType: 'transformation',
+  returnValue: 'Observable',
   signature: ` bufferCount(bufferSize: number, startBufferEvery: number): Observable`,
   parameters: [
     {

src/operator-docs/transformation/bufferTime.ts

@@ -3,6 +3,7 @@ import { OperatorDoc } from '../operator.model';
 export const bufferTime: OperatorDoc = {
   name: 'bufferTime',
   operatorType: 'transformation',
+  returnValue: 'Observable',
   signature: `bufferTime(
     bufferTimeSpan: number,
     bufferCreationInterval: number,