Make small cosmetic improvments across the user interface (#396)

photon-client/src/views/PipelineViews/ContoursTab.vue

@@ -1,140 +1,141 @@
 <template>
   <div>
     <CVrangeSlider
-        v-model="contourArea"
-        name="Area"
-        min="0"
-        max="100"
-        step="0.1"
-        @input="handlePipelineData('contourArea')"
+      v-model="contourArea"
+      name="Area"
+      min="0"
+      max="100"
+      step="0.1"
+      @input="handlePipelineData('contourArea')"
     />
     <CVrangeSlider
-        v-model="contourRatio"
-        v-if="currentPipelineType() !== 3"
-        name="Ratio (W/H)"
-        tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
-        min="0"
-        max="100"
-        step="0.1"
-        @input="handlePipelineData('contourRatio')"
+      v-if="currentPipelineType() !== 3"
+      v-model="contourRatio"
+      name="Ratio (W/H)"
+      tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
+      min="0"
+      max="100"
+      step="0.1"
+      @input="handlePipelineData('contourRatio')"
     />
     <CVrangeSlider
-        v-model="contourFullness"
-        v-if="currentPipelineType() !== 3"
-        name="Fullness"
-        tooltip="Min and max ratio between a contour's area and its bounding rectangle"
-        min="0"
-        max="100"
-        @input="handlePipelineData('contourFullness')"
+      v-if="currentPipelineType() !== 3"
+      v-model="contourFullness"
+      name="Fullness"
+      tooltip="Min and max ratio between a contour's area and its bounding rectangle"
+      min="0"
+      max="100"
+      @input="handlePipelineData('contourFullness')"
     />
     <CVrangeSlider
-        v-model="contourPerimeter"
-        v-if="currentPipelineType() === 3"
-        name="Perimeter"
-        tooltip="Min and max perimeter of the shape, in pixels"
-        min="0"
-        max="4000"
-        @input="handlePipelineData('contourPerimeter')"
+      v-if="currentPipelineType() === 3"
+      v-model="contourPerimeter"
+      name="Perimeter"
+      tooltip="Min and max perimeter of the shape, in pixels"
+      min="0"
+      max="4000"
+      @input="handlePipelineData('contourPerimeter')"
     />
     <CVslider
-        v-model="contourSpecklePercentage"
-        name="Speckle Rejection"
-        tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
-        min="0"
-        max="100"
-        :slider-cols="largeBox"
-        @input="handlePipelineData('contourSpecklePercentage')"
+      v-model="contourSpecklePercentage"
+      name="Speckle Rejection"
+      tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
+      min="0"
+      max="100"
+      :slider-cols="largeBox"
+      @input="handlePipelineData('contourSpecklePercentage')"
     />
     <template v-if="currentPipelineType() !== 3">
       <CVselect
-          v-model="contourGroupingMode"
-          name="Target Grouping"
-          tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
-          :select-cols="largeBox"
-          :list="['Single','Dual','2orMore']"
-          @input="handlePipelineData('contourGroupingMode')"
+        v-model="contourGroupingMode"
+        name="Target Grouping"
+        tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
+        :select-cols="largeBox"
+        :list="['Single','Dual','2orMore']"
+        @input="handlePipelineData('contourGroupingMode')"
       />
       <CVselect
-          v-model="contourIntersection"
-          name="Target Intersection"
-          tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
-          :select-cols="largeBox"
-          :list="['None','Up','Down','Left','Right']"
-          :disabled="contourGroupingMode === 0"
-          @input="handlePipelineData('contourIntersection')"
+        v-model="contourIntersection"
+        name="Target Intersection"
+        tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
+        :select-cols="largeBox"
+        :list="['None','Up','Down','Left','Right']"
+        :disabled="contourGroupingMode === 0"
+        @input="handlePipelineData('contourIntersection')"
       />
     </template>
     <!-- If we arent not a shape, we are a shape-->
     <template v-else>
-      <v-divider class="mt-3"/>
+      <v-divider class="mt-3" />
       <CVselect
-          v-model="contourShape"
-          name="Target Shape"
-          tooltip="The shape of targets to look for"
-          :select-cols="largeBox"
-          :list="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
-          @input="handlePipelineData('contourShape')"
+        v-model="contourShape"
+        name="Target Shape"
+        tooltip="The shape of targets to look for"
+        :select-cols="largeBox"
+        :list="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
+        @input="handlePipelineData('contourShape')"
       />
 
       <!-- Accuracy % is only for polygons-->
       <CVslider
-          v-model="accuracyPercentage"
-          :disabled="currentPipelineSettings().contourShape < 1"
-          name="Shape Simplification"
-          tooltip="How much we should simply the input contour before checking how many sides it has"
-          min="0"
-          max="100"
-          :slider-cols="largeBox"
-          @input="handlePipelineData('accuracyPercentage')"
+        v-model="accuracyPercentage"
+        :disabled="currentPipelineSettings().contourShape < 1"
+        name="Shape Simplification"
+        tooltip="How much we should simply the input contour before checking how many sides it has"
+        min="0"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('accuracyPercentage')"
       />
       <!-- Similarly, the threshold is only for circles -->
       <CVslider
-          v-model="circleDetectThreshold"
-          :disabled="currentPipelineSettings().contourShape !== 0"
-          name="Circle match distance"
-          tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
-          min="1"
-          max="100"
-          :slider-cols="largeBox"
-          @input="handlePipelineData('circleDetectThreshold')"
+        v-model="circleDetectThreshold"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Circle match distance"
+        tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
+        min="1"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('circleDetectThreshold')"
       />
       <CVrangeSlider
-          v-model="contourRadius"
-          :disabled="currentPipelineSettings().contourShape !== 0"
-          name="Radius"
-          min="0"
-          max="100"
-          step="1"
-          @input="handlePipelineData('contourRadius')"
+        v-model="contourRadius"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Radius"
+        min="0"
+        max="100"
+        step="1"
+        label-cols="3"
+        @input="handlePipelineData('contourRadius')"
       />
       <CVslider
-          v-model="maxCannyThresh"
-          :disabled="currentPipelineSettings().contourShape !== 0"
-          name="Max Canny Threshold"
-          min="1"
-          max="100"
-          :slider-cols="largeBox"
-          @input="handlePipelineData('maxCannyThresh')"
+        v-model="maxCannyThresh"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Max Canny Threshold"
+        min="1"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('maxCannyThresh')"
       />
       <CVslider
-          v-model="circleAccuracy"
-          :disabled="currentPipelineSettings().contourShape !== 0"
-          name="Circle Accuracy"
-          min="0"
-          max="100"
-          :slider-cols="largeBox"
-          @input="handlePipelineData('circleAccuracy')"
+        v-model="circleAccuracy"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Circle Accuracy"
+        min="0"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('circleAccuracy')"
       />
-      <v-divider class="mt-3"/>
+      <v-divider class="mt-3" />
     </template>
     <CVselect
-        v-model="contourSortMode"
-        name="Target Sort"
-        tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
-        :select-cols="largeBox"
-        :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
-        @input="handlePipelineData('contourSortMode')"
-        @rollback="e => rollback('contourSortMode', e)"
+      v-model="contourSortMode"
+      name="Target Sort"
+      tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
+      :select-cols="largeBox"
+      :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
+      @input="handlePipelineData('contourSortMode')"
+      @rollback="e => rollback('contourSortMode', e)"
     />
   </div>
 </template>