<commit_before><template>
  <os-page-toolbar>
    <template #default>
      <os-button left-icon="download" label="Export Map" @click="exportMap"
        v-if="!anySelected && !isDimensionless" />

      <span v-show-if-allowed="containerResources.updateOpts">
        <span v-if="isSpecimenContainer && !anySelected && (ctx.hasFreeSlots || ctx.hasBlockedSlots)">
          <os-button left-icon="ban" label="Block All" @click="blockAll"
            v-if="ctx.hasFreeSlots" />

          <os-button left-icon="undo" label="Unblock All" @click="unblockAll"
            v-if="ctx.hasBlockedSlots" />
        </span>

        <span v-if="isSpecimenContainer && anySelected">
          <os-button left-icon="ban" label="Block" @click="block" />

          <os-button left-icon="undo" label="Unblock" @click="unblock" />
        </span>

        <span v-if="isSpecimenContainer && !anySelected && !ctx.showLabelsScanArea">
          <os-button left-icon="save" label="Store Specimens" @click="showLabelsScanArea" />
        </span>
      </span>

      <os-button left-icon="palette" label="View Color Coding" @click="showColorCoding" 
        v-if="ctx.occupants.length > 0 && Object.keys(ctx.colorCoding).length > 0" />
    </template>
  </os-page-toolbar>

  <os-grid>
    <os-grid-column class="os-container-locations" :width="12">
      <div class="labels-scan-area" v-if="isSpecimenContainer && !anySelected && ctx.showLabelsScanArea">
        <os-add-specimens ref="specimensScanner" @labels-scanned="updateMap" :optionsAtBottom="true">
          <os-button primary label="Store" @click="assignPositions" />

          <os-button label="Cancel" @click="hideLabelsScanArea" />

          <template #options v-if="!isDimensionless">
            <os-boolean-checkbox v-model="ctx.vacateOccupant" @change="updateMap(ctx.labels)">
              <label>Vacate existing specimens</label>
            </os-boolean-checkbox>
          </template>
        </os-add-specimens>
      </div>

      <Layout ref="layout" class="map" :container="ctx.container" :occupants="ctx.occupants" 
        :selected-positions="ctx.selectedPositions" @occupant-clicked="showOccupantDetails"
        v-if="!isDimensionless">
        <template #occupant_container="slotProps">
          <a class="occupant" @click="showOccupantDetails($event, slotProps.occupant)">
            <os-icon class="container-icon" name="box-open" />
            <span class="name" v-os-tooltip="slotProps.occupant.tooltip">
              <span>{{slotProps.occupant.displayName}}</span>
            </span>
          </a>
        </template>
        <template #occupant_specimen="slotProps">
          <a class="occupant" 
            :class="{'new-occupant': !slotProps.occupant.id, 'displaced-occupant': !!slotProps.occupant.oldOccupant}"
            @click="showOccupantDetails($event, slotProps.occupant)">

            <os-icon class="specimen-icon" name="vial" :style="slotProps.occupant.colorCode" 
              v-show="slotProps.occupant.displayName" v-os-tooltip="slotProps.occupant.tooltip" />

            <os-icon class="specimen-reserved" name="ban" v-os-tooltip="'Reserved Specimen'"
              v-if="slotProps.occupant.occupantProps && slotProps.occupant.occupantProps.reserved" />

            <span class="name" v-os-tooltip="slotProps.occupant.displayName">
              <span>{{slotProps.occupant.displayName}}</span>
            </span>
          </a>
        </template>
        <template #occupant_empty="slotProps">
          <os-boolean-checkbox class="position-selector" v-model="ctx.selectedPositions[slotProps.position.position]" />
          <a class="occupant" v-os-tooltip="'Blocked'" v-if="slotProps.occupant.blocked">
            <os-icon class="blocked" name="ban" />
          </a>
        </template>
        <template #empty="slotProps">
          <div v-if="!ctx.container.storeSpecimensEnabled">
            <os-button text left-icon="plus" v-os-tooltip="'Click to add container'"
              @click="createContainer(slotProps)" /> 
          </div>
          <div v-else>
            <os-boolean-checkbox class="position-selector"
              v-model="ctx.selectedPositions[slotProps.position.position]" />
          </div><commit_msg>Vue JS: UI indication for positions/slots blocked by auto allocation.<commit_after><template>
  <os-page-toolbar>
    <template #default>
      <os-button left-icon="download" label="Export Map" @click="exportMap"
        v-if="!anySelected && !isDimensionless" />

      <span v-show-if-allowed="containerResources.updateOpts">
        <span v-if="isSpecimenContainer && !anySelected && (ctx.hasFreeSlots || ctx.hasBlockedSlots)">
          <os-button left-icon="ban" label="Block All" @click="blockAll"
            v-if="ctx.hasFreeSlots" />

          <os-button left-icon="undo" label="Unblock All" @click="unblockAll"
            v-if="ctx.hasBlockedSlots" />
        </span>

        <span v-if="isSpecimenContainer && anySelected">
          <os-button left-icon="ban" label="Block" @click="block" />

          <os-button left-icon="undo" label="Unblock" @click="unblock" />
        </span>

        <span v-if="isSpecimenContainer && !anySelected && !ctx.showLabelsScanArea">
          <os-button left-icon="save" label="Store Specimens" @click="showLabelsScanArea" />
        </span>
      </span>

      <os-button left-icon="palette" label="View Color Coding" @click="showColorCoding" 
        v-if="ctx.occupants.length > 0 && Object.keys(ctx.colorCoding).length > 0" />
    </template>
  </os-page-toolbar>

  <os-grid>
    <os-grid-column class="os-container-locations" :width="12">
      <div class="labels-scan-area" v-if="isSpecimenContainer && !anySelected && ctx.showLabelsScanArea">
        <os-add-specimens ref="specimensScanner" @labels-scanned="updateMap" :optionsAtBottom="true">
          <os-button primary label="Store" @click="assignPositions" />

          <os-button label="Cancel" @click="hideLabelsScanArea" />

          <template #options v-if="!isDimensionless">
            <os-boolean-checkbox v-model="ctx.vacateOccupant" @change="updateMap(ctx.labels)">
              <label>Vacate existing specimens</label>
            </os-boolean-checkbox>
          </template>
        </os-add-specimens>
      </div>

      <Layout ref="layout" class="map" :container="ctx.container" :occupants="ctx.occupants" 
        :selected-positions="ctx.selectedPositions" @occupant-clicked="showOccupantDetails"
        v-if="!isDimensionless">
        <template #occupant_container="slotProps">
          <a class="occupant" @click="showOccupantDetails($event, slotProps.occupant)">
            <os-icon class="container-icon" name="box-open" />
            <span class="name" v-os-tooltip="slotProps.occupant.tooltip">
              <span>{{slotProps.occupant.displayName}}</span>
            </span>
          </a>
        </template>
        <template #occupant_specimen="slotProps">
          <a class="occupant" 
            :class="{'new-occupant': !slotProps.occupant.id, 'displaced-occupant': !!slotProps.occupant.oldOccupant}"
            @click="showOccupantDetails($event, slotProps.occupant)">

            <os-icon class="specimen-icon" name="vial" :style="slotProps.occupant.colorCode" 
              v-show="slotProps.occupant.displayName" v-os-tooltip="slotProps.occupant.tooltip" />

            <os-icon class="specimen-reserved" name="ban" v-os-tooltip="'Reserved Specimen'"
              v-if="slotProps.occupant.occupantProps && slotProps.occupant.occupantProps.reserved" />

            <span class="name" v-os-tooltip="slotProps.occupant.displayName">
              <span>{{slotProps.occupant.displayName}}</span>
            </span>
          </a>
        </template>
        <template #occupant_empty="slotProps">
          <div v-if="slotProps.occupant.blocked">
            <os-boolean-checkbox class="position-selector"
              v-model="ctx.selectedPositions[slotProps.position.position]" />
            <a class="occupant" v-os-tooltip="'Blocked'">
              <os-icon class="blocked" name="ban" />
            </a>
          </div>
          <div v-else>
            <a class="occupant" v-os-tooltip="'Blocked for auto allocation'">
              <os-icon class="blocked" name="cogs" />
            </a>
          </div>
        </template>
        <template #empty="slotProps">
          <div v-if="!ctx.container.storeSpecimensEnabled">
            <os-button text left-icon="plus" v-os-tooltip="'Click to add container'"
              @click="createContainer(slotProps)" /> 
          </div>
          <div v-else>
            <os-boolean-checkbox class="position-selector"
              v-model="ctx.selectedPositions[slotProps.position.position]" />
          </div>
{'fraction_non_alphanumeric': 0.16069799270072993, 'fraction_numerical': 0.0009124087591240876, 'mean_word_length': 2.7093908629441623, 'pattern_counts': {'":': 0, '<': 144, '<?xml version=': 0, '>': 148, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7383401', 'n_tokens_mistral': 2702, 'n_tokens_neox': 2622, 'n_words': 395}