data-islands-desinger.html

<div class="jr-mJoinsDesigner">
  <div class="jr-mJoinsDesigner-header">
      <div class="jr-mJoinsDesigner-header-leftTable">Left:Table Fields</div>
      <div class="jr-mJoinsDesigner-header-operator">Operator</div>
      <div class="jr-mJoinsDesigner-header-rightTable">Right:Table Fields</div>
      <div class="jr-mJoinsDesigner-header-type">Type</div>
      <div class="jr-mJoinsDesigner-header-weight">Weight</div>
      <div class="jr-mJoinsDesigner-header-options">Options</div>
  </div>
  <div class="jr-mJoinsDesigner-dataIslands">
      <div class="jr-mJoinsDataIsland">
          <div class="jr-mJoinsDataIsland-header">
            <div class="jr-mJoinsDataIsland-header-title">Data Island 1</div>
            <div class="jr-mJoinsDataIsland-header-options">x</div>
          </div>
          <div class="jr-mJoinsDataIsland-dropzone">
            <div class="jr-mJoinsDataIsland-dropzone-left">
                <div class="jr-mDropzone"></div>
            </div>
            <div class="jr-mJoinsDataIsland-dropzone-operator">=</div>
            <div class="jr-mJoinsDataIsland-dropzone-right">
                <div class="jr-mDropzone"></div>
            </div>
          </div>
          <div class="jr-mJoinsDataIsland-tables">
            <div class="jr-mJoinsTable">
                <div class="jr-mJoinsTable-header">Joins Table 1</div>
                <div class="jr-mJoinsTable-rows">
                  <div class="jr-mJoinsTableRow">
                       <div class="jr-mJoinsTableRow-leftField">public_product:product_id</div>
                       <div class="jr-mJoinsTableRow-operator">=</div>
                       <div class="jr-mJoinsTableRow-rightField">public_expense_fact:product_id</div>
                       <div class="jr-mJoinsTableRow-options">x</div>
                  </div>
                  <div class="jr-mJoinsTableRow">
                       <div class="jr-mJoinsTableRow-leftField">public_product:product_id</div>
                       <div class="jr-mJoinsTableRow-operator">!=</div>
                       <div class="jr-mJoinsTableRow-rightField">public_expense_fact:product_id</div>
                       <div class="jr-mJoinsTableRow-options">x</div>
                  </div>
                </div>
            </div>
            <div class="jr-mJoinsTable">Joins Table 2</div>
          </div>
      </div>
      <div class="jr-mJoinsDataIsland">Data Island 2</div>
  </div>
</div>