added walkthrough

Author: btroncone

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

@@ -1,4 +1,4 @@
-<h2 class="examples-header"> Examples </h2>
+<h2> Examples </h2>
 <div
   class="code-example"
   *ngFor="let example of operatorExamples"

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

@@ -1,7 +1,3 @@
-.examples-header {
-  margin: 32px 0 16px;
-}
-
 .code-block {
   position: relative;
 }

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

@@ -6,9 +6,10 @@
 </app-operator-header>
 <section class="main-operator-container mat-typography">
   <h3 class="short-description" [innerHTML]="shortDescription"></h3>
-  <app-marble-diagram [url]="marbleUrl"></app-marble-diagram>
+  <app-marble-diagram [url]="marbleUrl" class="margin-bottom-32"></app-marble-diagram>
+  <app-operator-examples [operatorExamples]="examples" class="margin-bottom-16"></app-operator-examples>
   <app-operator-parameters [operatorParameters]="parameters"></app-operator-parameters>
-  <app-operator-examples [operatorExamples]="examples"></app-operator-examples>
+  <app-operator-walkthrough [operatorWalkthrough]="walkthrough" class="margin-bottom-16"></app-operator-walkthrough>
   <app-related-operators [relatedOperators]="relatedOperators"></app-related-operators>
   <app-additional-resources
     [additionalResources]="additionalResources"

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

@@ -1,14 +1,19 @@
-h2 {
-  margin: 16px 0 16px;
-}
-
 .main-operator-container {
   padding: 5px;
   display: flex;
   flex-direction: column;
   padding: 0 16px;
+  margin-bottom: 16px;
 }
 
 .short-description {
   margin: 16px 0 32px;
 }
+
+.margin-bottom-32 {
+  margin-bottom: 32px;
+}
+
+.margin-bottom-16 {
+  margin-bottom: 16px;
+}

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

@@ -28,8 +28,8 @@ export class OperatorComponent {
     return this.operator.shortDescription && this.operator.shortDescription.description;
   }
 
-  get longDescription() {
-    return this.operator.longDescription && this.operator.shortDescription.description;
+  get walkthrough() {
+    return this.operator.walkthrough && this.operator.walkthrough.description;
   }
 
   get parameters() {

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

@@ -0,0 +1,4 @@
+<h2> Walkthrough </h2>
+<div class="walkthrough-container" [innerHTML]="operatorWalkthrough">
+
+</div>

src/app/operators/components/walkthrough/walkthrough.component.scss

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorExample } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-walkthrough',
+  templateUrl: './walkthrough.component.html',
+  styleUrls: ['./walkthrough.component.scss']
+})
+export class WalkthroughComponent {
+  @Input() operatorWalkthrough: string;
+}

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

@@ -21,6 +21,7 @@ import { OperatorExamplesComponent } from './components/operator-examples/operat
 import { RelatedOperatorsComponent } from './components/related-operators/related-operators.component';
 import { AdditionalResourcesComponent } from './components/additional-resources/additional-resources.component';
 import { MarbleDiagramComponent } from './components/marble-diagram/marble-diagram.component';
+import { WalkthroughComponent } from './components/walkthrough/walkthrough.component';
 
 import { OperatorScrollDirective } from './directives/operator-scroll.directive';
 import { HighlightJsDirective } from './directives/highlight-js.directive';
@@ -41,6 +42,7 @@ const OPERATOR_ROUTES = [
     OperatorExamplesComponent,
     RelatedOperatorsComponent,
     AdditionalResourcesComponent,
+    WalkthroughComponent,
     MarbleDiagramComponent,
     OperatorScrollDirective,
     HighlightJsDirective

src/app/operators/operators.module.ts

@@ -16,8 +16,31 @@ export const combineAll: OperatorDoc = {
   'shortDescription': {
     'description': 'Flattens an Observable-of-Observables by applying <a href="/operators#combineLatest" class="markdown-code">combineLatest</a> when the Observable-of-Observables completes.'
   },
-  'longDescription': {
-    'description': ''
+  'walkthrough': {
+    'description': `
+      <p>
+        Takes an Observable of Observables, and collects all Observables from it.
+        Once the outer Observable completes, it subscribes to all collected
+        Observables and combines their values using the <a href="/operators#combineLatest" class="markdown-code">combineLatest</a>
+        strategy, such that:
+      </p>
+      <ul>
+        <li>Every time an inner Observable emits, the output Observable emits.</li>
+        <li>When the returned observable emits, it emits all of the latest values by:
+          <ul>
+            <li>
+              If a <span class="markdown-code">project</span> function is provided, it is called with each recent value
+              from each inner Observable in whatever order they arrived, and the result
+              of the <span class="markdown-code">project</span> function is what is emitted by the output Observable.
+            </li>
+            <li>
+              If there is no <span class="markdown-code">project</span> function, an array of all of the most recent
+              values is emitted by the output Observable.
+            </li>
+          </ul>
+        </li>
+      </ul>
+    `
   },
   'examples': [
     {